很多朋友对于深入浅出ES6——全面解析Set数据结构和不太懂,今天就由小编来为大家分享,希望可以帮助到大家,下面一起来看看吧!
const list=[" { name: "张三",age: 18, address: "北京" }"," { name: "张三",age: 18, address: "北京" }"]
console.log("Deduplication",new Set(list))//{" { name: "张三",age: 18, address: "北京" }"}如果不是字符串类型,而是对象,则不会进行重复数据删除:
//new Set()中需要连接的是strings类型
const list=[{ name: "张三",age: 18,address: "北京" },{ name: "张三",age: 18, address: "北京" }]
Console.log("remove重复", new Set(list)) 解决方案:因为数组中有对象,所以我们首先使用map和JSON.stringify将其转换为字符串类型。
常量列表=[
{ name: "张三",age: 18, address: "北京" },
{ name: "李思",age: 20, address: "天津" },
{ name: "张三",age: 18, address: "北京" },
]
const strings=list.map((item)=JSON.stringify(item))
console.log("strings", strings) //["{"name":"张三","age":18,"地址":"北京"}", "{"name":"李思", "age":20,"address":"天津"}", "{"name":"张三","age":18,"address":"北京"}"] 然后,可以使用new 设置为数组经过重复数据删除,然后使用Array.from 转换为真正的数组。
当您打印出来时,重复项将被删除。
const removeDupList=Array.from(new Set(strings))
console.log("removeDupList",removeDupList)//["{"name":"张三","age":18,"地址":"北京"}", "{"name":"李思", "age":20,"address":"天津"}"]然后将数组中的字符串类型转换为对象类型:
const removeDupList=Array.from(new Set(strings))
const 结果=removeDupList.map((item)=JSON.parse(item))
console.log("result",typeof result) ////[{name: "张三",age: 18,address: "北京"}, {name: "李思",age: 20,address: "天津"}]const list=[
{ name: "张三",age: 18, address: "北京" },
{ name: "李思",age: 20, address: "天津" },
{ name: "张三",age: 18, address: "北京" },
]
const strings=list.map((item)=JSON.stringify(item)) //1. 转换为字符串类型
const removeDupList=Array.from(new Set(strings)) //2. 转换为真正的数组
const result=removeDupList.map((item)=JSON.parse(item)) //3. 将字符串类型转换为对象类型
console.log("数组去重",result) //[{name: "张三",age: 18,address:"北京"}, {name:"李四",age: 20,address:"天津"}]
Set 对象方法
add添加一个值并返回Set 对象本身。
clear 删除所有键/值对并且不返回任何值。
delete 删除一个键并返回true。如果删除失败,则返回false。
forEach 对每个元素执行指定的操作。
has 返回一个布尔值,指示某个键是否在当前Set 对象中。
增删改查方法
1.添加元素add
添加某个值并返回Set 结构本身。当添加实例中已经存在的元素时,集合不会处理添加。
让列表=新集合();
列表.add(1)
列表.add(2).add(3).add(3)
//Set(3) {1, 2, 3} 3只添加一次
2.删除元素 delete
删除一个值,返回一个布尔值,表示删除是否成功
让列表=新集合([1,20,30,40])
list.delete(30) //删除值为30的元素,这里的30不是下标
console.log(list) //Set(3) {1, 20, 40}
3.判断某元素是否存在has
返回一个布尔值,判断该值是否是Set 的成员
让列表=新集合([1,2,3,4])
console.log(list.has(2)) //true
4 清除所有元素clear
清除所有成员,无返回值
让列表=新集合([1,2,3,4])
列表.clear()
console.log(list) //Set(0) {size: 0}
3、遍历方法
3.1 遍历keys()
返回键名遍历器,相当于返回键值遍历器values()
let list=new Set(["a","b","c"])
for(let key of list.keys()){
console.log(key) //"a","b","c"
}
3.2 遍历 values()
返回键值的遍历器
let list=new Set(["a","b","c"])
for(让list.values() 的值){
console.log(value) //"a","b","c"
}
3.3 遍历 entries()
返回键值对的遍历器
let list=new Set(["4","5","你好"])
for (let item of list.entries()) {
控制台.log(项目);
//["4","4"] ["5","5"] ["你好","你好"]
}
3.3 遍历 forEach()
使用回调函数遍历各个成员
let list=new Set(["4","5","你好"])
list.forEach((value, key)=console.log(key + ":" + value)) //4:4 5:5 hello:hello
4、使用情形
4.1 用于数组去重
var arr=[1,2,3,3,1,4] ;
[.新集(arr)]; //[1, 2, 3, 4]
Array.from(new Set(arr)); //[1, 2, 3, 4]
[.new Set("ababbc")].join(""); //"abc" 字符串去重
new Set("冰甜甜圈"); //Set(11) {"i", "c", "e", " ", "d", …}let arr=[3, 5, 2, 2, 5 , 5];
让setArr=new Set(arr)
console.log(setArr); //返回集合数据结构Set(3) {3, 5, 2}
//方法1 es6.解构
让unique1=[.setArr ];
控制台.log(unique1); //去重后数组[3,5,2]
//方法2 Array.from()将类数组解析为数组
让unique2=Array.from(setArr)
控制台.log(unique2); //去重后数组[3,5,2]
4.2 用于字符串去重
let str="352255";
let unique=[.new Set(str)].join("");
控制台.log(唯一); //352
4.3 实现并集、交集和差集
let a=new Set([1, 2, 3]);
让b=new Set([4, 3, 2]);
//联盟
让union=new Set([.a,b]);
控制台.log(联合); //设置(4) {1, 2, 3, 4}
//交集
让intersect=new Set([.a].filter(x=b.has(x)));
控制台.log(相交); //设置(2) {2, 3}
//差异(a 相对于b)
【深入浅出ES6——全面解析Set数据结构】相关文章:
2.米颠拜石
3.王羲之临池学书
8.郑板桥轶事十则
用户评论
终于可以摆脱那些重复数据的烦恼了!Set 的出现就是为了解决这个问题。
有13位网友表示赞同!
学习 Python 时就接触过 Set,这个 JavaScript 的新特性真的太有用啦。
有14位网友表示赞同!
之前一直不知道怎么用 Set 去处理集合里的数据,这篇文章应该能把我解放出来。
有16位网友表示赞同!
最近在做一些涉及去重复操作的项目,这篇博客正好可以帮到我!
有7位网友表示赞同!
希望这篇文章能详细讲解 Set 的操作方法,比如添加元素、删除元素等等。
有6位网友表示赞同!
Set 能直接用来存取数据,不用像数组一样担心索引问题。好方便!
有5位网友表示赞同!
感觉 ES6 带来的更新功能越来越强大,现在学习 JavaScript 也更加有趣了。
有20位网友表示赞同!
看标题就知道这篇文章要讲解 Set 的基本概念,应该是非常入门级的介绍。
有8位网友表示赞同!
之前用过 Set ,不过想学习更深入的用法,这篇博客可能会提供一些启发。
有18位网友表示赞同!
Set 与数组的区别是什么呢?期待文章能详细分析他们的优缺点。
有8位网友表示赞同!
看视频讲解比文字解释更容易理解,希望这篇文章有图解或者示例代码。
有8位网友表示赞同!
终于有机会了解一下 Set 能做哪些特别的事情,以前只知道存取数据。
有10位网友表示赞同!
如果能详细介绍一些应用场景,会更有帮助。比如 Set 在哪些领域会被使用?
有5位网友表示赞同!
对于新手来说,这篇文章会是一个很好的入门指南,可以先了解一下基础概念。
有8位网友表示赞同!
Set 的性能怎么样呢?期待文章对比它和数组的效率差异。
有18位网友表示赞同!
学习新知识需要不断实践,希望这篇文章能提供一些练习题或代码示例。
有13位网友表示赞同!
期待作者能够讲明白 Set 的核心原理,以及如何更好地应用于编程中。
有17位网友表示赞同!
文章标题很吸引人,看来是一个比较实用的入门指南。
有17位网友表示赞同!