JavaScript开发者的秘密武器：揭秘何时使用forEach而不是map

2023-02-16 10:28:04

JavaScript 中的循环方法：深入了解 forEach 和 map

在 JavaScript 中，循环方法是我们遍历数组或对象中元素的强大工具。通过本文，我们将深入探究两种最常见的循环方法：forEach 和 map。

forEach：遍历并执行

想象一下，你有一串数字，需要对其中的每一个数字进行平方计算。forEach 方法就像一位忠实的助手，它会遍历数组中的每个元素，对你来说执行平方计算。以下是如何使用 forEach：

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

上面的代码片段会打印出每个数字的平方，因为 forEach 对数组中的每个元素执行回调函数。回调函数可以接受一个参数，代表正在处理的元素。

map：遍历并转换

现在，假设你想对数组中的每个数字执行更复杂的转换，例如将它们转换为文本字符串。map 方法就是为此而生的。它不仅会遍历数组中的每个元素，还会执行回调函数，并将结果存储在一个新数组中。

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

上面的代码片段会返回一个包含文本数字的新数组，因为 map 方法将回调函数返回的值存储在一个新数组中。回调函数可以接受一个参数，代表正在处理的元素。

何时使用 forEach？

当你需要遍历数组或对象中的元素并对每个元素执行相同操作时。
当你不需要返回任何值时。

何时使用 map？

当你需要遍历数组或对象中的元素并返回一个包含所有新值的新数组或对象时。
当你需要对每个元素执行相同的操作时。

示例代码

为了进一步理解，让我们看一个实际的例子：

// 使用 forEach 遍历数组并打印每个元素
const fruits = ["apple", "banana", "cherry"];
fruits.forEach((fruit) => {
  console.log(`I like ${fruit}`);
});

// 使用 map 遍历数组并返回每个元素的大写形式
const uppercaseFruits = fruits.map((fruit) => {
  return fruit.toUpperCase();
});
console.log(uppercaseFruits);