一分钟弄清JavaScript的map()和forEach()：用正确的方法遍历数组

2024-01-20 15:34:37

JavaScript的map()和forEach()：遍历数组的两种方式

在JavaScript中，map()和forEach()都是用于遍历数组的常用方法，它们可以帮助我们处理数组中的每个元素。但是，这两种方法在使用上有细微的差别，理解这些差别可以帮助我们更好地选择合适的方法来处理数组。

map()方法

map()方法返回一个新数组，新数组的每个元素都是原数组中相应元素经过某个函数处理后的结果。换句话说，map()方法将原数组的每个元素作为参数传入函数，然后将函数的返回值作为新数组的元素。

语法：

const newArray = array.map((element, index, array) => {
  // 对元素进行处理，返回新的元素
});

参数：

element：当前正在处理的数组元素。
index：当前元素在数组中的索引。
array：正在遍历的数组。

返回值：

一个新数组，其中包含原数组的每个元素经过函数处理后的结果。

示例：

const numbers = [1, 2, 3, 4, 5];

// 使用map()方法将数组中的每个元素乘以2
const doubledNumbers = numbers.map((number) => {
  return number * 2;
});

console.log(doubledNumbers); // 输出：[2, 4, 6, 8, 10]

forEach()方法

forEach()方法遍历数组中的每个元素，并对每个元素执行某个函数。但是，forEach()方法不会返回任何值，它只是对数组中的每个元素进行操作。

语法：

array.forEach((element, index, array) => {
  // 对元素进行操作
});

参数：

element：当前正在处理的数组元素。
index：当前元素在数组中的索引。
array：正在遍历的数组。

返回值：

无。

示例：

const numbers = [1, 2, 3, 4, 5];

// 使用forEach()方法将数组中的每个元素加1
numbers.forEach((number) => {
  number++;
});

console.log(numbers); // 输出：[2, 3, 4, 5, 6]