ES6 set和map数据结构对对象数组去重简单实现
自从有了es6的set数据结构,数组的去重可以简单用一行代码实现,比如下面的方式
let arr = [1, 2, 2, 3, 4]
function unique (arr) {
return [...new Set(arr)]
}
console.log(unique(arr)) // [1, 2, 3, 4]
但是当数组的项不再是简单的数据类型时,比如是对象时,这种方法就会导致错误,比如下面的结果
let arr = [
{ name: 'a', num: 1},
{ name: 'b', num: 1},
{ name: 'c', num: 1},
{ name: 'd', num: 1},
{ name: 'a', num: 1},
{ name: 'a', num: 1},
{ name: 'a', num: 1}
]
function unique (arr) {
return [...new Set(arr)]
}
console.log(unique(arr)) // 结果为原数组,有兴趣可以复制代码试一下
其中的原因是因为set数据结构认为对象永不相等,即使是两个空对象,在set结构内部也是不等的
基于以上原因,利用map和set结构封装了一种对对象数组去重的简单方法,其实他们本质都是一样的,只是使用sjon.stringfy()和json.parse()会影响性能,具体如下
// ES6对象数组所有属性去重,筛选每个数组项的字符
function unique(arr) {
const map = new Map()
return arr.filter( item => !map.has(JSON.stringify(item)) && map.set(JSON.stringify(item), 1))
}
// ES6根据一维对象数组某个属性去重且该属性的值为简单数据类型,比较实用的一种的方法,也基本没有什么性能影响
function unique(arr, key) {
const map = new Map()
return arr.filter((item) => !map.has(item[key] + '') && map.set(item[key] + '', 1))
}
网上有朋友设计了一种更简单的方法,主要是对map数据结构的键理解得不一样,其他没什么区别,代码如下
// ES6对象数组所有属性去重,筛选每个数组项的字符
function unique2(arr) {
const map = new Map()
return arr.filter( item => !map.has(item) && map.set(item, 1))
}
实际试了一下,发现没有起到去重的效果,不知道具体原因是什么,我的理解是当用item指代数组中的每一项的对象的时候,item保存的是对对象的指针,即栈中的地址,并不是对象本身,所以每一个item的地址是不一样的,尽管他们都指向同一个堆数据,所以map认为每一个item并不相等,当然就起不到去重的效果。如果有更正确和深入的理解欢迎讨论哈
ES6 set和map数据结构对对象数组去重简单实现的更多相关文章
- js ES6 Set和Map数据结构详解
这篇文章主要介绍了ES6学习笔记之Set和Map数据结构,结合实例形式详细分析了ECMAScript中基本数据结构Set和Map的常用属性与方法的功能.用法及相关注意事项,需要的朋友可以参考下 本 ...
- es6 Set 和Map 数据结构
ES6提供了新的数据结构Set,它类似于数组,但是成员的值都是唯一的,没有重复的值. Set 本身是一个数据结构,用来生成Set 数据结构. const s = new Set(); [2,3,5,4 ...
- JavaScript中好用的对象数组去重
对象数组去重 Demo数据如下: var items= [{ "specItems": [{ "id": "966480614728069122&qu ...
- ES6新数据结构Set让数组去重
function unique(array){ return Array.from(new Set(array)); } var arr = ['aa','bb','cc','',1,0,'1',1, ...
- es6入门7--Set Map数据结构
本文作为ES6入门第十三章的学习整理笔记,可能会包含少部分个人的理解推测,若想阅读更详细的介绍,还请阅读原文ES6入门 一.set数据结构 1.set不接受重复值 ES6新增了Set构造函数用于创建s ...
- js 对象数组去重
var arr = [{ "name": "ZYTX", "age": "Y13xG_4wQnOWK1QwJLgg11d0pS4h ...
- JavaScript中对象数组去重方法
在一次对后端返回的对象数组的操作时想通过indexOf()或者includes()的方法来实现对对象数组的去重但是行不通,因为用indexOf()返回的都是-1,一下记录两种对象数组(更具指定属性)去 ...
- vue中对象数组去重
其实很简单,一般的数组去重可以直接用 new Set() 方法即可,但是数组对象的话,比较复杂,不能直接用,我们可以采取间接的方法来去重 unique(arr) { const res = new M ...
- ES6深入浅出-10 ES6新增的数据类型-2.Set与数组去重
一种新的数据类型,它是对象的一种,Set,很像数组,又不是数组. Set 类型 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Refe ...
随机推荐
- Leetcode905.Sort Array By Parity按奇偶排序数组
给定一个非负整数数组 A,返回一个由 A 的所有偶数元素组成的数组,后面跟 A 的所有奇数元素. 你可以返回满足此条件的任何数组作为答案. 示例: 输入:[3,1,2,4] 输出:[2,4,3,1] ...
- python流程控制和循环
变量的命名:可以由数字字母下换线组成 ,不能以数字开头,可以使用中文但是不推荐使用中文,不推荐前面使用_ __,不能使用系统的关键字,变量名严格区分大小写 逻辑运算优先级 or<and<n ...
- jenkins执行selenium自动化测试浏览器不显示解决方法
因为jenkins是用windows installer 安装成 windows的服务了,那么jenkins是一个后台服务,所以跑selium cases 的时候不显示浏览器 解决办法:Step 1. ...
- 【风马一族_软件】微软卸载工具_msicuu2.exe
msicuu2.exe是微软的Windows Installer清理工具,可以用来清理微软安装包软件产生的垃圾,当然也可以拿来作为修复相关软件的卸载准备使用 下载链接:http://files.cnb ...
- 【C++】去除vector里重复元素的方法比较
背景:构造一个无重复的白名单,之后要在里面进行二分查找.故要求名单有序,且无重复,并且要进行二分查找,所以要采用有:随机访问迭代器类型的容器.这类容器有vector,array,deque.显然要ve ...
- IDEA-servlet项目创建web项目
准备:1. 安装jdk1.82. 安装tomcat9.0(idea只支持4.0 9.0的服务器) 一.创建并设置javaweb工程 1.创建javaweb工程File --> New --&g ...
- 【JZOJ4869】【NOIP2016提高A组集训第9场11.7】平均数
题目描述 数据范围 解法 二分答案. 对于一个答案mid,要求出区间平均数小于mid的个数ans. 给所有数减去mid,那么问题转化为求出所有区间和为负数的个数. 对于一个区间[l,r],如果sum[ ...
- ios开发――解决UICollectionView的cell间距与设置不符问题
在用UICollectionView展示数据时,有时我们希望将cell的间距调成一个我们想要的值,然后查API可以看到有这么一个属性: - (CGFloat)minimumInteritemSpaci ...
- Libevent:0异步IO简介
一:异步IO简介 大多数的初级编程者都是从阻塞IO调用开始网络编程的.阻塞(同步)IO调用指的是:调用会一直阻塞,不会返回,直到发生下面两种情况之一.要么操作完成,要么经历相当长的时间,网络协议栈自己 ...
- Nacos 发布 1.0.0 GA 版本,可大规模投入到生产环境
经过 3 个 RC 版本的社区体验之后,Nacos 正式发布 1.0.0 GA 版本,在架构.功能和 API 设计上进行了全方位的重构和升级. 1.0.0 版本的发布标志着 Nacos 已经可以大规模 ...