new Set( )的基本使用以及如何去重对象数组

目录

Set 对象方法

Set 对象作用

实现数组的去重

实现字符串的去重 

实现并集 · 交集 · 差集

实现去重对象数组

相关参考资料


  

在 ES6 中,引入了一个新的数据结构类型:Set。而 Set 与 Array 的结构是很类似的,且 Set 和 Array 可以相互进行转换 ——使用 Array.from(new Set( ))转为new Set( )数据结构为数组

Set 对象允许你存储任何类型的唯一值(Set 对象存储的值总是唯一的),无论是原始值或者是对象引用。

Set 对象方法

方法描述
add添加某个值,返回Set对象本身。
clear删除所有的键/值对,没有返回值。
delete删除某个键,返回true。如果删除失败,返回false。
forEach对每个元素执行指定操作。
has返回一个布尔值,表示某个键是否在当前 Set 对象之中。

Set 对象作用

实现数组的去重

// 操作数组
var arr = [1, 2, 3, 3, 1, 4];
Array.from(new Set(arr)); // [1, 2, 3, 4]
[...new Set(arr)]; // [1, 2, 3, 4]

实现字符串的去重 

// 操作字符串
new Set('ice doughnut'); // Set(11) {"i", "c", "e", " ", "d", …}
[...new Set('ababbc')].join(''); // "abc" 字符串去重

注:... ES6扩展运算符  

实现并集 · 交集 · 差集

Set 是如此强大,因此,使用 Set 可以很容易地实现并集(Union)、交集(Intersect)和差集(Difference)。 

并集

并集:以属于A或属于B的元素为元素的集合成为A与B的并(集)

var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var union = new Set([...a, ...b]); // {1, 2, 3, 4}

交集

交集: 以属于A且属于B的元素为元素的集合成为A与B的交(集)

var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var intersect = new Set([...a].filter(x => b.has(x))); // {2, 3}

差集

差集:以属于A而不属于B的元素为元素的集合成为A与B的差(集)

var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var difference = new Set([...a].filter(x => !b.has(x))); // {1}

实现去重对象数组

方法一:使用Map数据结构,当然这就跟Set就没有关系了

Map是一组键值对的结构,用于解决以往不能用对象做为键的问题,具有极快的查找速度。(注:函数、对象、基本类型都可以作为键或值。

参考:ES6中的Map数据结构 | Map 和 Set 的特点和区别

const ary = [{id: 1, text: "1"}, {id: 1, text: "1"}, {id: 2, text: "2"}, {id: 3, text: "3"}];

const myseta = (ary) => {
  const map = new Map();
  return ary.filter((ary) => !map.has(ary.id) && map.set(ary.id, 1))
};

console.log(myseta(ary)); // [{id: 1, text: '1'}, {id: 2, text: '2'}, {id: 3, text: '3'}]

方法二:JSON.stringify + new Set( ) + Array.from() + JSON.parse

使用Set数据结构去除重复对象,必须把对象转为string字符串形式,才可以实现对象去重,所以需要new Set(strings)进行转型。new Set去重对象 - 简书

因为Set数据结构并非真正的数组,它类似于数组,并且成员值都是唯一的,没有重复,所以可以用来做去重操作。但是因为它是一个类似数组结构,所以需要转型为真正的数组去使用。所以,需要用Array.from

const ary = [{id: 1, text: "1"}, {id: 1, text: "1"}, {id: 2, text: "2"}, {id: 3, text: "3"}];
const myseta = (ary) => {
  const strings = ary.map((item) => JSON.stringify(item))
  // 使用Set数据结构去重对象
  // return new Set(strings)

  // 使用Array.from()把Set数据结构去重对象后的结构,转为数组
  // return Array.from(new Set(strings))

  // 使用Array.from()转为数组,然后再使用数组的map方法把数组里面的字符串类型转化为对象类型:
  return Array.from(new Set(strings)).map((item) => JSON.parse(item))

};

// console.log(myseta(ary)); // Set(3) {'{"id":1,"text":"1"}', '{"id":2,"text":"2"}', '{"id":3,"text":"3"}'}
// console.log(myseta(ary)); // ['{"id":1,"text":"1"}', '{"id":2,"text":"2"}', '{"id":3,"text":"3"}']
console.log(myseta(ary)); // [{"id":1,"text":"1"}', '{"id":2,"text":"2"}', '{"id":3,"text":"3"}]

番外:JavaScript Array map() 方法

定义和用法

map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。

map() 方法按照原始数组元素顺序依次处理元素。

注意: map() 不会对空数组进行检测。

注意: map() 不会改变原始数组。


相关参考资料

new Set去重对象数组 - 简书 | Map 和 Set 的特点和区别 

JS中的Map数据结构 | new Set()的基础用法

在JavaScript中,可以使用Set对象来实现数组对象操作。Set是一种新的数据结构,类似于数组,但是可以复的值。但需要注意的是,对于存储引用类型的值,Set无法自动,因为相同的引用值在内存中的地址是不一样的。只有当引用值的地址完全相同才会被认为是复的。下面是一个例子: ```javascript var mySet = new Set(); mySet.add([-1, 0, 1]); mySet.add([-1, 0, 1]); mySet.add({a: 1}); mySet.add({a: 1}); console.log(Array.from(mySet)); ``` 输出结果为:[[-1, 0, 1], [-1, 0, 1], {a: 1}, {a: 1}],可以看到,数组对象复值并没有被自动。 如果想要对多维数组对象进行深层的操作,常见的方法是使用Set结合filter函数进行操作。但是需要注意的是,Set和filter只能对一维数组进行,无法进行深层的。如果需要对多维数组对象进行深层的,可以使用递归的方法判断是否为对象,如果是对象则继续递归判断其值是否为数组对象,以此类推。 总结来说,通过使用Set对象可以实现对数组对象操作,但对于存储引用类型的值需要注意地址的唯一性。如果需要对多维数组对象进行深层的操作,可以结合递归和判断值的类型来实现。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [new set数组对象失败](https://blog.csdn.net/qq_22182989/article/details/129386809)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [多维数组对象-深和深拷贝.js](https://download.csdn.net/download/weixin_44786867/12702478)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

儒雅的烤地瓜

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值