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

一个新手
풀어 주다: 2023-03-16 16:56:01
원래의
2282명이 탐색했습니다.

假设有这样一个数组:

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时,最终打印的值为22log(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后,我们就可以得到去重后的数组。

위 내용은 从给数组中的对象去重看js中的reduce()의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!