每個初學者都應該知道的基本 JavaScript 方法

JavaScript 就像程式設計中的瑞士軍刀 - 它用途廣泛、必不可少，並且包含您不知道自己需要的工具。但作為初學者，很容易陷入循環並被長而重複的程式碼淹沒。想像嘗試在雜亂的工具箱中手動搜尋項目 - 乏味，對吧？

這就是 JavaScript 方法的用武之地。這些內建工具可讓您輕鬆操作陣列、過濾資料和簡化複雜的任務。將它們視為節省您時間和精力的捷徑，將雜亂的程式碼變成乾淨且有效率的程式碼。

在本文中，我們將探討五個基本的 JavaScript 方法：map()、filter()、reduce()、forEach() 和 find()。掌握這些將使您的程式碼更清晰、更快並且編寫起來更有趣。

“程式設計不是你所知道的；而是你所知道的。這是關於你能弄清楚什麼。” – 克里斯·派恩。

1.map()——轉換數組

它的作用：
將 map() 視為一個個人助理，它接受待辦事項列表，為每個項目執行任務，然後為您提供一個包含結果的新列表。它非常適合在不觸及原始資料的情況下轉換資料。

想像一下您有一堆空白 T 卹，您想在所有這些 T 恤上列印設計。您無需更改原始堆疊，而是使用應用程式的設計建立一個新堆疊。這就是 map() 的工作原理——它將一個函數應用於每個專案並為您提供一個新陣列。

範例：
以下是如何使用 map() 將數組中的每個數字加倍：

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // Output: [2, 4, 6, 8]

細分：

• number：原始數組保持不變。
• num * 2：應用於每個元素的函數。
• doubled：具有轉換值的新陣列。

實際用例：
假設您有一個以美元表示的產品價格列表，並且您想將它們轉換為另一種貨幣。使用map()，可以一步完成轉換。

const pricesInUSD = [10, 20, 30];
const pricesInEUR = pricesInUSD.map(price => price * 0.85);
console.log(pricesInEUR); // Output: [8.5, 17, 25.5]

為什麼有用：
map() 可以幫助您避免重複的任務並保持程式碼整潔。此方法不使用循環來操作數組，而是為您完成繁重的工作。

永遠記住map()建立一個新陣列。如果您希望就地修改數據，那麼這不是適合該工作的工具。

2.filter()－選擇特定項目

它的作用：
filter() 建立一個僅包含滿足特定條件的元素的新陣列。可以把它想像成俱樂部的保鏢，只讓符合條件的人進入。

想像一下，您正在整理衣櫃，只留下最適合您的衣服。 filter() 可以幫助您只選擇您需要的內容，而忽略其餘的內容 - 簡單而有效率。

範例：
讓我們從陣列中過濾掉偶數：

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // Output: [2, 4, 6, 8]

細分：

• number：原始數組保持不變。
• 條件： num % 2 !== 0 檢查數字是否為奇數。
• 結果： 使用過濾後的值建立一個新陣列 oddNumbers。

實際用例：
假設您正在管理產品列表，並且您想要過濾掉缺貨的商品。

const pricesInUSD = [10, 20, 30];
const pricesInEUR = pricesInUSD.map(price => price * 0.85);
console.log(pricesInEUR); // Output: [8.5, 17, 25.5]

何時使用：

• 僅從資料集中擷取相關資料。
• 只處理您需要的內容，從而簡化流程。

為什麼初學者喜歡它：
與迴圈不同，filter() 很簡單。它減少了出錯的機會，您可以用更少的程式碼實現更多目標。

3.reduce()——聚合數據

假設，您在雜貨店收銀台，收銀員正在將所有商品的價格相加，得出總價。這正是 reduce() 的工作原理 - 它將數組中的所有元素組合成一個值，例如總和、乘積或任何自訂結果。

它的作用：
reduce() 逐個元素處理數組，並根據您定義的函數將其縮減為單一輸出值。

