JavaScript

透過瀏覽器的開發者工具調試 JavaScript 的方法 調試是程序設計師必備的核心技能之一。 有時候即使我們盡了最大的努力，但程序還是不能正確運行，比如說它崩潰了、運行緩慢或打印了錯誤信息。 當你編寫的程序不能按照期望的方式運行時，你該怎麼辦呢？ 你需要開始調試。 找出問題可能出在哪裡 第一步總是觀察發生了什麼，並試圖確定問題的根源所在。這是環境問題？是你給程序提供的輸入有問題？它是由於內存使用過多而導致一次性崩潰？還是每次運行都出現這個問題？ 在確定問題出自何處之後，你可以開始檢查具體的代碼部分。 閱讀代碼 在調試方面，最簡單的方法之一就是閱讀你自己編寫的代碼。用聲音朗讀。我們自己的聲音有一種神奇的作用，但無法在靜音時產生。 很多時候我都是通過這種方式找出問題所在的。 使用控制台 如果閱讀代碼沒有給你任何提示，下一個合理的步驟就是在你的代碼中添加一些可以提供一些線索的行。 在 JavaScript 前端代碼中，你通常會使用 alert() 和 console.log （和它的其他應用）。 考慮以下代碼： const a = calculateA() const b = calculateB() const result = a + b 結果不正確計算，所以你可以在計算結果之前添加 alert(a) 和 alert(b)，當代碼執行時瀏覽器將彈出兩個警告窗口。 const a = calculateA() const b = calculateB() alert(a) alert(b) const result = a + b 如果傳給 alert() 的是一個字符串或一個數字，這樣操作是沒有問題的。但一旦涉及到數組或對象等較復雜的數據類型，使用 alert() 就會變得很困難了，這時候你需要使用控制台 API。我們可以先從 console.log() 開始： const a = calculateA() const b = calculateB() console....

變數是指向識別符的字面值，因此您可以在程序中引用並使用它。了解如何使用 JavaScript 声明一个变量。 JavaScript 變數介紹 使用 var 使用 let 使用 const JavaScript 變數介紹 變數是指向識別符的字面值，因此您可以在程序中引用並使用它。 JavaScript 中的變數沒有任何附加的類型。一旦您將特定的字面值類型分配給變量，您可以稍後將變量重新分配給任何其他類型，而不會出現類型錯誤或任何問題。 這就是為什麼有時會將 JavaScript 稱為“未命名”的原因。 在使用變量之前，必須先聲明變量。有三種方式可以實現這一點，使用 var，let 或 const，而這三種方式在稍後與變量互動方面有所不同。 使用 var 在 ES2015 之前，var 是定義變量的唯一構造。 var a = 0 如果忘記添加 var，就會將值分配給未聲明的變量，結果可能會有所不同。 在開啟嚴格模式的現代環境中，您將收到一個錯誤。在較舊的環境中（或在未開啟嚴格模式的情況下），這將初始化該變量並將其分配給全局對象。 如果在聲明變量時未初始化該變量，則該變量將具有 undefined 的值，直到您將值分配給它。 var a //typeof a === 'undefined' 您可以多次重新聲明變量以覆蓋它： var a = 1 var a = 2 您也可以在同一語句中同時聲明多個變量： var a = 1, b = 2 作用域是變量可見的代碼部分。 使用 var 在任何函數外部初始化的變量將被分配給全局對象，具有全局作用域並且在任何地方都可見。使用 var 在函數內部初始化的變量將分配給該函數，具有局部作用域並且僅在其中可見，就像函數參數一樣。 在具有相同名稱的全局變量的函數中定義的任何變量將優先於全局變量，遮蔽它。 重要的是要理解，塊（由一對花括號識別）不定義新的作用域。只有在創建函數時才會創建新的作用域，因為 var 沒有塊作用域，而是函數作用域。...

了解 JavaScript 的基本賦值運算符。 使用賦值運算符 = 將一個值賦給變數： const a = 2 let b = 2 var c = 2 該運算符對於所有算術運算符都有多個快捷方式，它們使您能夠將第二個操作數的計算結果賦給第一個操作數。 它們分別是： +=：加法賦值運算符 -=：減法賦值運算符 *=：乘法賦值運算符 /=：除法賦值運算符 %=：求餘賦值運算符 **=：指數賦值運算符 舉例來說： let a = 0 a += 5 // a 等於 5 a -= 2 // a 等於 3 a *= 2 // a 等於 6 a /= 2 // a 等於 3 a %= 2 // a 等於 1 為了清楚起見，上面的操作是依次執行的，所以最終 a 的值為 1，而不是 0

