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

一个新手
Freigeben: 2023-03-16 16:56:01
Original
2287 Leute haben es durchsucht

假设有这样一个数组:

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

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

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

我们该如何去做呢?

事实上,对于数组对象,传统的去重方法无能为力,至于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
Nach dem Login kopieren

可以看出,上面代码的最终结果就是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时,最终打印的值为22log(arr); // 21
Nach dem Login kopieren

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);
Nach dem Login kopieren

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

Das obige ist der detaillierte Inhalt von从给数组中的对象去重看js中的reduce(). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!