ES6--》JS中Set 和 Map数据结构

简介: 对ES6中Set 和 Map 数据结构讲解

Set

ES6提供了新的数据结构 Set(集合)。它类似于数组,但成员的值都是唯一的,集合实现了iterator接口,所以可以使用 [扩展运算符] 和 [for...of] 进行遍历。

基本使用

添加新的元素

Set函数可以接受一个数组(或者具有iterable接口的其他数据结构)作为参数,用来初始化。

<script>// 声明一个 setlets=newSet([1,2,2,3,4,4,5]) //Set方法会自动去重// 添加新的元素console.log(s.add(6));
</script>

图片.png

删除元素

<script>// 声明一个 setlets=newSet([1,2,2,3,4,4,5]) //Set方法会自动去重// 删除元素s.delete(1)
console.log(s);
</script>

数组去重

<script>letarr= [1,2,2,3,4,4,5,6]
letresult= [...newSet(arr)]
console.log(result);// [1, 2, 3, 4, 5, 6]</script>

检测

<script>// 声明一个 setlets=newSet([1,2,2,3,4,4,5]) //Set方法会自动去重// 检测console.log(s.has(2));//true</script>

清空

<script>// 声明一个 setlets=newSet([1,2,2,3,4,4,5]) //Set方法会自动去重// 清空console.log(s.clear());//undefined</script>

遍历

<script>// 声明一个 setlets=newSet([1,2,2,3,4,4,5]) //Set方法会自动去重// 遍历for(letvofs){
console.log(v);//1,2,3,4,5    }
</script>

交集

<script>letarr= [1,2,3,4,4,5,4,3,1,2,6]
letarr2= [3,4,5,1,4,7,8]
// 先去重,避免重复数字比较降低效率letresult= [...newSet(arr)].filter(item=>{
// 对arr2进行去重letnewarr2=newSet(arr2)
if(newarr2.has(item)){
returntrue        }else{
returnfalse        }
    })
// 简写形式// let result = [...new Set(arr)].filter(item=>new Set(arr2).has(item)) console.log(result);//[1, 3, 4, 5]</script>

并集

<script>letarr= [1,2,3,4,4,5,4,3,1,2,6]
letarr2= [3,4,5,1,4,7,8]
letunion= [...newSet([...arr,...arr2])]
console.log(union);
</script>

差集

<script>letarr= [1,2,3,4,4,5,4,3,1,2,6]
letarr2= [3,4,5,1,4,7,8]
// 差集是交集的逆运算,主体的不同决定结果的不同letdiff= [...newSet(arr)].filter(item=>!(newSet(arr2).has(item)))
console.log(diff);//[2, 6]</script>

遍历操作

Set数据结构提供了四种遍历方法,用于遍历成员。

keys()、values()

由于 Set 结构键名和键值是同一个值,所以 keys 方法和 values 方法的行为完全一致,都是返回键名/值 。

<script>letset=newSet(['red', 'green', 'blue',1]);
for (varitemofset.keys()) {
console.log(item);
    }
for (varitem1ofset.values()) {
console.log(item1);
    }
console.log(item===item1);//true</script>

entries()

entries方法返回的结果包括键名和键值,所以输出的数组,其键名和键值完全相等。

<script>letset=newSet(['red', 'green', 'blue',1]);
for (varitemofset.entries()) {
console.log(item);
    }
</script>

图片.png

forEach()

forEach()方法用于对每个成员执行某种操作,该方法参数就是一个处理函数,该函数的参数与数组的forEach一致。

<script>letset=newSet(['red', 'green', 'blue',1]);
set.forEach((value,key)=>console.log(key+':'+value))
</script>

图片.png

Map

ES6提供了 Map 数据结构,它类似于对象,也是键值对的集合。但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。Map也实现了 iterator 接口,所以可以使用 [扩展运算符] 和 [for...of] 进行遍历。

基本使用

添加元素

<script>// 声明 Mapletm=newMap()
// 添加元素m.set('world',4)
m.set('hello',function(){
console.log('abc');
    })
letperson= {
name:'张三'    }
m.set(person,[5,6,7])
console.log(m);
</script>

因为为Map添加了三次元素,所以Map的长度为3。

图片.png

删除元素

<script>// 声明 Mapletm=newMap()
letperson=function(){
console.log('hello world');
    }
m.set(person,'HELLO WPRLD')
m.set('people',[1,2,3])
console.log(m);//Map(2)// 删除元素m.delete('people')
console.log(m);//Map(1)</script>

获取元素

get方法获取key对应的键值,如果找不到key,返回undefned。

<script>// 声明 Mapletm=newMap()
// 获取元素letperson=function(){
console.log('hello world');
    }
m.set(person,'HELLO WPRLD')
console.log(m.get(person))//HELLO WPRLD</script>

检测元素

has方法返回一个布尔值,用来检测某个值是否在当前 Map 对象中。