範例：
讓我們計算一個陣列的總和：

const numbers = [1, 2, 3, 4, 5];
const oddNumbers = numbers.filter(num => num % 2 !== 0);
console.log(oddNumbers); // Output: [1, 3, 5]

細分：

• 累加器：追蹤正在進行的總計（從 0 開始）。
• currentValue：指正在處理的陣列中的目前項。
• 結果：將所有數字合併為一個總和。

實際用例：
假設您正在建立一個線上購物車。您需要計算使用者選擇的所有商品的總成本。

const products = [
  { name: 'Laptop', inStock: true },
  { name: 'Phone', inStock: false },
  { name: 'Tablet', inStock: true }
];

const availableProducts = products.filter(product => product.inStock);
console.log(availableProducts);
// Output: [{ name: 'Laptop', inStock: true }, { name: 'Tablet', inStock: true }]

為什麼特別：
reduce() 不僅適用於數字，您還可以用它來：

• 組合字串。
• 展平數組。
• 動態建構物件。

有趣的轉折：
讓我們發揮創意吧！您可以使用reduce()來計算每個字母在單字中出現的次數：

const numbers = [5, 10, 15, 20];
const total = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(total); // Output: 50

為什麼初學者應該學習它：
雖然reduce()一開始可能感覺有點高級，但掌握它可以為簡化複雜操作帶來無限的可能性。陣法就像瑞士軍刀，用途廣泛，威力強大。

“先解決問題。然後，寫代碼。” – 約翰·約翰遜。
使用reduce()，您可以使用優雅、最少的程式碼有效地解決問題。

4. forEach()－陣列的友善主力

讓我們設定場景：
將自己想像成廚房裡的廚師，正在準備幾道菜。您檢查清單中的每種成分，並根據需要切碎、切丁或調味。您不會更改成分列表本身 - 您只是對每個項目執行一個操作。這正是 forEach() 所做的。

它的作用：
forEach() 允許您循環遍歷數組並為每個元素執行一個函數。與map()或filter()不同，它不傳回新陣列－它只是執行操作。

範例：
讓我們列印清單中的每個水果：

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // Output: [2, 4, 6, 8]

這裡發生了什麼事：

• 輸入： 水果陣列。
• 操作： 此函數會為每種水果記錄個人化訊息。
• 結果： 沒有建立新陣列 - 它只是執行操作。

實際用例：
假設您正在管理任務清單並希望將它們記錄為「已完成」：

const pricesInUSD = [10, 20, 30];
const pricesInEUR = pricesInUSD.map(price => price * 0.85);
console.log(pricesInEUR); // Output: [8.5, 17, 25.5]

為什麼它與其他方法不同：
與建立新陣列的 map() 不同，forEach() 僅關注副作用 - 不產生直接結果但修改陣列外部的內容或與陣列外部的內容互動的操作。

例如：

• 為清單中的每個項目發送 API 請求。
• 更新元素清單的 DOM。
• 將數值記錄到控制台。

何時使用：

• 以下情況使用 forEach()：
• 您只想迭代一個陣列。
• 您需要執行操作而不需要新陣列。

初學者要注意什麼：
由於 forEach() 不傳回任何內容，因此它不適合連結操作。如果您需要轉換後的數組，請堅持使用map()或filter()。

創意範例：
讓我們向清單中的每個客戶發送一封感謝電子郵件（只是模擬）：

const numbers = [1, 2, 3, 4, 5];
const oddNumbers = numbers.filter(num => num % 2 !== 0);
console.log(oddNumbers); // Output: [1, 3, 5]

為什麼初學者喜歡它：
forEach() 簡單直覺。這是學習如何有效使用陣列的第一步。

記住這一點：「程式碼簡單不是沒有複雜性，而是掌握複雜性的藝術。」
forEach() 是您第一個以簡單方式處理複雜性的工具。

5. find() – 發現第一個匹配項

