自从有了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))
}
 function unique(arr) {
      return [...new Set(arr.map(e => JSON.stringify(e)))].map(e => JSON.parse(e))
  }
// 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数据结构对对象数组去重简单实现的更多相关文章

  1. js ES6 Set和Map数据结构详解

    这篇文章主要介绍了ES6学习笔记之Set和Map数据结构,结合实例形式详细分析了ECMAScript中基本数据结构Set和Map的常用属性与方法的功能.用法及相关注意事项,需要的朋友可以参考下   本 ...

  2. es6 Set 和Map 数据结构

    ES6提供了新的数据结构Set,它类似于数组,但是成员的值都是唯一的,没有重复的值. Set 本身是一个数据结构,用来生成Set 数据结构. const s = new Set(); [2,3,5,4 ...

  3. JavaScript中好用的对象数组去重

    对象数组去重 Demo数据如下: var items= [{ "specItems": [{ "id": "966480614728069122&qu ...

  4. ES6新数据结构Set让数组去重

    function unique(array){ return Array.from(new Set(array)); } var arr = ['aa','bb','cc','',1,0,'1',1, ...

  5. es6入门7--Set Map数据结构

    本文作为ES6入门第十三章的学习整理笔记,可能会包含少部分个人的理解推测,若想阅读更详细的介绍,还请阅读原文ES6入门 一.set数据结构 1.set不接受重复值 ES6新增了Set构造函数用于创建s ...

  6. js 对象数组去重

    var arr = [{ "name": "ZYTX", "age": "Y13xG_4wQnOWK1QwJLgg11d0pS4h ...

  7. JavaScript中对象数组去重方法

    在一次对后端返回的对象数组的操作时想通过indexOf()或者includes()的方法来实现对对象数组的去重但是行不通,因为用indexOf()返回的都是-1,一下记录两种对象数组(更具指定属性)去 ...

  8. vue中对象数组去重

    其实很简单,一般的数组去重可以直接用 new Set() 方法即可,但是数组对象的话,比较复杂,不能直接用,我们可以采取间接的方法来去重 unique(arr) { const res = new M ...

  9. ES6深入浅出-10 ES6新增的数据类型-2.Set与数组去重

    一种新的数据类型,它是对象的一种,Set,很像数组,又不是数组. Set 类型 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Refe ...

随机推荐

  1. oracle误操作commit之后,可以闪回数据

    1. 授予行迁移权限 alter table table_name enable row movement; 2. 到15分钟前: flashback table order   to timesta ...

  2. iOS 使用Quartz和OpenGL绘图

    http://blog.csdn.net/coder9999/article/details/7641701 第十二章 使用Quartz和OpenGL绘图 有时应用程序需要能够自定义绘图.一个库是Qu ...

  3. ie8 下margin-top失效的小案例

    一个小案例,是关于IE8下的margin-top的失效问题,巨日代码如下: 正常的chrome浏览器下的显示如下: margin-top=10px,正常显示 但是在ie8下,最终样式如下: margi ...

  4. 【JZOJ4744】【NOIP2016提高A组模拟9.2】同余

    题目描述 输入 输出 样例输入 5 2 1 5 2 3 7 1 3 2 1 2 5 3 0 样例输出 2 1 数据范围 解法 题目允许离线,且没有修改操作. 考虑把一个询问拆分成两个形如"a ...

  5. 【JZOJ4814】【NOIP2016提高A组五校联考2】tree

    题目描述 给一棵n 个结点的有根树,结点由1 到n 标号,根结点的标号为1.每个结点上有一个物品,第i 个结点上的物品价值为vi. 你需要从所有结点中选出若干个结点,使得对于任意一个被选中的结点,其到 ...

  6. JavaScript--关于变量提升思考

    下面例子仅仅是思考变量提升使用: 在实际开发中并不推荐使用相同名字的变量和函数! // 如果变量和函数同名的话,函数优先提升 console.log(a); function a() { consol ...

  7. windows和linux下读取文件乱码的终极解决办法!

    乱码是个很恶心的问题. windows和linux读取txt文件,一旦读取了,编码发生改变,就无法再还原了,只有重启项目. 网上有很多方法都是读取文件头,方法很好,但是亲测都不能用(右移8位判断0xf ...

  8. day18 jQuery,JavaScript高级&Django

    回顾: 整体: - HTML - CSS - JavaScript:基本数据类型:流程控制语句 - DOM - BOM:setInterval() - jQuery - 选择器 - 筛选器 - 内容和 ...

  9. python世界里的局部变量和全局变量: 潜规则太重要了!!!

    python世界里的局部变量和全局变量: 潜规则太重要了!!! 先上代码: def fun(): def test_global(): ''' 内层和外层都需要声明为global, 才能彻底打通变量名 ...

  10. 2018-7-21-win10-uwp-调用-Microsoft.Windows.Photos_8wekyb3d8bbwe-应用

    title author date CreateTime categories win10 uwp 调用 Microsoft.Windows.Photos_8wekyb3d8bbwe 应用 linde ...