JavaScript

這篇文章介紹 JavaScript 的 delete 操作子基礎。 JavaScript 的 delete 操作子用於刪除一個物件的屬性。 假設我們有這個物件： const car = { model: 'Fiesta', color: 'green' } 你可以使用 delete 操作子刪除屬性或方法： delete car.model 你也可以使用方括號的語法來參考屬性或方法： delete car['color']

學習 JavaScript if 條件語句的基礎知識 if 語句用於根據表達式的評價結果選擇不同的程序路徑。 以下是最簡單的例子，始終執行： if (true) { // 做某事 } 相反地，以下語句永遠不會執行： if (false) { // 做某事（？永遠不會執行？） } 如果在條件語句後只有一個語句要執行，可以省略大括號只寫該語句： if (true) doSomething() 條件語句會檢查您傳遞給它的表達式的 true 或 false 值。如果傳遞一個數字，除非它為 0，否則始終評估為 true。如果傳遞一個字符串，除非它是空字符串，否則始終評估為 true。這些是將類型轉換為布爾值的一般規則。 Else 您可以為 if 語句提供第二部分：else。 如果 if 條件為 false，則執行附加的語句： if (true) { // 做某事 } else { // 做其他事情 } 由於 else 接受一個語句，因此可以在其中嵌套另一個 if/else 語句： if (a === true) { // 做某事 } else if (b === true) { // 做其他事情 } else { // 回退 }

深入了解 JavaScript instanceof 運算子。 JavaScript的instanceof運算子會在第一個運算子是右邊所傳入物件的實例，或其原型鏈中的其中一個祖先時，回傳true。 在下面的例子中，可以看到myCar物件是Fiesta類別的實例，所以myCar instanceof Fiesta會回傳true。同樣地，由於Fiesta繼承自Car，所以也會回傳true，myCar instanceof Car。 class Car {} class Fiesta extends Car {} const myCar = new Fiesta() myCar instanceof Fiesta //true myCar instanceof Car //true

學習JavaScript Switch條件語句的基礎知識 當你有幾個選項可以選擇時，if/else語句非常有用。 然而，當選項太多時，使用if/else可能變得過於冗長，你的代碼會變得太複雜。 在這種情況下，你可能希望使用switch條件語句： switch(<表達式>) { // 場合 } 根據表達式的結果，JavaScript會觸發你定義的特定場合： const a = 2 switch(a) { case 1: // 處理a等於1的情況 break case 2: // 處理a等於2的情況 break case 3: // 處理a等於3的情況 break } 你必須在每個場合的底部添加一個break語句，否則JavaScript還會執行下一個場合的代碼（有時這很有用，但要小心錯誤）。 如果在函數內使用，如果switch定義了返回值，不需要使用break，你只需要使用return： const doSomething = (a) => { switch(a) { case 1: // 處理a等於1的情況 return '處理了1' case 2: // 處理a等於2的情況 return '處理了2' case 3: // 處理a等於3的情況 return '處理了3' } } 你可以提供一個default特殊場合，當沒有場合處理表達式的結果時，將會調用該場合： const a = 2 switch(a) { case 1: // 處理a等於1的情況 break case 2: // 處理a等於2的情況 break case 3: // 處理a等於3的情況 break default: // 處理所有其他情況 break }

了解JavaScript typeof運算子的基礎知識 在JavaScript中，任何值都有一個分配的類型。 typeof運算子是一個一元運算子，它返回表示變量類型的字符串。 使用示例： typeof 1 //'number' typeof '1' //'string' typeof {name: 'Flavio'} //'object' typeof [1, 2, 3] //'object' typeof true //'boolean' typeof undefined //'undefined' typeof (() => {}) //'function' typeof Symbol() //'symbol' JavaScript沒有“function”類型，而且當我們傳遞一個函數給typeof時，它返回'function'類型，這似乎有些奇怪。 這是它的一個特點，讓我們的工作更輕鬆。 如果在聲明變量時未初始化變量，它將具有undefined值，直到將值分配給它。 let a //typeof a === 'undefined' typeof也可以用於對象的屬性。 如果你有一個只有一個屬性的car對象： const car = { model: 'Fiesta' } 這是你檢查這個對象上的color屬性是否定義的方法： if (typeof car.color === 'undefined') { // color未定義 }

for...of 循環是我在 JavaScript 中喜歡使用的循環方式。 它結合了 forEach 循環的簡潔性和中斷的能力。 語法如下： const list = ['a', 'b', 'c'] for (const item of list) { console.log(item) } 您可以使用 break 在任何時間點中斷循環： const list = ['a', 'b', 'c'] for (const item of list) { console.log(item) if (item === 'b') break } 您可以使用 continue 跳過一次迭代： const list = ['a', 'b', 'c'] for (const item of list) { if (item === 'b') continue console.log(item) } 您可以使用 entries() 獲取迭代的索引： const list = ['a', 'b', 'c'] for (const [index, value] of list....

JavaScript 中的 map() 函式細節 在函數式編程中，map() 是陣列中的關鍵方法。 以下是一個例子，它遍歷陣列 a，並根據執行 f() 來建立一個新的陣列： const b = a.map(f); 我們可以使用 map() 函式來從初始陣列中建立一個新的陣列，並使用 filter() 函式對結果進行過濾。以下是一個簡單的例子，它建立一個新的陣列來獲取 list 陣列中每個項目的第一個字母，並過濾出與 A 匹配的項目： const list = ['Apple', 'Orange', 'Egg']; list.map(item => item[0]).filter(item => item === 'A'); //'A'

讓我們先談談它們的相似之處。 null 和 undefined 都是 JavaScript 的原始類型。 undefined 的意思是變數已聲明，但尚未賦值。 let age // age 是 undefined let age = null // age 是 null 注意：訪問尚未聲明的變數會引發 ReferenceError: <variable> is not defined 錯誤，但這並不意味著它是 undefined。 如何檢查變數是否為 null？使用比較運算符，例如 age === null。 對於 undefined 也是一樣：age === undefined。 在這兩種情況下，你都可以進行檢查： if (!age) { } 這將同時匹配 null 和 undefined。 你也可以使用 typeof 運算符： let age typeof age //'undefined' 儘管 null 被評估為一個對象，但它實際上是一個原始類型： let age = null typeof age //'object'

this 是一個根據使用位置有不同值的關鍵字。不了解 JavaScript 中這個微小的細節可能會帶來很多困擾，所以花五分鐘的時間來學習所有的技巧是值得的。 this 在嚴格模式下 在任何物件之外，在嚴格模式下，this 的值總是 undefined。 請注意，我提到了嚴格模式。如果未啟用嚴格模式（如果你的文件頂部沒有明確添加 'use strict'），你將處於所謂的松散模式，而 this - 除非下面特殊情況中提到的 - 將具有全局物件的值。 這意味著在瀏覽器上下文中是 window。 方法中的 this 方法是附加到物件的函式。 你可以以各種形式看到它。 以下是其中一種： const car = { maker: 'Ford', model: 'Fiesta', drive() { console.log(`Driving a ${this.maker} ${this.model} car!`) } } car.drive() //Driving a Ford Fiesta car! 在這種情況下，使用一般函式，this 會自動綁定到物件。 注意：上述的方法宣告與 drive: function() {… 是相同的，只是比較簡短： const car = { maker: 'Ford', model: 'Fiesta', drive: function() { console.log(`Driving a ${this.maker} ${this.model} car!`) } } 在這個例子中也是一樣的：...

學習如何在 JavaScript 中處理 Unicode，瞭解 Emoji 的組成，ES6 的改進以及在處理 Unicode 時可能遇到的一些問題。 源文件的 Unicode 編碼 JavaScript 在內部如何使用 Unicode 在字符串中使用 Unicode 歸一化 Emoji 獲取字符串的正確長度 ES6 Unicode 編碼點转義 編碼 ASCII 字節 Unicode 編碼的源文件 如果沒有指定其他方式，瀏覽器會假設任何程序的源代碼都是以本地字符集編寫的，而字符集因國家而異，可能會導致意外問題。因此，設置任何 JavaScript 文檔的字符集是很重要的。 如何指定其他字符集，尤其是 UTF-8，這是網絡上最常見的文件編碼方式？ 如果文件包含BOM字符，那將優先確定字符集。在網上可以找到許多不同的意見，有人說不建議在 UTF-8 中使用 BOM，有些編輯器甚至不會添加 BOM。 這是Unicode標準所說的： … 使用 BOM 對於 UTF-8 既不是必需的，也不是建議的，但在轉換使用了 BOM 的其他編碼形式的 UTF-8 數據的上下文中可能會遇到 BOM，或者在 BOM 作為 UTF-8 簽名使用的情況下可能會遇到 BOM。 這是 W3C 所說的： 在 HTML5 中，瀏覽器需要識別 UTF-8 BOM 並使用它檢測頁面的編碼，主要瀏覽器的最新版本在使用 UTF-8 編碼的頁面時也可以正常處理 BOM。- https://www.w3.org/International/questions/qa-byte-order-mark 如果使用 HTTP（或 HTTPS）獲取文件，Content-Type header 可以指定字符集：...