为什么我放弃了 forEach，而选择了 map

前端

2024-01-13 12:39:48

探索 map() 和 forEach()：JavaScript 遍历数组的利器

在 JavaScript 中，遍历数组是日常任务。而 map() 和 forEach() 这两位实力干将应运而生，为开发者提供了两种高效的方法。本文将深入探讨 map() 和 forEach() 的异同，助你做出明智的抉择。

初识 map() 和 forEach()

map() 和 forEach() 均是数组遍历方法，但它们的目标截然不同。

map()： 旨在创建新数组，其元素是对原数组元素应用特定操作后的结果。
forEach()： 只对原数组中的每个元素执行给定的操作，不会产生新数组。

map()：强大的变换工具

map() 最适合需要对数组元素进行变换或处理的情况。其本质在于将原数组中的每个元素映射为新数组中的对应元素。比如，将数组中的数字乘以 2，或将字符串转换为大写。

示例：

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map((number) => number * 2);
console.log(doubledNumbers); // [2, 4, 6, 8, 10]

const strings = ["apple", "banana", "cherry"];
const capitalizedStrings = strings.map((string) => string.toUpperCase());
console.log(capitalizedStrings); // ["APPLE", "BANANA", "CHERRY"]

forEach()：专注于操作

forEach() 侧重于对数组元素执行特定操作。与 map() 不同，它不创建新数组，而是对原数组中的每个元素直接进行操作。这使得它非常适合需要对数组元素进行修改或输出的情况。

示例：

const numbers = [1, 2, 3, 4, 5];
numbers.forEach((number) => {
  console.log(number);
});

const strings = ["apple", "banana", "cherry"];
strings.forEach((string) => {
  string += " pie";
});
console.log(strings); // ["apple pie", "banana pie", "cherry pie"]