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中文网其他相关文章！