利用js数组函数遍历时，map 和 forEach，傻傻分不清？可以看看这篇科普！

javascript中的map和forEach都是从es5才开始出现的，本文将会详细讨论它们之间的区别以及如何使用它们。

map

map函数接收两个参数：

• callback 函数：这是在map执行后触发的函数。
• 上下文变量：这是执行callback时使用的变量。

map函数的作用是返回一个新数组，新数组的每个元素都是通过对原数组的每个元素调用callback函数后得到的。

举个例子，以下代码使用map函数来将一个数组中的所有数字增加一倍：

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

forEach

forEach函数接收一个参数：

• callback 函数：这是在forEach执行后触发的函数。

forEach函数的作用是遍历原数组中的每个元素，并对每个元素调用callback函数。

举个例子，以下代码使用forEach函数来打印出数组中所有的数字：

const numbers = [1, 2, 3, 4, 5];
numbers.forEach((number) => console.log(number));
// 输出：
// 1
// 2
// 3
// 4
// 5

map 和 forEach 的区别

map和forEach的主要区别在于：

• map返回一个新数组，而forEach不返回任何值。
• map可以在新数组中修改每个元素，而forEach只能遍历数组中的元素。

如何使用map和forEach

map和forEach都是非常有用的数组函数。map可以用来创建新数组，而forEach可以用来遍历数组中的元素。

以下是一些使用map和forEach的例子：

• 使用map来将数组中的所有数字增加一倍：

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

• 使用forEach来打印出数组中所有的数字：

const numbers = [1, 2, 3, 4, 5];
numbers.forEach((number) => console.log(number));
// 输出：
// 1
// 2
// 3
// 4
// 5

• 使用map来创建数组中每个元素的平方：

const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map((number) => number * number);
console.log(squaredNumbers); // 输出：[1, 4, 9, 16, 25]

• 使用forEach来将数组中的所有数字加在一起：

const numbers = [1, 2, 3, 4, 5];
let sum = 0;
numbers.forEach((number) => sum += number);
console.log(sum); // 输出：15

我希望这篇文章对您有所帮助！如果您有任何问题，请随时提问。