JavaScript 陣列方法：`forEach`、`map`、`filter` 和 `reduce`

JavaScript 陣列方法：forEach、map、filter 和 reduce

JavaScript 提供了幾種強大的方法來處理陣列。這些方法（forEach、map、filter 和 reduce）可以讓您的程式碼更有效率且更易於閱讀。讓我們使用簡單的類比和範例來探索這些方法。

對於每個

比喻：玩盒子裡的每個玩具

想像一下你有一盒玩具，你想一個一個地玩每個玩具。您將每個玩具從盒子裡拿出來，玩一下，然後再放回去。

範例：

let toys = ['car', 'doll', 'ball'];

toys.forEach(toy => {
  console.log('Playing with', toy);
});

說明：
你看著盒子裡的每個玩具並玩它。

地圖

比喻：把每個玩具變成新的東西

假設你有一盒玩具，你想把每個玩具變成其他東西。例如，你把每輛車變成賽車，每個娃娃變成超級英雄，每個球變成籃球。

範例：

let toys = ['car', 'doll', 'ball'];

let newToys = toys.map(toy => {
  return toy + ' (new version)';
});

console.log(newToys);

說明：
您將每個玩具變成一個新版本，並將新玩具放入新盒子中。

篩選

比喻：只選某些玩具來玩

你有一盒玩具，但今天你只想玩紅色的玩具。所以，你翻遍了盒子，只取出了紅色玩具。

範例：

let toys = ['red car', 'blue doll', 'red ball'];

let redToys = toys.filter(toy => toy.includes('red'));

console.log(redToys);

說明：
您僅選擇符合特定條件的玩具（在本例中為紅色）。

減少

比喻：將所有玩具組合成一個巨​​型玩具

想像一下，您想透過將所有玩具組合在一起來創造一個大玩具。你把每個玩具都拿出來，然後把它一個一個地加到巨型玩具中。

範例：

let toys = ['car', 'doll', 'ball'];

let megaToy = toys.reduce((combinedToys, toy) => {
  return combinedToys + ' ' + toy;
}, '');

console.log(megaToy);

說明：
您從一個空的大型玩具開始，然後不斷向其中添加每個玩具，直到您擁有一個大玩具。

把它們放在一起

假設您有一盒不同的玩具，並且您想要：

1. 查看每個玩具，看看它是什麼（forEach）。
2. 將每個玩具變成新版本（地圖）。
3. 只選擇藍色的玩具（濾鏡）。
4. 將所有選定的玩具組合成一個巨​​型玩具（減少）。

let toys = ['blue car', 'red doll', 'blue ball'];

toys.forEach(toy => {
  console.log('Toy:', toy);
});

let newToys = toys.map(toy => {
  return toy + ' (new version)';
});

let blueToys = newToys.filter(toy => toy.includes('blue'));

let megaToy = blueToys.reduce((combinedToys, toy) => {
  return combinedToys + ' ' + toy;
}, '');

console.log(megaToy);

說明：

1. 看看每個玩具。
2. 將每個玩具更換為新版本。
3. 只選藍色玩具。
4. 將它們組合成一個大玩具。

---

進階選項和技術

對於每個

• 跳出 forEach： 你無法跳出 forEach 迴圈。如果您需要此功能，請考慮使用 for 迴圈或 for...of。
• 使用 thisArg： 您可以提供一個 thisArg 在回呼中用作 this 。

  toys.forEach(function(toy) {
    console.log(this.prefix + toy);
  }, { prefix: 'Toy: ' });

地圖

• 使用 thisArg: 與 forEach 類似，您可以提供一個 thisArg 在回呼中用作 this 。

  let newToys = toys.map(function(toy) {
    return this.prefix + toy;
  }, { prefix: 'New: ' });

• 傳回不同類型：map 可以傳回不同類型的陣列。

  let toyLengths = toys.map(toy => toy.length);

篩選

• 複雜條件：使用複雜條件進行過濾。

  let complexFilter = toys.filter(toy => toy.includes('blue') && toy.length > 4);

減少

• 初始值： 始終提供初始值以避免意外結果。

  let sum = [1, 2, 3].reduce((total, num) => total + num, 0);

• Reduce 為物件： 您可以使用reduce 來建立物件。

  let toyCounts = toys.reduce((counts, toy) => {
    counts[toy] = (counts[toy] || 0) + 1;
    return counts;
  }, {});

---

透過了解這些方法及其進階選項，您可以編寫更有效率、更易讀的 JavaScript 程式碼。快樂編碼！

以上是JavaScript 陣列方法：`forEach`、`map`、`filter` 和 `reduce`的詳細內容。更多資訊請關注PHP中文網其他相關文章！