在前端开发中,数组是一种常用的数据结构。在 ECMAScript 6 中,引入了一些新的数组迭代方法,如 map
、filter
、reduce
等,使得我们在处理数组时更加方便和高效。而在 ECMAScript 2017 中,又新增了一些新的数组迭代方法,如 includes
、find
、findIndex
等。本文将对这些数组迭代方法进行详细比较,以便我们更好地选择合适的方法来处理数组。
ECMAScript 6 中的数组迭代方法
forEach
forEach
方法用于遍历数组,可以对每个元素执行一次指定的操作。它的语法如下:
------------------------------------- ------- ---------- ---------
其中,callback
是要执行的函数,currentValue
表示当前元素的值,index
表示当前元素的索引,array
表示当前数组。thisArg
是可选的,表示执行 callback
时的 this
值。
示例代码:
----- --- - --- -- --- ------------------- ------ -- - -------------------------- - ----------- --- -- ------- -- ------ - - -- ------ - - -- ------ - -
map
map
方法用于对数组中的每个元素执行指定的操作,并返回一个新的数组。它的语法如下:
----- -------- - --------------------------------- ------- ---------- ---------
其中,callback
的参数与 forEach
相同,thisArg
也是可选的。
示例代码:
----- --- - --- -- --- ----- ------ - --------------- -- - ------ ----- - -- --- -------------------- -- ------- --- -- --
filter
filter
方法用于对数组中的每个元素执行指定的测试,并返回符合条件的元素组成的新数组。它的语法如下:
----- -------- - ------------------------------------ ------- ---------- ---------
其中,callback
的参数与 forEach
相同,thisArg
也是可选的。
示例代码:
----- --- - --- -- --- ----- ------ - ------------------ -- - ------ ----- - -- --- -------------------- -- ------- --- --
reduce
reduce
方法用于对数组中的每个元素执行指定的累加器函数,并返回累加的结果。它的语法如下:
----- ------ - ---------------------------------- -------------- ------- ---------- --------------
其中,callback
的参数包括累加器 accumulator
、当前元素 currentValue
、索引 index
和数组 array
,initialValue
是可选的,表示累加器的初始值。
示例代码:
----- --- - --- -- --- ----- --- - ------------------------ ------------- -- - ------ ----------- - ------------- -- --- ----------------- -- ------- -
ECMAScript 2017 中的数组迭代方法
includes
includes
方法用于判断数组中是否包含指定的元素。它的语法如下:
----- ------ - ------------------------------ -----------
其中,searchElement
表示要查找的元素,fromIndex
是可选的,表示从哪个索引开始查找。
示例代码:
----- --- - --- -- --- ----------------------------- -- ------- ---- ----------------------------- -- ------- -----
find
find
方法用于返回数组中符合条件的第一个元素。它的语法如下:
----- ------ - ---------------------------------- ------- ---------- ---------
其中,callback
的参数与 filter
相同,thisArg
也是可选的。
示例代码:
----- --- - --- -- --- ----- ------ - ---------------- -- - ------ ----- - -- --- -------------------- -- ------- -
findIndex
findIndex
方法用于返回数组中符合条件的第一个元素的索引。它的语法如下:
----- ------ - --------------------------------------- ------- ---------- ---------
其中,callback
的参数与 filter
相同,thisArg
也是可选的。
示例代码:
----- --- - --- -- --- ----- ----- - --------------------- -- - ------ ----- - -- --- ------------------- -- ------- -
比较与总结
在 ECMAScript 6 中,forEach
、map
、filter
和 reduce
四个方法是比较常用的。它们的区别在于:
forEach
:遍历数组,对每个元素执行指定的操作,无返回值。map
:遍历数组,对每个元素执行指定的操作,并返回一个新的数组。filter
:遍历数组,对每个元素执行指定的测试,返回符合条件的元素组成的新数组。reduce
:遍历数组,对每个元素执行指定的累加器函数,返回累加的结果。
在 ECMAScript 2017 中,includes
、find
和 findIndex
三个方法是新增的。它们的区别在于:
includes
:判断数组中是否包含指定的元素,返回布尔值。find
:返回数组中符合条件的第一个元素,无符合条件的元素则返回undefined
。findIndex
:返回数组中符合条件的第一个元素的索引,无符合条件的元素则返回-1
。
需要注意的是,find
和 findIndex
只会返回符合条件的第一个元素或索引,如果数组中有多个符合条件的元素,则只返回第一个。
综上所述,我们需要根据具体的需求来选择合适的数组迭代方法。在处理数组时,使用这些方法可以让我们的代码更加简洁、高效。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/650d213695b1f8cacd6dbed2