我是靠谱客的博主 虚幻小蝴蝶,最近开发中收集的这篇文章主要介绍reduce()数组去重,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

需求:去除掉下列数组中id重复的对象


let colors = [{
id: 0,
colorName: 'red'
},
{
id: 1,
colorName: "orange"
},
{
id: 2,
colorName: "yellow"
},
{
id: 3,
colorName: "green"
},
{
id: 1,
colorName: "blue"
},
{
id: 2,
colorName: "purple"
},
];

方法:


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

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

1.previousValue => 初始值或上一次回调函数叠加的值;

2. currentValue => 本次回调(循环)将要执行的值;

3. index =>“currentValue”的索引值;

4. arr => 数组本身;

reduce()方法返回的是最后一次调用回调函数的返回值;

let log = console.log.bind(console);
let arr = [1,2,3,4,5,6];
arr = arr.reduce((previousValue, currentValue) => {
return previousValue + currentValue; //返回的是最后一次调用回调函数的值,15+6;
})
log(arr); // 21

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

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

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

需要注意的是,如果设置了initialValue的值,第一次执行回调函数的previousValue的值等于initialValue,此时查看当前索引(index)为0;但如果不设置initialValue的值,previousValue的值为数组的第一项,并且索引值(index)为1;也就是说,不设置初始值的话reduce()方法实际是从第二次循环开始的!

 

扩展数组去重方法新:

let mys = [4,4,1,3,6,9,9,0,2];
console.log([...new Set(mys)]);//[4,1,3,6,9,0,2]

 

参考:https://www.cnblogs.com/caideyipi/p/7679681.html

最后

以上就是虚幻小蝴蝶为你收集整理的reduce()数组去重的全部内容,希望文章能够帮你解决reduce()数组去重所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(47)

评论列表共有 0 条评论

立即
投稿
返回
顶部