数组reduce的使用方法

可以理解为数组的归并方法,这个方法和迭代方法（map,forEach,filter...）一样，都会对数组进行遍历，reduce与他们不同的是函数的第一个参数得到的是迭代计算后的效果.

语法:

接收两个参数：

一.要执行的函数，要执行的函数中也可传入参数，分别为:

1.prev：上次调用函数的返回值

2.cur：当前元素

3.index：当前元素索引

4.arr：被遍历的数组

二.函数迭代的初始值

我们分情况来介绍:

a.没有设置函数的初始迭代值

 

我们来分析一下,在此reduce的作用就是对这个数组进行求和，迭代了3次，函数迭代的初始值是0, 

也就是函数的第一项,也可称为默认值,prev的值是每次计算后的值.

具体分析:1.第一次函数迭代初始值是0,当前值是1,索引是1,所以打印出0 1 1

2.第二次函数迭代初始值为1(第一次函数迭代的值+第一次的当前值,0+1=1),当前值是2,当前索引是2,所以打印出1 2 2 

3.第三次函数迭代值是3(第二次函数迭代值1+第二次的当前值2=3),当前值是3,索引是3,所以打印出3 3 3

小伙伴们应该懂了吧,毕竟俊熙分析的这么细致!!

b.有设置函数的初始迭代值

我们再来看设置了函数迭代值的情况

 

分析过程:

1.这次设置了函数迭代值5,所以初始值为5,当前值为1,索引是0

2.第二次的函数迭代值是6(第一次的函数迭代初始值5+第一次的当前值1=6),当前值为2,索引为1

3.第三次的函数迭代值是8(第二次的函数迭代值6+第二次的当前值2=8),当前值是3,索引是2

4.第四次的函数迭代值是11(第三次的函数迭代值8+第三次的当前值3=11),当前值是4,索引是3

基础语法各位小伙伴应该理解了吧!!

不要走开,这才是开胃菜,下面我们来学习一些初级应用.高级应用 

一.初级应用:

 

二.高级应用 

1.计算数组中每个元素出现的次数

 

我们一起来分析一下执行过程:

1.可以看出这次设置了函数迭代值,但是是一个空对象{},所以cur也就是当前值就是name,也就是第一次打印出的结果.

2. 继续分析,又因为现在pre中有name属性,所以就把name对应的属性值设置为1,再加上当前值是age,也就是第二次打印结果.

3.第三次:因为name对应的属性值是age,age也是1,当前值是'long'.

4.第四次:name对应的属性值是'long','long'也是1,当前值是'short'.

5.第五次:name对应的属性值是'short',当前值为'long'.

6.第六次:name对应的属性值是'long',第五次已经出现'long',所以'long'会被记录2次,当前值'name'.(*)

7.第七次:name对应的属性值是'name',由于第六次'name'已经作为当前值出现,他又被记录一次,此时记录为2次,继续,当前值还是'name'

8.第八次:name对应的属性值是'name',分析得出此时'name'已经第三次出现,所以记录为3,此时当前值已经没有数据了,所以此时是汇总阶段,在第六次那我标记了一个*号,记录'long'出现了两次,其余的'age'和'short'没有重复出现.

总结:{name: 3, age: 1, long: 2, short: 1}是最终结果

被绕晕了吗,小伙伴们,我已经分析的很详细了.

2.对对象的属性求和

3.去除数组中重复的元素

 

主要是借助迭代功能实现数组的扩展，判断当前元素是否已经添加到数组中，如果不存在就从尾部添加,在此不一一分析了,具体原理和上边的分析每个元素出现次数大同小异,这里的函数迭代值给的是一个数组,所以第一次的当前值是'1',以此类推.

不足之处,请各位小伙伴多多见谅!