在前端开发中，经常需要对数组进行某些操作，比如遍历、筛选、映射和归纳等。ECMAScript 2021（简称ES2021）引入了一些新的特性，使得处理数组的操作更加简洁、易读和高效。其中，四个最常用的方法是 forEach()、map()、filter()、reduce()，这篇文章将介绍它们的用法和实例。
forEach()
forEach() 方法用于遍历数组，对每个元素执行指定的操作。它没有返回值，仅仅是对数组元素进行操作。forEach() 方法的基本语法如下：
array.forEach(function(item, index, arr) {
// 执行指定的操作
});其中，item 表示数组中的元素，index 表示元素的索引，arr 表示数组本身。下面是一个简单的例子：
const arr = [1, 2, 3, 4, 5];
arr.forEach(function(item, index, arr) {
console.log(item); // 依次输出 1, 2, 3, 4, 5
});可以看到，forEach() 方法遍历数组的元素，对每个元素都执行一次指定的操作，这里是输出元素的值。
map()
map() 方法用于对数组中的元素进行映射，生成一个新的数组。它将原数组中的每个元素都用指定的函数处理后，生成一个新的数组，与原数组一一对应。map() 方法的基本语法如下：
const newArray = array.map(function(item, index, arr) {
return // 处理后的元素
});其中，item、index 和 arr 含义同 forEach() 方法。map() 方法的返回值是一个新的数组，该数组中的每个元素都是原数组中相应位置元素经过处理后的值。下面是一个例子：
const arr = [1, 2, 3, 4, 5];
const newArray = arr.map(function(item, index, arr) {
return item * 2;
});
console.log(newArray); // 输出 [2, 4, 6, 8, 10]可以看到，map() 方法对原数组中的每个元素都执行一次指定的操作，生成一个新的数组，其中每个元素是原数组相应位置的元素经过乘以 2 的操作得到的结果。
filter()
filter() 方法用于对数组中的元素进行筛选，生成一个新的数组。它将原数组中的每个元素都用指定的函数处理后，返回值为 true 的元素被集成到新的数组中，返回值为 false 的元素被过滤掉。filter() 方法的基本语法如下：
const newArray = array.filter(function(item, index, arr) {
return // 返回 true 或 false
});其中，item、index 和 arr 含义同 forEach() 方法。filter() 方法的返回值是一个新的数组，该数组由原数组中符合条件的元素组成。下面是一个例子：
const arr = [1, 2, 3, 4, 5];
const newArray = arr.filter(function(item, index, arr) {
return item % 2 == 0;
});
console.log(newArray); // 输出 [2, 4]可以看到，filter() 方法按照指定的条件筛选原数组中的元素，生成一个新的数组，其中只有符合条件的元素（即偶数）被集成到新的数组中，奇数元素被过滤掉。
reduce()
reduce() 方法用于对数组中的元素进行归纳，生成一个新的值。它从数组的第一个元素开始，执行指定的函数，将前一个执行结果作为后一个元素的处理参数，直到遍历完整个数组，返回一个最终的值。reduce() 方法的基本语法如下：
const result = array.reduce(function(previousValue, currentValue, currentIndex, arr) {
return // 归纳后的结果
}, initialValue);其中，previousValue 表示前一个元素的处理结果，currentValue 表示当前元素的值，currentIndex 表示当前元素的索引，arr 表示数组本身。initialValue 是一个可选参数，用于指定归纳的初始值。reduce() 方法的返回值是一个最终的结果值。下面是一个例子：
const arr = [1, 2, 3, 4, 5];
const result = arr.reduce(function(previousValue, currentValue, currentIndex, arr) {
return previousValue + currentValue;
}, 0);
console.log(result); // 输出 15可以看到，reduce() 方法从数组的第一个元素开始，依次处理每个元素，将前一个元素的处理结果作为后一个元素的处理参数，最终生成一个累加的结果（即原数组中所有元素的总和）。
总结与思考
本文介绍了 ECMAScript 2021 中四个常用的数组处理方法：forEach()、map()、filter()、reduce()，并提供了相应的代码示例。这些新的特性使得前端开发中操作数组更加简洁、易读和高效。在实际开发中，可以根据具体的需求和场景选择合适的方法，灵活运用这些方法来处理数组。
另外，我们需要注意在使用这些方法时，要确保处理函数不会修改原数组的元素，否则可能会影响其他操作。同时，也要注意考虑这些方法的性能，有时候使用循环等简单的方法可能比使用这些高阶函数更加高效。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65409bb57d4982a6eba1f34f