了解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未定義 }

了解在 JavaScript 中使用异步函数的现代方法。 JavaScript 在很短的时间内从回调函数演变为 Promises，而自从 ES2017 以来，使用 async/await 语法的异步 JavaScript 变得更加简单。 介绍 为什么引入 async/await？ 它是如何工作的 一个简单的示例 Promises 全覆盖 代码更易读 串行多个异步函数 更容易调试 介绍 JavaScript 在很短的时间内从回调函数演变为 promises（ES2015），而自从 ES2017 以来，使用异步 JavaScript 的 async/await 语法变得更加简单。 异步函数是 promises 和 generators 的组合，基本上它们是对 promises 的更高级抽象。请记住：async/await 是建立在 promises 之上的。 为什么引入 async/await？ 它们减少了 promises 的样板代码，并且消除了 promises 链式调用的“不中断链条”的限制。 在 ES2015 中引入 Promise 时，它们被用来解决异步代码的问题，并且确实解决了这个问题，但是在 ES2015 和 ES2017 之间的两年时间里，很明显 promises 不能成为最终解决方案。 Promises 被引入用来解决著名的“回调地狱”问题，但是它们自身引入了复杂性和语法复杂性。 它们是一个很好的原语，可以为开发人员提供更好的语法，所以在适当的时候，我们得到了 async 函数。 它们使代码看起来像是同步的，但在幕后是异步的和非阻塞的。 它是如何工作的 异步函数返回一个 promise，就像这个例子中的那样： const doSomethingAsync = () => { return new Promise(resolve => { setTimeout(() => resolve('I did something'), 3000) }) } 当您想要调用此函数时，您在前面加上 await，调用代码将等到 promise 被解析或拒绝之前停止。一个注意事项：客户端函数必须定义为async。以下是一个示例：...

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 可以指定字符集：...

在 JavaScript 中，分號是可選的。我個人喜歡在我的代碼中避免使用分號，但許多人更喜歡使用它們。 JavaScript 中的分號在社群中存在著分歧。有些人喜歡無論如何都使用分號。其他人則喜歡避免使用它們。 在使用分號多年之後，在2017年秋季，我決定試著根據需要避免使用它們，並且我設置了 Prettier 來自動從我的代碼中移除分號，除非有特定的代碼結構需要它們。 現在我發現避免使用分號是自然的，我認為代碼看起來更好，並且更容易閱讀。 這一切都是因為 JavaScript 不強制要求使用分號。當存在需要分號的地方時，它會在幕後添加分號。 執行這一過程的機制稱為自動分號插入。 了解 JavaScript 自動分號插入的規則非常重要，以避免編寫可能產生錯誤的代碼，因為它並不按照您的期望方式運作。 JavaScript 自動分號插入的規則如下： 當下一行以打破當前行的代碼開始時（代碼可以跨越多行） 當下一行以 } 開始，結束當前的區塊 當到達源代碼文件的末尾 當單獨一行上存在 return 陳述式時 當單獨一行上存在 break 陳述式時 當單獨一行上存在 throw 陳述式時 當單獨一行上存在 continue 陳述式時 以下是一些不會按照您期望的代碼示例： 根據這些規則，這是一個示例： const hey = 'hey' const you = 'hey' const heyYou = hey + ' ' + you ['h', 'e', 'y'].forEach((letter) => console.log(letter)) 你會得到錯誤 Uncaught TypeError: Cannot read property 'forEach' of undefined，因為根據規則1，JavaScript 試圖將代碼解釋為： const hey = 'hey'; const you = 'hey'; const heyYou = hey + ' ' + you['h', 'e', 'y']....

什麼是命名空間？ 命名空間是將一組實體、變量、函數、對象包裝在單一的總體下的行為。 JavaScript 有多種方式來實現命名空間，通過看例子可以更容易地理解這個概念。 創建命名空間的最簡單方式是通過創建一個物件文字： const car = { start: () => { console.log('start'); }, stop: () => { console.log('stop'); } }; 這樣，start 和 stop 就被命名為 car 的子集：car.start() 和 car.stop()。 它們不會汙染全局物件。 為什麼這很重要？一個好的理由是沒有任何東西能干擾它們。 這種方式還可以在對象創建後將變量分配給該對象： const car = {}; car.start = () => { console.log('start'); }; car.stop = () => { console.log('stop'); }; 但是它們仍然可以從外部訪問，這要歸功於 car 對象引用。 從外部完全隱藏此代碼的最佳方法是將其包裹在一個區塊中，這是一段用花括號包裹的代碼，就像 if 或 for 區塊一樣，但也可以形成獨立的區塊，像這樣： { const start = () => { console.log('start'); }; const stop = () => { console....

JavaScript 中的基本類型和物件有哪些主要區別呢？ 首先，讓我們定義一下什麼是基本類型。 JavaScript 中的基本類型有： 字串 (String) 數字 (Number 和 BigInt) 布林值 (true 或 false) 未定義 (undefined) 符號值 (Symbol) null 是一種特殊的基本類型。如果你執行 typeof null，會返回 'object'，但它實際上是一種基本類型。 除了基本類型之外的一切都是物件。 函數也是物件。我們可以在函數上設置屬性和方法。typeof 會返回 'function'，但函數構造函數是來自於物件構造函數的。 基本類型和物件之間的主要區別有： 基本類型是不可變的，物件只有一個不可變的引用，但其值可以隨時間變化 基本類型是按值傳遞，物件是按引用傳遞 基本類型是按值複製，物件是按引用複製 基本類型是按值比較，物件是按引用比較 如果我們這樣複製一個基本類型： let name = 'Flavio' let secondName = name 現在，我們可以通過將 name 變量賦予一個新值來更改它，但 secondName 仍然保存著舊值，因為它是按值複製的： name = 'Roger' secondName //'Flavio' 如果我們有一個物件： let car = { color: 'yellow' } 然後將其複製到另一個變量： let car = { color: 'yellow' } let anotherCar = car 在這種情況下，anotherCar 指向與 car 相同的物件。如果你設置：...