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