JavaScript 的map 、 reduce和filter方法是處理數(shù)組的強(qiáng)大工具，能以簡(jiǎn)潔的代碼實(shí)現(xiàn)複雜操作。讓我們深入了解如何有效利用這些方法。

Array.map()

Array.map()方法根據(jù)提供的轉(zhuǎn)換函數(shù)更新數(shù)組中的每個(gè)值，並返回一個(gè)相同大小的新數(shù)組。它接受一個(gè)回調(diào)函數(shù)作為參數(shù)，用於應(yīng)用轉(zhuǎn)換。

 let newArray = oldArray.map((value, index, array) => {
  // ...轉(zhuǎn)換邏輯...
});

記憶技巧： MAP：逐個(gè)修改數(shù)組元素(Morph Array Piece-by-Piece) 。

map()方法適用於需要保留所有元素但需修改其值的情況，不同於filter()方法（可能刪除元素）或reduce()方法（計(jì)算單個(gè)結(jié)果）。 map()方法允許你逐個(gè)修改數(shù)組元素。示例：

 [1, 4, 6, 14, 32, 78].map(val => val * 10)
// 結(jié)果：[10, 40, 60, 140, 320, 780]

上述示例中，我們將原始數(shù)組[1, 4, 6, 14, 32, 78]中的每個(gè)值乘以10。結(jié)果是一個(gè)新數(shù)組，其每個(gè)值都是原始數(shù)組對(duì)應(yīng)值的轉(zhuǎn)換結(jié)果： [10, 40, 60, 140, 320, 780] 。

Array.filter()

Array.filter()方法用於從數(shù)組中篩選出滿(mǎn)足特定條件的元素，並返回一個(gè)包含這些元素的新數(shù)組。

它就像一個(gè)搜索過(guò)濾器，只保留滿(mǎn)足條件的元素。

例如，如果我們有一個(gè)數(shù)值數(shù)組，想要篩選出大於10 的值，可以這樣寫(xiě)：

 [1, 4, 6, 14, 32, 78].filter(val => val > 10)
// 結(jié)果：[14, 32, 78]

如果使用map()方法，則會(huì)返回與原始數(shù)組長(zhǎng)度相同的新數(shù)組，其中每個(gè)元素是根據(jù)條件轉(zhuǎn)換的結(jié)果（true 或false）。例如：

 [1, 4, 6, 14, 32, 78].map(val => val > 10)
// 結(jié)果：[false, false, false, true, true, true]

而filter()方法只返回值為true的元素。因此，結(jié)果數(shù)組的長(zhǎng)度可能小於或等於原始數(shù)組的長(zhǎng)度。

記憶技巧： filter()方法就像一個(gè)過(guò)濾器，一些元素會(huì)通過(guò)，一些會(huì)被過(guò)濾掉。

假設(shè)有一組四隻狗參加了服從訓(xùn)練課程，它們都面臨一些挑戰(zhàn)，並參加了期末考試。我們可以用一個(gè)對(duì)像數(shù)組來(lái)表示這些狗：

 const students = [
  { name: "Boops", finalGrade: 80 },
  { name: "Kitten", finalGrade: 45 },
  { name: "Taco", finalGrade: 100 },
  { name: "Lucy", finalGrade: 60 }
];

如果狗狗的期末考試成績(jī)高於70 分，則獲得證書(shū)；否則需要重修課程。為了知道需要打印多少?gòu)堊C書(shū)，我們需要編寫(xiě)一個(gè)方法來(lái)返回及格的狗狗。我們可以使用filter()方法簡(jiǎn)化代碼：

 const passingDogs = students.filter(student => student.finalGrade >= 70);

/*
passingDogs = [
  { name: "Boops", finalGrade: 80 },
  { name: "Taco", finalGrade: 100 }
];
*/

Boops 和Taco 通過(guò)了考試，將獲得證書(shū)！

Array.reduce()

reduce()方法將數(shù)組中的所有值縮減為單個(gè)值。它接受一個(gè)回調(diào)函數(shù)，該函數(shù)包含累加器（累積數(shù)組中每個(gè)元素的值）、當(dāng)前值和索引。它還可以接受一個(gè)初始值作為第二個(gè)參數(shù)：

 let finalVal = oldArray.reduce((accumulator, currentValue, currentIndex, array) => {
  // ...累積邏輯...
}, initialValue);

讓我們創(chuàng)建一個(gè)烹飪函數(shù)和一個(gè)配料列表：

 // 配料列表const ingredients = ['wine', 'tomato', 'onion', 'mushroom'];

// 烹飪函數(shù)const cook = (ingredient) => `cooked ${ingredient}`;

如果要將這些配料製作成醬汁，可以使用reduce()方法：

 const wineReduction = ingredients.reduce((sauce, item) => {
  return sauce = cook(item) ', ';
}, '');

// wineReduction = "cooked wine, cooked tomato, cooked onion, cooked mushroom, "

初始值（此處為''）很重要，如果沒(méi)有它，第一個(gè)元素將不會(huì)被處理。

為了避免末尾多餘的空格，我們可以使用索引和數(shù)組來(lái)應(yīng)用轉(zhuǎn)換：

 const wineReduction = ingredients.reduce((sauce, item, index, array) => {
  sauce = cook(item);
  if (index <p>記憶技巧： <code>reduce()</code>方法就像製作醬汁一樣，將多個(gè)配料減少成一個(gè)單一結(jié)果。</p>

以上是插圖（和音樂(lè)）指南的映射，減少和過(guò)濾數(shù)組方法的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！