码迷,mamicode.com
首页 > 编程语言 > 详细

从给数组中的对象去重看Javascript中的reduce()

时间:2017-10-17 01:14:03      阅读:271      评论:0      收藏:0      [点我收藏+]

标签:filter   增加   声明   id重复   reduce   实现   javascrip   结果   代码   

假设有这样一个数组:

let person = [
     {id: 0, name: "小明"},
     {id: 1, name: "小张"},
     {id: 2, name: "小李"},
     {id: 3, name: "小孙"},
     {id: 1, name: "小周"},
     {id: 2, name: "小陈"},   
]

我们想去掉数组中id重复的对象,比如同样id为2的两个对象——

{id: 2, name: "小李"}和{id: 2, name: "小陈"} (去掉任何一个都可以)

我们该如何去做呢?

事实上,对于数组对象,传统的去重方法无能为力,至于forEach()、filter()等迭代方法也不好使;真正能做到优雅去重的,是ES5新增加的一个方法——reduce()

reduce()方法接收一个回调函数作为第一个参数,回调函数又接受四个参数,分别是:

 

1. cur => 首个值或者与后面的值叠加的结果;

2. next => 下一个要叠加的值;

3. index => 索引值;

4. arr => 数组本身;

 

reduce常用的方法就是不断叠加数组中的每一项,并返回出来;

let log = console.log.bind(console);
let arr = [1,2,3,4,5,6];
arr = arr.reduce((cur,next) => {
     return cur + next;
})
log(arr); // 21

可以看出,上面代码的最终结果就是1+2+3+4+5+6 = 21;

此外,reduce还可以接收第二参数,用来声明回调函数(第一个参数)的cur的类型和初始值;

let log = console.log.bind(console);
let arr = [1,2,3,4,5,6];
arr = arr.reduce((cur,next) => {
     return cur + next;
},0) //指定cur的类型为Number并且初始值为0,当设为1时,最终打印的值为22
log(arr); // 21

 

reduce()大致就是这样。通过这个方法,我们可以非常优雅的实现数组中的对象去重,让我们回到文章开头的那个数组:

 

let log = console.log.bind(console);
let person = [
     {id: 0, name: "小明"},
     {id: 1, name: "小张"},
     {id: 2, name: "小李"},
     {id: 3, name: "小孙"},
     {id: 1, name: "小周"},
     {id: 2, name: "小陈"},   
];

let obj = {};

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

打印person后,我们就可以得到去重后的数组。

从给数组中的对象去重看Javascript中的reduce()

标签:filter   增加   声明   id重复   reduce   实现   javascrip   结果   代码   

原文地址:http://www.cnblogs.com/caideyipi/p/7679681.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!