唯品秀前端博客
当前位置: 前端开发 > JavaScript > 浅谈很多人都不会用的reduce()方法

浅谈很多人都不会用的reduce()方法

2019-06-13 分类：JavaScript 作者：管理员 阅读（1149）

以前只知道这个东西可以做一串数字相加求和啥的，并没有去深度发掘它的更多用处，无意在一篇文章中发现了新天地，一起来瞅瞅

了解语法

1
2
3
arr.reduce(function(prev,cur,index,arr){
...
}, init);

    其中：

  1. 1、arr 表示原数组；
  2. 2、prev 表示上一次调用回调时的返回值，或者初始值init。说白点，如果你没设置init，那么初始化值就是arr数组的第一位开始
  3. 3、cur 表示当前正在处理的数组元素。哦，它就是真正意义上的item，表当前选项
  4. 4、index 表示当前正在处理的数组元素的索引，若提供 init 值，则索引为0，否则索引为1。要注意啊，不一定就是0开始，这取决于你有没有初始值init
  5. 5、init 表示初始值。好像有点小重要

看起来有点复杂，反正我晕了，没关系，只是看起来而已，其实常用的参数只有两个：prev 和 cur。接下来我们跟着实例来看看具体用法吧

示例

准备个原数组

1
var arr = [3,9,4,3,6,0,9];

1.来求和

1
2
3
var sum = arr.reduce(function (prev, cur) {
    return prev + cur;
},0);

由于传入了初始值0，所以开始时prev的值为0，cur的值为数组第一项3，相加之后返回值为3作为下一轮回调的prev值，然后再继续与下一个数组项相加，以此类推，直至完成所有数组项的和并返回。

2. 求数组项最大值

1
2
3
var max = arr.reduce(function (prev, cur) {
    return Math.max(prev,cur);
});

由于未传入初始值，所以开始时prev的值为数组第一项3，cur的值为数组第二项9，取两值最大值后继续进入下一轮回调。

3. 数组去重

1
2
3
4
var newArr = arr.reduce(function (prev, cur) {
    prev.indexOf(cur) === -1 && prev.push(cur);
    return prev;
},[]);
  • 实现的基本原理如下：
  • ① 初始化一个空数组
  • ② 将需要去重处理的数组中的第1项在初始化数组中查找，如果找不到（空数组中肯定找不到），就将该项添加到初始化数组中
  • ③ 将需要去重处理的数组中的第2项在初始化数组中查找，如果找不到，就将该项继续添加到初始化数组中
  • ④ ……
  • ⑤ 将需要去重处理的数组中的第n项在初始化数组中查找，如果找不到，就将该项继续添加到初始化数组中
  • ⑥ 将这个初始化数组返回

    • 4.数组对象去重

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    var person = [
         {id: 0, name: "小明"},
         {id: 1, name: "小张"},
         {id: 2, name: "小李"},
         {id: 3, name: "小孙"},
         {id: 1, name: "小周"},
         {id: 2, name: "小陈"},  
    ];

    var obj = {};
    person = person.reduce((cur,next) => {
        obj[next.id] ? "" : obj[next.id] = true && cur.push(next);
        return cur;
    },[]) //设置cur默认类型为数组，并且初始值为空的数组

    console.log(person );

    这里出现个有意思的问题，当打印obj的时候，结果是：

    1
    Object {0: 1, 1: 2, 2: 3, 3: 4}

    三、其他相关方法

    reduceRight()

    该方法用法与reduce()其实是相同的，只是遍历的顺序相反，它是从数组的最后一项开始，向前遍历到第一项。

    小结

    reduce() 是数组的归并方法，与forEach()、map()、filter()等迭代方法一样都会对数组每一项进行遍历，但是reduce() 可同时将前面数组项遍历产生的结果与当前遍历项进行运算，这一点是其他迭代方法无法企及的。

    「两年博客，如果觉得我的文章对您有用，请帮助本站成长」

    赞(3) 打赏

    谢谢你请我吃鸡腿*^_^*

    支付宝
    微信
    赏 3

    谢谢你请我吃鸡腿*^_^*

    支付宝
    微信
    标签：

    上一篇：

    下一篇：

    你可能感兴趣

    共有 0 条评论 - 浅谈很多人都不会用的reduce()方法

    博客简介

    唯品秀博客: weipxiu.com，一个关注Web前端开发技术、关注用户体验、坚持更多原创实战教程的个人网站，愿景：成为宇宙中最具有代表性的前端博客，期待您的参与，主题源码 

    最近更新

    随机文章

    热门标签

    caniuse兼容性 阿里CDN CDN大全 博主Github 百度统计 百度收录 关键词排名 经典css片段 时间戳格式化 全国黑企名单 武汉黑企名单 996.ICU火了 Js33个概念 vConsole DSBridge DOM元素进屏 Shareinstall Http接口测试 前端面试100问 Vue.js200问 Node.js上线 lodash.js 视频压缩 vue视图更新

    精彩评论

    友情链接

    他们同样是一群网虫，却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步，但同学却不局限在一国一校，而是遍及全球！申请交换友链

    站点统计

    • 文章总数： 242 篇
    • 草稿数目： 0 篇
    • 分类数目： 15 个
    • 独立页面： 6 个
    • 评论总数： 870 条
    • 链接总数： 14 个
    • 标签总数： 432 个
    • 建站时间： 1062 天
    • 注册用户： 3455 人
    • 访问总量： 8667467 次
    • 最近更新： 2019年11月11日
    服务热线：
     173xxxx7240

     QQ在线交流

    点击这里给我发消息
    点击这里给我发消息

     旺旺在线

    点击这里给我发消息
    点击这里给我发消息