1. 程式人生 > >從給數組中的對象去重看Javascript中的reduce()

從給數組中的對象去重看Javascript中的reduce()

[] 一個數 true 新增 ava index filter 設有 指定

假設有這樣一個數組:

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()