【ES6】es6数组中对象去重,数组对象去重方法总结---filter()与reduce()实践
es6数组中对象去重
- 方法一: filter()与findIndex()给数组去重
- 1. filter()用法
- 2. findIndex()用法
- 3. 去重实战
- 方法二:reduce()去重
- 1. reduce()用法
- 1.1 找出字符长度最长的数组成员。
- 1.2 扁平化二维数组
- 1.3 扁平化多维数组
- 1.4 数组去重
- 1.5 对象内的属性求和
- 2. 去重实战
开发中遇到搜索,数据是这样添加的
this.delHumans.push(...humans); //将搜索出的人员添加到数据项
但是会遇到有重复的情况
方法一: filter()与findIndex()给数组去重
1. filter()用法
filter()
方法返回一个包含符合指定条件的所有元素的新数组。如果没有符合条件的元素,则返回空数组。
注意: filter() 不会对空数组进行检测。
注意: filter() 不会改变原始数组。
let arr = [{id: 1,name: '张三'},{id: 2,name: '李四'}];let nArr = arr.filter((currentValue, currentIndex, selfArr) =>{console.log(currentValue);console.log(currentIndex);console.log(selfArr);
});
打印结果:
{id: 1, name: '张三'}
0
[{id: 1, name: '张三'},{id: 2, name: '李四'}]{id: 2, name: '李四'}
1
[{id: 1, name: '张三'},{id: 2, name: '李四'}]
2. findIndex()用法
findIndex()
方法返回传入一个测试条件(函数)符合条件的数组第一个元素位置。
findIndex()
方法为数组中的每个元素都调用一次函数执行:
- 当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置,之后的值不会再调用执行函数。
- 如果没有符合条件的元素返回 -1
注意: findIndex() 对于空数组,函数是不会执行的。
注意: findIndex() 并没有改变数组的原始值。
[3, 10, 18, 20].findIndex(value => value>11); // 2 (18的下标是2)
[3, 10, 18, 20].findIndex(value => value>1); // 0 (3的下标是0)
[3, 10, 18, 20].findIndex(value => value>30); // -1 (不存在则返回-1)
3. 去重实战
let arr = [{id: 1,name: '张三'},{id: 2,name: '李四'},{id: 1,name: '张三'},{id: 2,name: '李四'}];let nArr = arr.filter((currentValue, currentIndex, selfArr) = >{return selfArr.findIndex(x = >x.name === currentValue.name) === currentIndex
});
console.log(nArr);
结果:
[{"id": 1,"name": "张三"},{"id": 2,"name": "李四"}]
其他方法:
var m = new Map();
person = person.filter((ele) => !m.has(ele.id) && m.set(ele.id, ""));
方法二:reduce()去重
1. reduce()用法
reduce
方法和reduceRight
方法依次处理数组的每个成员,最终累计为一个值。
区别:
reduce
是从左到右处理(从第一个成员到最后一个成员),
reduceRight
则是从右到左(从最后一个成员到第一个成员),其他完全一样。
注意:
reduce() 对于空数组是不会执行回调函数的。
语法:
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
total
累积变量,默认为数组的第一个成员currentValue
当前变量,默认为数组的第二个成员currentIndex
当前位置(从0开始)arr
原数组
这四个参数之中,只有前两个是必须的,后两个则是可选的。
// total为最终累计值
let total = [1, 2, 3, 4, 5].reduce(function (a, b) {console.log(a, b);return a + b;
});
// 1 2
// 3 3
// 6 4
// 10 5
// 15
如果要对累积变量指定初值,可以把它放在reduce方法和reduceRight方法的第二个参数。
[1, 2, 3, 4, 5].reduce(function (a, b) {return a + b;
}, 10);
// 25
上面的第二个参数相当于设定了默认值,处理空数组时尤其有用,可避免一些空指针异常。
由于这两个方法会遍历数组,所以实际上还可以用来做一些遍历相关的操作。
比如,
1.1 找出字符长度最长的数组成员。
function findLongest(entries) {return entries.reduce(function (longest, entry) {return entry.length > longest.length ? entry : longest;}, '');
}findLongest(['aaa', 'bb', 'c']) // "aaa"
上面代码中,reduce的参数函数会将字符长度较长的那个数组成员,作为累积值。这导致遍历所有成员之后,累积值就是字符长度最长的那个成员。
1.2 扁平化二维数组
let arr = [[0, 1], [2, 3], [4, 5]]
let newArr = arr.reduce((pre,cur)=>{return pre.concat(cur)
},[])
console.log(newArr); // [0, 1, 2, 3, 4, 5]
1.3 扁平化多维数组
let arr = [[0, 1], [2, 3], [4,[5,6,7]]]
const newArr = function(arr){return arr.reduce((pre,cur)=>pre.concat(Array.isArray(cur)?newArr(cur):cur),[])
}
console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5, 6, 7]
1.4 数组去重
let arr = [1, 2, 2, 4, null, null].reduce((accumulator, current) => {return accumulator.includes(current) ? accumulator : accumulator.concat(current);
}, []);
let arr = [1, 2, 2, 4, null, null].filter((item, index, arr) => arr.indexOf(item) === index); // [1,2,4,null]
let arr = [...new Set([1, 2, 2, 4, null, null])]; // [1,2,4,null]
1.5 对象内的属性求和
var result = [{subject: 'math',score: 10},{subject: 'chinese',score: 20},{subject: 'english',score: 30}
];var sum = result.reduce(function(prev, cur) {return cur.score + prev;
}, 0);
console.log(sum) //60
2. 去重实战
利用reduce()方法的累积器作用,在对由对象组成的数组进行遍历时,通过对象hasObj
来标记数组中每个元素id是否出现过。
如果出现过,那么遍历到的当前元素则不会放入到累积器中,
如果没有出现,则添加到累积器中,这样保证了最后返回值中每个数据id的唯一性。
let person = [{id: 0, name: "小明"},{id: 1, name: "小张"},{id: 2, name: "小李"},{id: 3, name: "小孙"},{id: 1, name: "小周"},{id: 2, name: "小陈"},
];let hasObj= {};person = person.reduce((cur,next) => {// true && cur.push(next)惰性求值?--如果最后一个表达式为非false,那么直接返回这个表达式的结果,反之直接是falsehasObj[next.id] ? "" : (hasObj[next.id] = true && cur.push(next)); return cur;
},[]) //设置cur默认类型为数组,并且初始值为空的数组
console.log(person);
[{"id": 0,"name": "小明"},{"id": 1,"name": "小张"},{"id": 2,"name": "小李"},{"id": 3,"name": "小孙"}]
【ES6】es6数组中对象去重,数组对象去重方法总结---filter()与reduce()实践相关推荐
- js小白操作:判断空值、判断数组最大最小值、判断map是否为空、字符串转int、取float型小数点后两位数、判断数组中是否包含某个对象
js小白操作:判断空值.判断数组最大最小值.判断map为空的情况.字符串转int Js基础操作 一.判断空值 undefined 和 null 二.判断map是否为空 三.取数组最大最小值 1.使用 ...
- 3.js中判断数组中是否存在某个对象/值,判断数组里的对象是否存在某个值 的五种方法 及应用场景|判断数组里有没有某对象,有不添加,没有则添加到数组
3.js中判断数组中是否存在某个对象/值,判断数组里的对象是否存在某个值 的五种方法 及应用场景 一.当数组中的数据是简单类型时: 应用js中的indexof方法:存在则返回当前项索引,不存在则返回 ...
- 定义一个抽象类一水果,创建若干水果对象存放在-一个水果类型的数组中,输出数组中所有水果的类型、重量
****定义一个抽象类一水 果,其中包括getWeightQ方法,编写程序分别创建苹果.桃子.橘子3个类,创建若干水果对象存放在-一个水果类型的数组中,输出数组中所有水果的类型.重量.提示:利用对象的 ...
- Java 定义一个抽象类—水果,其中包括getWeight()方法,创建若干水果对象存放在一个水果类型的数组中,输出数组中所有水果的类型、重量。
Java 定义一个抽象类-水果 其中包括getWeight()方法,编写程序分别创建苹果.桃子.橘子3个类,创建若干水果对象存放在一个水果类型的数组中,输出数组中所有水果的类型.重量. 抽象类Frui ...
- js取出两个数组中id相同的对象
现在是要将两个不同的数组中进行匹配,并取出两个数组中id相同的对象放入一个新的数组 数组如图所示 代码 const newList = this.objList.filter((item) => ...
- 如何拿到对象数组中的某一对象的元素(JS的filter方法)
如何拿到对象数组中的某一对象的元素 在写一个简单的商品管理系统的时候,遇到了一个问题,我接口中需要传递的参数是一个role_id,但是我在页面上显示是角色名称 通过对filter()方法的使用,拿到对 ...
- JSON解析实战篇:JSON数组中含JSON数组
少年最好的地方就是:嘴里说着要放弃,心里却都憋着一口气. 前言 关于JSON和本文中所用的Fastjson介绍,可以查看我的这两篇博客: JSON简介:什么是JSON -> https://bl ...
- 求二维数组中最大子数组的和
任国庆 张博 之前我们讨论了在一维数组中求最大子数组的和,在此基础上我们开始讨论二维数组的最大子数组. 求二维数组的最大子数组思想是建立在以为数组.首先将数组的第一列看成一个一维数组,找到该列的最大 ...
- 整数数组中最大子数组求和02
设计思路: 在"整数数组中最大子数组求和01"的基础上完成本次实验. 本次实验的关键在于如何判断结束. 经设计,程序结束条件有两种:1.截取部分有重复:2.循环完整两次. 满足其中 ...
最新文章
- Mansory算法分析
- [置顶] 归并排序,逆序数
- 线上日志集中化可视化管理:ELK
- 一起学设计模式 - 单例模式
- LeetCode--91. 解码方法(动态规划)
- crawlspider
- linux修改web密码忘记,Ubuntu 直接修改IPMIweb登录密码
- xgboost融合模型:大学助学金精准资助预测(有数据)
- 程序4-1 对每个命令行参数打印文件类型
- 外观模式又叫门面模式?
- Win虚拟机查询不到自己的IP地址
- linux下ASM配置
- 点云纹理映射 matlab,一种点云模型纹理映射方法与系统与流程
- 从存活了1441年的企业,我们能学到什么?
- python脚本运行越来越慢
- 100万算大钱还是小钱?
- Kotlin入门第四节
- linux 将sda分区扩容
- 中文字幕人工翻译 Lynda-After Effects CC 2019 Essential Training Motion Graphics
- 电信网通的IP地址分布
热门文章
- 仙人掌之歌——开发(2)
- 网友:后悔知道太晚了,视频被判定为重复度过高?原来答案是这样
- bat文件注册成服务
- 读书笔记-从你的全世界路过
- 让我摘下星星送给你_摘下星星给你摘下月亮给你是什么歌
- win7系统安装信息服务器不可用怎么办,Win7电脑RPC服务器不可用怎么办 RPC服务器不可用解决方法...
- 长沙医学院计算机科学与技术专业怎么样,长沙医学院有哪些专业及什么专业好...
- 完成图书管理系统类图的绘制_自助图书馆应用
- angular在IE下报object doesn't support property or method matches问题,以及router-outlet切换时不删除原组件而是添加一个新组件
- python从入门到撩妹 2 —— 30行代码实现520小彩蛋