JavaScript 提供了許多迴圈的方法。本教程將解釋現代 JavaScript 中各種迴圈的可能性。 介紹 for forEach do...while while for...in for...of for...in vs for...of 介紹 JavaScript 提供了許多迴圈的方法。本教程將以一個小例子和主要屬性來解釋每一種方法。 for const list = ['a', 'b', 'c'] for (let i = 0; i < list.length; i++) { console.log(list[i]) // 值 console.log(i) // 索引 } 你可以使用 break 中斷一個 for 迴圈。 你可以使用 continue 快速跳到下一個迭代。 forEach 在 ES5 中引入了 forEach。給定一個陣列，你可以使用 list.forEach() 來迭代其屬性。 const list = ['a', 'b', 'c'] list.forEach((item, index) => { console.log(item) // 值 console.log(index) // 索引 }) // 索引是可選的 list....

運算子使您能夠獲取一個或多個簡單表達式，並將它們組合成更複雜的表達式。 運算子使您能夠獲取一個或多個簡單表達式，並將它們組合成更複雜的表達式。 根據它們操作的運算元，我們可以將運算子分類。 大多數運算子使用 2 個運算元： 加法 (+) 減法 (-) 除法 (/) 取餘數 (%) 乘法 (*) 指數 (**) 賦值 (=) 比較運算子 (<, <= 等) 等於檢查 (==, !== 等) 邏輯 and 和 or instanceof in 某些運算子使用 1 個運算元： 遞增 (++) 遞減 (--) 一元求反 (-) 一元求正 (+) 邏輯非 (!) new delete typeof await 展開運算子 只有一個運算子使用 3 個運算元：三元運算子。

學習 JavaScript 運算子的優先順序規則基礎知識 每個複雜的敘述都會引入優先順序的問題。 以這個為例： const a = 1 \* 2 + 5 / 2 % 2 結果為 2.5，但為什麼呢？哪個運算會先執行，哪個需要等待呢？ 某些運算符的優先順序高於其他的。以下是優先順序規則的列表： 運算符 描述 - + ++ -- 一元運算符，遞增和遞減 * / % 乘法/除法 + - 加法/減法 = += -= *= /= %= **= 賦值 同級別的運算（例如 + 和 -）按照它們出現的順序執行。 按照這個表格，我們可以解決這個計算： const a = 1 \* 2 + 5 / 2 % 2 const a = 2 + 5 / 2 % 2 const a = 2 + 2....

學習 JavaScript 中的遞迴基礎 函式可以自己呼叫自己。 這就是遞迴的意思，它能夠以一個整潔的方式解決問題。 要達到這一點，您需要一個命名的函式表達式，換句話說，就是這樣： function doSomething() { } 所以我們可以在 doSomething() 內部呼叫 doSomething()。 我們可以用計算數字的階乘來做最簡單的例子。這是我們通過將數字乘以 (數字 - 1)，(數字 - 2) 等等，直到達到數字 1 而得到的數字。 數字 4 的階乘是 (4 * (4 - 1) * (4 - 2) * (4 - 3)) = 4 * 3 * 2 * 1，等於 24。 我們可以創建一個遞迴函式來自動計算： function factorial(n) { return n >= 1 ? n \* factorial(n - 1) : 1 } factorial(1) //1 factorial(2) //2 factorial(3) //6 factorial(4) //24 我們也可以使用箭頭函式：...

了解 JavaScript 邏輯運算子的基礎知識。 JavaScript 為我們提供了三個邏輯運算子：and（且）、or（或）和 not（非）。 邏輯且 如果兩個操作數都為 true，則返回 true： <表達式> && <表達式> 例如： a === true && b > 3 這個運算子的一個很酷的特性是，如果第一個表達式為 false，則不會執行第二個表達式。這在某些實際應用中非常有用，例如，可以在使用對象之前檢查它是否已定義： const car = { color: 'green' } const color = car && car.color 邏輯或 如果至少有一個操作數為 true，則返回 true： <表達式> || <表達式> 例如： a === true || b > 3 這個運算子非常有用，可以用來設置默認值。例如： const car = {} const color = car.color || 'green' 如果 car.color 未定義，則將 color 設置為默認值 green。 邏輯非 (!) 反轉布爾值的值：...

有些時候你可能會聽說 JS 是一種無類型的語言，但這是不正確的。確實，你可以將各種不同的類型賦值給變量，但 JavaScript 是有類型的。特別是，它提供了原始類型和對象類型。 原始類型 數字 字符串 模板字面量 布林值 null undefined 對象類型 如何查找變量的類型 原始類型 原始類型有： 數字 字符串 布林值 符號 還有兩種特殊類型： null undefined 我們將在下一節中詳細介紹它們。 數字 在內部，JavaScript 只有一種數字類型：每個數字都是浮點數。 數字字面量是在源代碼中表示的數字，根據它的寫法不同，它可以是整數字面量或浮點數字面量。 整數： 10 5354576767321 0xCC // 十六進制 浮點數： 3.14 .1234 5.2e4 //5.2 \* 10^4 字符串 字符串類型是一個字符序列。它在源代碼中被定義為字符串字面量，該字面量用引號或雙引號括起來。 'A string' "Another string" 字符串可以跨多行使用反斜杠： "A \ string" 字符串可以包含轉義序列，在打印字符串時可以被解釋，比如使用 \n 創建新行。當你需要在被引號括起來的字符串中輸入引號時，反斜杠也是很有用的，以防止被解釋為結束引號的字符： 'I\'m a developer' 字符串可以使用 + 運算符拼接： "A " + "string" 模板字面量 在 ES2015 中引入的模板字面量是一種更強大的定義字符串的方式。 const a\_string = `something` 你可以執行字符串替換，將任何 JS 表達式的結果嵌入其中：...

＃JavaScript比較運算子 學習JavaScript比較運算子的基礎知識 你可以使用以下運算子來比較兩個數字或兩個字串。 這些運算的結果將返回一個布林值。 < 小於 <= 小於或等於 > 大於 >= 大於或等於 const a = 2 a >= 1 //true 當比較字串時，這些運算子會檢查字母的順序，該順序編碼在Unicode中。字母的數值越大，對於運算子來說，該字母越大。 你可以在Wikipedia的Unicode字符代碼列表中找到字符的Unicode編碼。