js 数组常用的遍历方法

95 阅读4分钟

其实我们常用到的数组遍历方法就那么几个,但里面有些细节往往不容易引起人的注意。今天就重点说几个常用的数组遍历方法!!!

起初我学习这些数组的方法也会忽略一些细微的细节,于是今天就以封装数组方法为例,来认识一下这些数组方法有哪些我们不常关注的点。

forEach

forEach()  方法对数组的每个元素执行一次给定的函数。

之所以第一个要说的是forEach,是因为他的内部封装的最为简单。此方法接收两个参数,第一个参数callbackFn为传递的回调函数,函数里分别接收三个参数,element(元素每一项)、index(索引)、 array(调用了 forEach() 的数组本身),第二个参数往往都不太引起关注,thisArg(可选),用作执行callbackFn时用作this的值,相当于如果第二个参数不传的话,我们this默认指向window(浏览器环境,Node环境是global),于是只看这些偏概念性的,确实还是会略抽象,于是我们最后实际的封装一下。

image.png

map

map()  方法创建一个新数组,这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。

map和forEach方法接收的参数是一样的,唯一的不同是map是一个映射,它会加工这些数据后返回一个新的数组,并且这个数组长度和加工之前的数组长度是一致的。

image.png

filter

filter()  方法创建给定数组一部分的浅拷贝,其包含通过所提供函数实现的测试的所有元素。

参数方面也和上述一样,但相比于同样会返回一个新数组的map方法来讲,filter是个过滤器,它不会改变数据的格式,并且只返回满足条件的数据,而map不仅可以改变原本数据的格式,在加工之后不管成不成立的条件依然会返回,会和加工之前数组的长度保持一致。

image.png

some 和 every

some()  方法测试数组中是否至少有一个元素通过了由提供的函数实现的测试。如果在数组中找到一个元素使得提供的函数返回 true,则返回 true;否则返回 false。它不会修改数组。

every()  方法测试一个数组内的所有元素是否都能通过指定函数的测试。它返回一个布尔值。

参数同上述,字面意思理解,这两个方法也是相反的,但需要注意的是,some()去遍历一个空数组时候会得到结果false,而every()遍历一个空数组是true,于是我们在封装时,也需要注意这些。

image.png

image.png

find 和 findIndex

find()  方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined

findIndex()  方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回 -1。

参数同上述,这两个数组的方法其实非常类似,共同点是返回成立的条件都是当第一个元素满足返回条件时,不同的是,find() 返回的是满足第一个成立的元素值,否则 undefined ,findIndex 返回的是满足第一个成立的元素的索引,否则返回 -1

image.png

image.png

以上这几个方法无论从使用和封装的层面上都比较容易理解和操作,下面就是比较相对复杂一些的

reduce

reduce()  方法对数组中的每个元素按序执行一个提供的 reducer 函数,每一次运行 reducer 会将先前元素的计算结果作为参数传入,最后将其结果汇总为单个返回值。

相比于上面几个的数组遍历方法,reduce有些区别,内部封装也略复杂些,接受两个参数,第一个是 callbackFn这个回调接受四个参数,

  • accumulator 上一次callbackFn的结果
  • currentValue 数组的每一项元素
  • currentIndex 当前的索引
  • array 数组的本身

第二个是 initialValue,如果指定了initialValue,(callbackFn的第一个参数)第一次调用callbackFn时候会指向 定义的这个值,否则从索引的第一项开始,array[0], (callbackFn的第二个参数)会指向数组索引的第一条,负责是第二条,(callbackFn的第三个个参数)也一样是从0开始,否则从1。

了解这几个概念之后,我们就可以在内部去处理这些点,只要不传递initialValue,我们就让 i 为1,初始值被存到了pre变量上(也就是如果不传initialValue,第一个参数从索引的第一项开始,如果传递了,pre就是初始值,接着在循环中我们调用callbackFn这个方法,每一轮调用的结果都是下一次循环的初始值),最终当循环结束返回pre。

image.png