<script>// 声明 Mapletm=newMap()
m.set('a',1)
m.set(2,'b')
m.set('c',3)
// 检测键名是否存在console.log(m.has(1));//falseconsole.log(m.has(2));//true</script>

清除元素

clear方法清除所有元素,没有返回值。

<script>// 声明 Mapletm=newMap()
m.set('a',1)
m.set(2,'b')
m.set('c',3)
// 清除所有m.clear()
console.log(m);//Map(0)</script>

Map的遍历操作和上文的Set方法一致,这里不再讲解。

相关文章
|
2月前
|
存储 JavaScript Java
(Python基础)新时代语言!一起学习Python吧!(四):dict字典和set类型;切片类型、列表生成式;map和reduce迭代器;filter过滤函数、sorted排序函数;lambda函数
dict字典 Python内置了字典:dict的支持,dict全称dictionary,在其他语言中也称为map,使用键-值(key-value)存储,具有极快的查找速度。 我们可以通过声明JS对象一样的方式声明dict
199 1
|
5月前
|
存储 缓存 JavaScript
Set和Map有什么区别?
Set和Map有什么区别?
439 1
|
2月前
|
存储 算法 容器
set_map的实现+set/map加持秒杀高频算法题锻炼算法思维
`set`基于红黑树实现,支持有序存储、自动去重,增删查效率为O(logN)。通过仿函数可自定义排序规则,配合空间配置器灵活管理内存。不支持修改元素值,迭代器失效需注意。`multiset`允许重复元素。常用于去重、排序及查找场景。
|
6月前
|
存储 JavaScript 前端开发
for...of循环在遍历Set和Map时的注意事项有哪些?
for...of循环在遍历Set和Map时的注意事项有哪些?
334 121
|
9月前
|
编译器 C++ 容器
【c++丨STL】基于红黑树模拟实现set和map(附源码)
本文基于红黑树的实现,模拟了STL中的`set`和`map`容器。通过封装同一棵红黑树并进行适配修改,实现了两种容器的功能。主要步骤包括:1) 修改红黑树节点结构以支持不同数据类型;2) 使用仿函数适配键值比较逻辑;3) 实现双向迭代器支持遍历操作;4) 封装`insert`、`find`等接口,并为`map`实现`operator[]`。最终,通过测试代码验证了功能的正确性。此实现减少了代码冗余,展示了模板与仿函数的强大灵活性。
264 2
|
6月前
|
存储 C++ 容器
unordered_set、unordered_multiset、unordered_map、unordered_multimap的介绍及使用
unordered_set是不按特定顺序存储键值的关联式容器,其允许通过键值快速的索引到对应的元素。在unordered_set中,元素的值同时也是唯一地标识它的key。在内部,unordered_set中的元素没有按照任何特定的顺序排序,为了能在常数范围内找到指定的key,unordered_set将相同哈希值的键值放在相同的桶中。unordered_set容器通过key访问单个元素要比set快,但它通常在遍历元素子集的范围迭代方面效率较低。它的迭代器至少是前向迭代器。前向迭代器的特性。
286 0
|
6月前
|
编译器 C++ 容器
用一棵红黑树同时封装出map和set
再完成上面的代码后,我们的底层代码已经完成了,这时候已经是一个底层STL的红黑树了,已经已符合库里面的要求了,这时候我们是需要给他穿上对应的“衣服”,比如穿上set的“衣服”,那么这个穿上set的“衣服”,那么他就符合库里面set的要求了,同样map一样,这时候我们就需要实现set与map了。因此,上层容器map需要向底层红黑树提供一个仿函数,用于获取T当中的键值Key,这样一来,当底层红黑树当中需要比较两个结点的键值时,就可以通过这个仿函数来获取T当中的键值了。我们就可以使用仿函数了。
84 0
|
6月前
|
存储 编译器 容器
set、map、multiset、multimap的介绍及使用以及区别,注意事项
set是按照一定次序存储元素的容器,使用set的迭代器遍历set中的元素,可以得到有序序列。set当中存储元素的value都是唯一的,不可以重复,因此可以使用set进行去重。set默认是升序的,但是其内部默认不是按照大于比较,而是按照小于比较。set中的元素不能被修改,因为set在底层是用二叉搜索树来实现的,若是对二叉搜索树当中某个结点的值进行了修改,那么这棵树将不再是二叉搜索树。
252 0
|
9月前
|
JavaScript 前端开发 网络架构
ES6解构赋值详解;全面掌握:JavaScript解构赋值的终极指南
解构赋值是一个强大且灵活的工具,它使得从数组和对象中提取数据变得更加简单和直观。通过掌握解构赋值的基本语法和实践,你可以写出更加简洁、可读性更强的代码。在实际项目中,解构赋值广泛应用于函数参数处理、变量交换、嵌套结构操作等场景,极大地提升了代码的灵活性和简洁度。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~

热门文章

最新文章