在 JavaScript 中，使用地圖資料結構可以將資料與鍵值關聯起來。在 ES6 引入地圖資料結構之前，人們通常將物件用作地圖，將某個物件或值與特定的鍵值關聯起來。 什麼是地圖 ES6 之前 進入地圖 將項目添加到地圖中 按鍵從地圖中獲取項目 按鍵從地圖中刪除項目 從地圖中刪除所有項目 檢查地圖中是否包含特定鍵的項目 查找地圖中項目的數量 初始化具有值的地圖 地圖的鍵 你幾乎永遠不會在真實生活中遇到的奇怪情況 遍歷地圖 遍歷地圖的鍵 遍歷地圖的值 遍歷地圖的鍵和值對 轉換為陣列 將地圖的鍵轉換為陣列 將地圖的值轉換為陣列 WeakMap 什麼是地圖 地圖資料結構允許將資料與鍵值關聯起來。 ES6 之前 ECMAScript 6（也稱為 ES2015）引入了地圖資料結構到 JavaScript 世界中，以及集合。 在 ES6 之前，人們通常使用物件作為地圖，通過將某個物件或值與特定的鍵值關聯起來： const car = {} car['color'] = 'red' car.owner = 'Flavio' console.log(car['color']) // red console.log(car.color) // red console.log(car.owner) // Flavio console.log(car['owner']) // Flavio 進入地圖 ES6 引入了地圖資料結構，為我們提供了一個適當的工具來處理這種類型的資料組織。 可以通過調用以下方法來初始化地圖： const m = new Map() 將項目添加到地圖中 可以使用 set 方法將項目添加到地圖中：...

