详解数组中的reduce要领

媒介

 这几天口试被问到了数组的要领有哪些,回复得几乎一塌糊涂,口试官说reduce的功用很壮大,因而想对这个要领举行总结,在红宝书中对这个要领的形貌并不算多,我也是参考了其他文章才举行总结的,下面就最先吧~

reduce的原理

简介

 在红宝书中,将这个要领定义为数组的合并要领,这个要领和迭代要领(map,forEach,filter…)一样,都邑对数组举行遍历,reduce与他们差别的是函数的第一个参数获得的是迭代盘算后的效果(看不懂没紧要,继承往下看就会懂了)

语法

 这个要领吸收两个参数:

  • 要实行的函数,要实行的函数中也可传入参数,分别为

    • prev:上次挪用函数的返回值
    • cur:当前元素
    • index:当前元素索引
    • arr:被遍历的数组
  • 函数迭代的初始值

举例

  • 没有设置函数的初始迭代值
let arr = [1, 2, 3, 4];
let sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
})
console.log(arr, sum);

运转效果:

《详解数组中的reduce要领》

剖析:
 我们能够看到,在这里reduce的作用就是对这个数组举行乞降,迭代了3次,函数迭代的初始值是1,也就是默认值(数组的第一项),prev的值是每次盘算后的值,如今明白了吧!

  • 设置初始迭代值
let arr = [1, 2, 3, 4];
let sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
},5)
console.log(arr, sum);

运转效果:

《详解数组中的reduce要领》

剖析:
 这里我们增加了一个初始的迭代值,也就是让prev从5最先盘算,能够看到,这里迭代了4次,效果也加上了初始值。

reduce的运用

低级运用

 最常见的运用平常就是乞降以及求乘积了,比方说下面的例子:

let arr = [1,2,3,4,5]
console.log(arr.reduce((a,b) => a + b))//15
console.log(arr.reduce((a,b) => a * b))//120

高等运用

盘算数组中每一个元素涌现的次数

let arr = ['name','age','long','short','long','name','name'] 

let arrResult = arr.reduce((pre,cur) =>{
    console.log(pre,cur)
    if(cur in pre){
        pre[cur]++
    }else{
        pre[cur] = 1
    }
    return pre
},{})

console.log(arrResult)//效果:{name: 3, age: 1, long: 2, short: 1}

运转效果:(第一个console.log)

《详解数组中的reduce要领》

剖析:
 也许的解释一下,运转历程是如许的:

  1. 因为设置了迭代初始值,pre的第一个值是一个空对象,此时cur为name,然后举行推断,发如今pre中没有name属性,所以就将name对应的属性值赋为1;
  2. 背面没有反复的是一样的原理,假如遇到反复值,就会将该属性值加1,如许就可以盘算元素反复的次数了。(有无以为很奇异呀~)

去除数组中反复的元素

let arrResult = arr.reduce((pre,cur) =>{
    if(!pre.includes(cur)){
        pre.push(cur)
    }
    return pre;
},[])

console.log(arrResult)//效果:["name", "age", "long", "short"]

剖析:
 这里主如果借助迭代功用完成数组的扩大,推断当前元素是不是已增加到数组中,假如不存在就从尾部增加,这个要领在去主要领中应该算比较简单高效的。

对对象的属性乞降

let person = [
    {
        name: 'xiaoming',
        age: 18
    },{
        name: 'xiaohong',
        age: 17
    },{
        name: 'xiaogang',
        age: 19
    }
]

let result = person.reduce((a,b) =>{
    a = a + b.age;
    return a;
},0)

console.log(result)//效果:54

剖析:
 这里主要就是应用reduce第一个参数是迭代,能够经由过程初始化这个参数的数据类型,到达想完成的效果。

总结

 运用reduce操纵数组时,最主要的就是明白第一个参数是怎样迭代的,能够好好应用初始化这个参数的数据类型来削减许多不必要的代码。上面举的三个高等运用的例子都是应用了这个长处,固然,reduce另有更多的运用,背面遇到还会举行补充的。

假如以为有效就给个赞吧~

    原文作者:huhaha24
    原文地址: https://segmentfault.com/a/1190000017420042
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