插图（和音乐）指南的映射，减少和过滤数组方法

JavaScript 的 map、reduce 和 filter 方法是处理数组的强大工具，能以简洁的代码实现复杂操作。让我们深入了解如何有效利用这些方法。

Array.map()

Array.map() 方法根据提供的转换函数更新数组中的每个值，并返回一个相同大小的新数组。它接受一个回调函数作为参数，用于应用转换。

let newArray = oldArray.map((value, index, array) => {
  // ...转换逻辑...
});

记忆技巧：MAP：逐个修改数组元素 (Morph Array Piece-by-Piece)。

map() 方法适用于需要保留所有元素但需修改其值的情况，不同于 filter() 方法（可能删除元素）或 reduce() 方法（计算单个结果）。map() 方法允许你逐个修改数组元素。示例：

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

上述示例中，我们将原始数组 [1, 4, 6, 14, 32, 78] 中的每个值乘以 10。结果是一个新数组，其每个值都是原始数组对应值的转换结果：[10, 40, 60, 140, 320, 780]。

Array.filter()

Array.filter() 方法用于从数组中筛选出满足特定条件的元素，并返回一个包含这些元素的新数组。

它就像一个搜索过滤器，只保留满足条件的元素。

例如，如果我们有一个数值数组，想要筛选出大于 10 的值，可以这样写：

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

如果使用 map() 方法，则会返回与原始数组长度相同的新数组，其中每个元素是根据条件转换的结果（true 或 false）。例如：

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

而 filter() 方法只返回值为 true 的元素。因此，结果数组的长度可能小于或等于原始数组的长度。

记忆技巧：filter() 方法就像一个过滤器，一些元素会通过，一些会被过滤掉。

假设有一组四只狗参加了服从训练课程，它们都面临一些挑战，并参加了期末考试。我们可以用一个对象数组来表示这些狗：

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

如果狗狗的期末考试成绩高于 70 分，则获得证书；否则需要重修课程。为了知道需要打印多少张证书，我们需要编写一个方法来返回及格的狗狗。我们可以使用 filter() 方法简化代码：

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

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

Boops 和 Taco 通过了考试，将获得证书！

Array.reduce()

reduce() 方法将数组中的所有值缩减为单个值。它接受一个回调函数，该函数包含累加器（累积数组中每个元素的值）、当前值和索引。它还可以接受一个初始值作为第二个参数：

let finalVal = oldArray.reduce((accumulator, currentValue, currentIndex, array) => {
  // ...累积逻辑...
}, initialValue);

让我们创建一个烹饪函数和一个配料列表：

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

// 烹饪函数
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, "

初始值（此处为 ''）很重要，如果没有它，第一个元素将不会被处理。

为了避免末尾多余的空格，我们可以使用索引和数组来应用转换：

const wineReduction = ingredients.reduce((sauce, item, index, array) => {
  sauce  = cook(item);
  if (index 
<p>记忆技巧：<code>reduce()</code> 方法就像制作酱汁一样，将多个配料减少成一个单一结果。</p>

以上是插图（和音乐）指南的映射，减少和过滤数组方法的详细内容。更多信息请关注PHP中文网其他相关文章！