如何在 JavaScript 函數的中間快速結束退出？ 你可以使用 return 關鍵字來實現。 當 JavaScript 遇到 return 關鍵字時，它立即退出函數，並將你在 return 之後傳遞的任何變量（或值）作為結果返回。 這是我經常使用的方法，以確保如果某個條件不符合預期，我可以立即退出函數。 也許我期望有一個參數，但它不存在： function calculateSomething(param) { if (!param) { return; } // 繼續執行函數 } 如果存在 param 值，函數將按預期繼續執行，否則它將立即停止。 在這個例子中，我返回了一個描述錯誤的對象： function calculateSomething(param) { if (!param) { return { error: true, message: '需要參數' }; } // 繼續執行函數 } 你返回的內容取決於調用函數的代碼對它的期望。 也許你可以在一切正常時返回 true，在出現問題時返回 false。或者像上面的例子中展示的那樣，返回一個具有 error 布爾標記的對象，以便你可以檢查結果是否包含該屬性（或在成功的情況下，返回一個具有 success: true 屬性的對象）。

介紹如何在 JavaScript 中使用私有類別欄位的程式碼範例。 在引入私有類別欄位之前，我們無法真正強制將屬性設為私有。我們只能使用慣例，例如使用 _ 作為提示該欄位為私有的方式，就像這樣： class Counter { _count = 0; increment() { this._count++; } } 但我們仍然可以通過以下方式存取此計數器： const counter = new Counter(); counter._count; 現在，我們可以使用私有類別欄位來強制將欄位設為私有： class Counter { #count = 0; increment() { this.#count++; } } 現在，我們無法從外部存取這個值。嘗試存取將引發語法錯誤。 這是新的類別欄位提案的一部分，你可以在 Chrome 72 和 Node 12 中使用它。

事件循環是理解 JavaScript 最重要的方面之一。本文將以簡單的方式解釋它。 介紹 阻塞事件循環 調用堆棧 簡單的事件循環解釋 排隊執行函數 消息隊列 ES6 任務隊列 介紹 了解 JavaScript 的事件循環是非常重要的。 我已經用 JavaScript 編程多年了，但我從來沒有完全理解它的運作原理。不知道這個概念的詳細細節是完全正常的，但通常還是有助於了解它的運作方式，而且你可能對此有點好奇。 本文旨在解釋 JavaScript 的內部細節，介紹單線程如何處理異步函數。 JavaScript 代碼在單線程運行，一次只能做一件事。 這是一個實際上非常有用的限制，因為它簡化了編程，不必擔心並發問題。 只需要注意如何編寫代碼，避免阻塞線程的任何操作，如同步網絡調用或無限循環。 通常情況下，大多數瀏覽器每個瀏覽器選項卡都有一個事件循環，以使每個過程都是獨立的，避免無限循環或繁重處理的網頁阻塞整個瀏覽器。 環境管理多個並發的事件循環，以處理 API 調用。Web Workers 也在自己的事件循環中運行。 你主要需要關注的是，你的代碼會在單個事件循環中運行，要以此為依據編寫代碼，避免對其進行阻塞。 阻塞事件循環 任何需要太長時間才能將控制權歸還給事件循環的 JavaScript 代碼都會阻塞頁面中的任何 JavaScript 代碼的執行，甚至會阻塞 UI 线程，用戶無法進行點擊、滾動頁面等操作。 在 JavaScript 中，幾乎所有 I/O 原語都是非阻塞的。網絡請求、Node.js 文件系統操作等都是非阻塞的。阻塞是例外，這就是為什麼 JavaScript 在回調、近來在 promises 和 async/await 上投入了大量資源的原因。 調用堆棧 調用堆棧是一個 LIFO（「後進先出」）隊列。 事件循環不斷檢查 調用堆棧 是否有需要運行的函數。 在此過程中，它將堆棧中找到的所有調用放入調用堆棧並按順序執行。 你可能熟悉調試器或瀏覽器控制台中的錯誤堆棧跟踪，瀏覽器會在堆棧中查找函數名以通知你當前調用的函數： 簡單的事件循環解釋 舉個例子： 我將使用 foo、bar 和 baz 作為隨機名稱。請輸入任意名稱以替換它們 const bar = () => console....

学习 JavaScript 函数参数的基础知识。 函数可以接受一个或多个参数。 const dosomething = () => { //做些事情 } const dosomethingElse = foo => { //做些事情 } const dosomethingElseAgain = (foo, bar) => { //做些事情 } 从 ES6/ES2015 开始，函数的参数可以有默认值： const dosomething = (foo = 1, bar = 'hey') => { //做些事情 } 这样你就可以在调用函数时不填充所有参数： dosomething(3) dosomething() ES2018 引入了参数的尾随逗号，这个特性有助于减少由于移动参数导致的缺少逗号而引起的 bug（例如，将最后一个参数移动到中间时）： const dosomething = (foo = 1, bar = 'hey',) => { //做些事情 } dosomething(2, 'ho!') 在最后一个参数后面加上逗号来调用函数也是可以的： dosomething(2, 'ho!',) 你可以将所有参数包装在数组中，并在调用函数时使用 扩展运算符：...

從整體概述到細節，學習如何使用函數 介紹 語法 參數 返回值 嵌套函數 物件方法 箭頭函數中的 this 立即呼叫函數表達式 (IIFE) 函數提升 介紹 JavaScript 中的所有內容都是在函數中執行的。 函數是一些自包含的代碼塊，可以定義一次但可以隨時運行。 函數可以選擇性地接受參數，並返回一個值。 JavaScript 中的函數屬於對象，是一種特殊類型的對象：函數對象。它們的超能力在於可以被調用。 此外，函數被稱為一等公民的函數，因為它們可以被賦值給一個值，可以作為引數傳遞和作為返回值使用。 語法 讓我們從之前的“舊”的，ES6/ES2015之前的語法開始。這是一個函數聲明的範例： function dosomething(foo) { // do something } (在 ES6/ES2015 後的語法中，稱之為常規函數) 函數也可以賦值給變量（稱為函數表達式）： const dosomething = function(foo) { // do something }; 有名函數表達式與此類似，但與堆棧調用跟踪更為配合，當發生錯誤時非常有用-它保持了函數的名稱： const dosomething = function dosomething(foo) { // do something }; ES6/ES2015 引入了箭頭函數，在處理內聯函數（作為參數或回調使用）時特別方便： const dosomething = foo => { // do something }; 箭頭函數與上面的其他函數定義有一個重要的區別，稍後我們會看到具體內容，因為這是一個進階話題。 參數 函數可以有一個或多個參數。 const dosomething = () => { // do something }; const dosomethingElse = foo => { // do something }; const dosomethingElseAgain = (foo, bar) => { // do something }; 從 ES6/ES2015 開始，函數的參數可以有默認值：...

JavaScript 中 filter() 函式的詳細資訊 filter() 是陣列中非常重要的一個方法。 以下是一個例子，它遍歷陣列 a，並根據每個 a 元素在執行函式 f() 時返回的 true 值，構建一個新的陣列 b。 const b = a.filter(f) 使用 filter() 的一個好例子是當你想從陣列中刪除一個項目時： const items = ['a', 'b', 'c', 'd', 'e', 'f'] const valueToRemove = 'c' const filteredItems = items.filter(item => item !== valueToRemove) // ["a", "b", "d", "e", "f"] 下面是如何同時刪除多個項目的方法： const items = ['a', 'b', 'c', 'd', 'e', 'f'] const valuesToRemove = ['c', 'd'] const filteredItems = items.filter(item => !valuesToRemove.includes(item)) // ["a", "b", "e", "f"]

JavaScript 中 reduce() 函式的詳細說明 reduce() 是陣列中另一個重要的方法。 reduce() 在陣列的每個項目上執行回呼函式，並允許逐步計算結果。如果指定了 initialValue，那麼在第一次迭代中，accumulator 將等於該值。 a.reduce((accumulator, currentValue, currentIndex, array) => { //... }, initialValue) 範例： [1, 2, 3, 4].reduce((accumulator, currentValue, currentIndex, array) => { return accumulator * currentValue }, 1) // 迭代 1：1 * 1 => 回傳 1 // 迭代 2：1 * 2 => 回傳 2 // 迭代 3：2 * 3 => 回傳 6 // 迭代 4：6 * 4 => 回傳 24 // 回傳值為 24

深入了解 JavaScript 的組成要素：Unicode、分號、空白、大小寫敏感性、註釋、面值和識別符以及保留字。 Unicode 分號 空白 大小寫敏感 註釋 面值和識別符 保留字 Unicode JavaScript 使用 Unicode 編寫。這意味著您可以使用表情符號作為變量名稱，但更重要的是，您可以使用任何語言編寫識別符，例如日語或中文，但需要遵守一些規則（詳見數學家 Mathias Bynens 的筆記）。 分號 JavaScript 具有非常類似 C 語言的語法，您可能會看到許多代碼示例在每行末尾都有分號。 分號不是必需的，JavaScript 不使用分號的代碼也沒有任何問題，最近許多開發人員，特別是那些不習慣使用分號的語言的開發人員，開始避免使用它們。 只需避免進行奇怪的操作，例如在多行上鍵入語句 return variable 或以括號（[ 或 (）開頭的行，99.9% 的情況下您是安全的（並且您的程式碼風格檢查工具會提醒您）。 是否使用分號取決於個人偏好，我最近已經決定從不添加無用的分號，因此在本站上您將永遠看不到它們。 空白 JavaScript 不會將空白視為重要字符。空格和換行可以按照任何方式添加，雖然從理論上講是這樣的。 實際上，您可能會保持良好定義的程式碼風格，並遵從人們通常使用的方式，並使用程式碼風格檢查工具或工具（例如 Prettier）來強制執行。 例如，我喜歡總是使用 2 個字符縮進。 大小寫敏感 JavaScript 是大小寫敏感的。變量 something 和 Something 是不同的。 對於任何識別符也是一樣。 註釋 JavaScript 中有兩種註釋方式： /\* \*/ // 第一種可以跨越多行，必須關閉。 第二種註釋掉當前行右側的所有內容。 面值和識別符 我們將編寫在源代碼中的值稱為面值，例如數字、字符串、布爾值，還有更高級的構造，例如對象字面量或數組字面量： 5 'Test' true ['a', 'b'] {color: 'red', shape: 'Rectangle'} 識別符是一個字符序列，用於識別變量、函數或對象。它可以以字母、美元符 $ 或下劃線 _ 開始，並可以包含數字。使用 Unicode，字母可以是任何允許的字符，例如表情符號 😄。...

JavaScript中一個強大的運算子是 空值合併 運算子: ??。 您是否曾經使用 || 來在變數為空或未定義時設置默認值？ 例如，像這樣： const myColor = color || 'red' 而現在，空值合併將取代其中的 ||： const myColor = color ?? 'red' 這個運算子有什麼用處呢？ 當使用 || 提供回退值時，實際上存在著一系列隱藏的錯誤。 簡單來說，|| 將值處理為假值，而 ?? 則將值處理為空值（因此得名）。 這意味著使用 ||，如果第一個操作數為 undefined、null、false、0、NaN 或 ''，則會對第二個操作數進行評估。 而??則只將此列表限制為undefined和 null。