你正在拿著地圖尋寶，線索說：「找到森林裡的第一枚金幣。」你開始尋找，但當你發現第一枚硬幣在樹下閃閃發光時，你就停下來了。你已經找到了你需要的東西，其餘的硬幣並不重要。這正是 find() 的工作原理——它幫助您找到數組中與您的條件匹配的第一個項目，並停止查找該項目。

它的作用：
find() 掃描數組並傳回滿足函數中條件的第一個元素。如果未找到符合項，則傳回未定義。

程式碼範例：
讓我們找出第一個大於 20 的數字：

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // Output: [2, 4, 6, 8]

發生了什麼事：

• 條件數>每個元素檢查 20。
• 一旦 25 滿足條件，搜尋停止，回傳 25。
• 第一次匹配後不再檢查任何元素。

將 find() 想像成一次尋寶遊戲，你被告知「找到第一朵紅花」。你不會收集每一朵紅花（這就是 filter() 所做的）。相反，你一看到一個就停下來大喊：「明白了！」

實際用例：
假設您正在管理聯絡人列表，並且想要尋找具有特定電子郵件地址的第一個人。

const pricesInUSD = [10, 20, 30];
const pricesInEUR = pricesInUSD.map(price => price * 0.85);
console.log(pricesInEUR); // Output: [8.5, 17, 25.5]

為什麼初學者喜歡它：
find() 使用簡單，當您只需要一個結果時可以節省時間。這就像在黑暗的房間裡用手電筒尋找單個物體一樣——它不會試圖照亮整個房間。

創意範例：
讓我們把它帶到電子商務的世界。假設您有一個產品列表，並且您想找到第一個正在促銷的產品。

const numbers = [1, 2, 3, 4, 5];
const oddNumbers = numbers.filter(num => num % 2 !== 0);
console.log(oddNumbers); // Output: [1, 3, 5]

處理邊緣情況：
如果沒有商品符合您的條件怎麼辦？不用擔心，find() 將傳回未定義的結果。您可以透過後備方式優雅地處理這個問題：

const products = [
  { name: 'Laptop', inStock: true },
  { name: 'Phone', inStock: false },
  { name: 'Tablet', inStock: true }
];

const availableProducts = products.filter(product => product.inStock);
console.log(availableProducts);
// Output: [{ name: 'Laptop', inStock: true }, { name: 'Tablet', inStock: true }]

為什麼 find() 這麼強：

• 效率：一旦找到第一個匹配就停止。
• 清晰度：使程式碼中的意圖清晰 - 搜尋單一項目。
• 實際使用：非常適合在大型資料集中定位單一使用者、產品或資料點。

結論

JavaScript 是一個強大的工具，這五個方法——map()、filter()、reduce()、forEach() 和 find()——是釋放其真正潛力的關鍵。它們可以幫助您編寫更乾淨、更有效率的程式碼，同時使您免於無休止的循環和冗餘任務。將它們視為開發人員工具箱中的瑞士軍刀：多功能、可靠，旨在讓您的生活更輕鬆。

掌握這些方法不只是學習文法，而是像程式設計師一樣思考。無論您是使用map() 轉換資料、使用filter() 濾除雜訊、使用reduce() 求和、使用forEach() 無縫迭代，還是使用find() 尋找隱藏的寶石，您都在建立技能將使您的程式碼更加專業和有影響力。

請記住，編碼的魔力並不在於編寫又長又複雜的程序，而是為日常問題找到優雅的解決方案。從小事做起：選擇一種方法，進行試驗，然後在下一個專案中嘗試。你練習得越多，這些方法就越像是你的第二天性。

「最好的程式碼是你不需要解釋的程式碼。」– 馬丁·福勒
使用這些方法來編寫不言而喻的程式碼。

請在評論中告訴我你的想法！您在專案中使用過這些方法嗎？我很想聽聽你的經驗。

本文原刊於 Hashnode

以上是每個初學者都應該知道的基本 JavaScript 方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！