在前端开发中，数组是一种常用的数据结构。在 ECMAScript 6 中，引入了一些新的数组迭代方法，如 map、filter、reduce 等，使得我们在处理数组时更加方便和高效。而在 ECMAScript 2017 中，又新增了一些新的数组迭代方法，如 includes、find、findIndex 等。本文将对这些数组迭代方法进行详细比较，以便我们更好地选择合适的方法来处理数组。
ECMAScript 6 中的数组迭代方法
forEach
forEach 方法用于遍历数组，可以对每个元素执行一次指定的操作。它的语法如下：
array.forEach(callback(currentValue[, index[, array]])[, thisArg])
其中，callback 是要执行的函数，currentValue 表示当前元素的值，index 表示当前元素的索引，array 表示当前数组。thisArg 是可选的，表示执行 callback 时的 this 值。
示例代码：
-- -------------------- ---- ------- ----- --- - --- -- --- ------------------- ------ -- - -------------------------- - ----------- --- -- ------- -- ------ - - -- ------ - - -- ------ - -
map
map 方法用于对数组中的每个元素执行指定的操作，并返回一个新的数组。它的语法如下：
const newArray = array.map(callback(currentValue[, index[, array]])[, thisArg])
其中，callback 的参数与 forEach 相同，thisArg 也是可选的。
示例代码：
const arr = [1, 2, 3];
const newArr = arr.map((value) => {
return value * 2;
});
console.log(newArr); // output: [2, 4, 6]filter
filter 方法用于对数组中的每个元素执行指定的测试，并返回符合条件的元素组成的新数组。它的语法如下：
const newArray = array.filter(callback(currentValue[, index[, array]])[, thisArg])
其中，callback 的参数与 forEach 相同，thisArg 也是可选的。
示例代码：
const arr = [1, 2, 3];
const newArr = arr.filter((value) => {
return value > 1;
});
console.log(newArr); // output: [2, 3]reduce
reduce 方法用于对数组中的每个元素执行指定的累加器函数，并返回累加的结果。它的语法如下：
const result = array.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])
其中，callback 的参数包括累加器 accumulator、当前元素 currentValue、索引 index 和数组 array，initialValue 是可选的，表示累加器的初始值。
示例代码：
const arr = [1, 2, 3];
const sum = arr.reduce((accumulator, currentValue) => {
return accumulator + currentValue;
}, 0);
console.log(sum); // output: 6ECMAScript 2017 中的数组迭代方法
includes
includes 方法用于判断数组中是否包含指定的元素。它的语法如下：
const result = array.includes(searchElement[, fromIndex])
其中，searchElement 表示要查找的元素，fromIndex 是可选的，表示从哪个索引开始查找。
示例代码：
const arr = [1, 2, 3]; console.log(arr.includes(2)); // output: true console.log(arr.includes(4)); // output: false
find
find 方法用于返回数组中符合条件的第一个元素。它的语法如下：
const result = array.find(callback(currentValue[, index[, array]])[, thisArg])
其中，callback 的参数与 filter 相同，thisArg 也是可选的。
示例代码：
const arr = [1, 2, 3];
const result = arr.find((value) => {
return value > 1;
});
console.log(result); // output: 2findIndex
findIndex 方法用于返回数组中符合条件的第一个元素的索引。它的语法如下：
const result = array.findIndex(callback(currentValue[, index[, array]])[, thisArg])
其中，callback 的参数与 filter 相同，thisArg 也是可选的。
示例代码：
const arr = [1, 2, 3];
const index = arr.findIndex((value) => {
return value > 1;
});
console.log(index); // output: 1比较与总结
在 ECMAScript 6 中，forEach、map、filter 和 reduce 四个方法是比较常用的。它们的区别在于：
forEach：遍历数组，对每个元素执行指定的操作，无返回值。map：遍历数组，对每个元素执行指定的操作，并返回一个新的数组。filter：遍历数组，对每个元素执行指定的测试，返回符合条件的元素组成的新数组。reduce：遍历数组，对每个元素执行指定的累加器函数，返回累加的结果。
在 ECMAScript 2017 中，includes、find 和 findIndex 三个方法是新增的。它们的区别在于：
includes：判断数组中是否包含指定的元素，返回布尔值。find：返回数组中符合条件的第一个元素，无符合条件的元素则返回undefined。findIndex：返回数组中符合条件的第一个元素的索引，无符合条件的元素则返回-1。
需要注意的是，find 和 findIndex 只会返回符合条件的第一个元素或索引，如果数组中有多个符合条件的元素，则只返回第一个。
综上所述，我们需要根据具体的需求来选择合适的数组迭代方法。在处理数组时，使用这些方法可以让我们的代码更加简洁、高效。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/650d213695b1f8cacd6dbed2