ES6数组如何修改每个元素

在JavaScript的ES6（ECMAScript 2015）中，数组操作变得更加简洁和强大。ES6引入了许多新的数组方法，使得我们可以更方便地修改数组中的每个元素。本文将介绍如何使用ES6中的数组方法来修改数组中的每个元素。

1. 使用map方法

map方法是ES6中最常用的数组方法之一，它允许我们对数组中的每个元素进行操作，并返回一个新的数组。map方法不会修改原始数组，而是返回一个新的数组。

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

const doubledNumbers = numbers.map(num => num * 2);

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

在上面的例子中，我们使用map方法将数组中的每个元素都乘以2，并返回一个新的数组doubledNumbers。

2. 使用forEach方法

forEach方法用于遍历数组中的每个元素，并对每个元素执行指定的操作。与map方法不同，forEach方法不会返回新的数组，而是直接在原数组上进行操作。

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

numbers.forEach((num, index, array) => {
  array[index] = num * 2;
});

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

在这个例子中，我们使用forEach方法将数组中的每个元素都乘以2，并直接修改了原数组numbers。

3. 使用for...of循环

for...of循环是ES6中引入的一种新的循环语法，它可以遍历数组中的每个元素。与forEach方法类似，for...of循环也可以直接修改数组中的元素。

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

for (let num of numbers) {
  num = num * 2;
}

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

需要注意的是，for...of循环中的num是数组元素的副本，直接修改num并不会影响原数组。因此，上面的代码并没有修改原数组。要修改原数组，我们需要通过索引来访问数组元素：

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

for (let i = 0; i < numbers.length; i++) {
  numbers[i] = numbers[i] * 2;
}

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

4. 使用reduce方法

reduce方法也可以用于修改数组中的每个元素，尽管它的主要用途是将数组缩减为单个值。通过reduce方法，我们可以对数组中的每个元素进行操作，并将结果累积到一个新的数组中。

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

const doubledNumbers = numbers.reduce((acc, num) => {
  acc.push(num * 2);
  return acc;
}, []);

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

在这个例子中，我们使用reduce方法将数组中的每个元素都乘以2，并将结果累积到一个新的数组doubledNumbers中。

5. 使用Array.from方法

Array.from方法可以将类数组对象或可迭代对象转换为数组。我们还可以通过传递一个映射函数来修改数组中的每个元素。

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

const doubledNumbers = Array.from(numbers, num => num * 2);

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

在这个例子中，我们使用Array.from方法将数组中的每个元素都乘以2，并返回一个新的数组doubledNumbers。

总结

ES6提供了多种方法来修改数组中的每个元素。map方法是最常用的方法，它返回一个新的数组而不修改原数组。forEach方法可以直接修改原数组，而for...of循环和reduce方法也可以实现类似的功能。Array.from方法则提供了一种将类数组对象转换为数组并同时修改元素的方式。

根据具体的需求，我们可以选择合适的方法来修改数组中的每个元素。