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方法一致,这里不再讲解。

相关文章
|
23天前
|
算法
你对Collection中Set、List、Map理解?
你对Collection中Set、List、Map理解?
57 18
你对Collection中Set、List、Map理解?
|
17天前
|
存储 缓存 安全
只会“有序无序”?面试官嫌弃的List、Set、Map回答!
小米,一位热衷于技术分享的程序员,通过与朋友小林的对话,详细解析了Java面试中常见的List、Set、Map三者之间的区别,不仅涵盖了它们的基本特性,还深入探讨了各自的实现原理及应用场景,帮助面试者更好地准备相关问题。
54 20
|
1月前
|
存储 C++ 容器
【C++】map、set基本用法
本文介绍了C++ STL中的`map`和`set`两种关联容器。`map`用于存储键值对,每个键唯一;而`set`存储唯一元素,不包含值。两者均基于红黑树实现,支持高效的查找、插入和删除操作。文中详细列举了它们的构造方法、迭代器、容量检查、元素修改等常用接口,并简要对比了`map`与`set`的主要差异。此外,还介绍了允许重复元素的`multiset`和`multimap`。
33 3
【C++】map、set基本用法
|
1月前
|
存储 算法 C++
【C++】unordered_map(set)
C++中的`unordered`容器(如`std::unordered_set`、`std::unordered_map`)基于哈希表实现,提供高效的查找、插入和删除操作。哈希表通过哈希函数将元素映射到特定的“桶”中,每个桶可存储一个或多个元素,以处理哈希冲突。主要组成部分包括哈希表、哈希函数、冲突处理机制、负载因子和再散列,以及迭代器。哈希函数用于计算元素的哈希值,冲突通过开链法解决,负载因子控制哈希表的扩展。迭代器支持遍历容器中的元素。`unordered_map`和`unordered_set`的插入、查找和删除操作在理想情况下时间复杂度为O(1),但在冲突较多时可能退化为O(n)。
23 5
|
1月前
|
JavaScript 前端开发 安全
ECMAScript 6(以下简称 ES6)的出现为 JavaScript 带来了许多新的特性和改进,其中 let 和 const 是两个非常重要的关键字。
ES6 引入了 `let` 和 `const` 关键字,为 JavaScript 的变量管理带来了革新。`let` 提供了块级作用域和暂存死区特性,避免变量污染,增强代码可读性和安全性;`const` 用于声明不可重新赋值的常量,但允许对象和数组的内部修改。两者在循环、函数内部及复杂项目中广泛应用,有助于实现不可变数据结构,提升代码质量。
29 5
|
1月前
|
开发者
除了交集运算,Set 类型还可以用于哪些数据结构的操作?
【10月更文挑战第30天】`Set`类型在数据结构操作方面提供了丰富的功能和便利,能够帮助开发者更高效地处理各种数据集合相关的任务,提高代码的简洁性和性能。
|
1月前
|
前端开发 JavaScript
JavaScript新纪元:ES6+特性深度解析与实战应用
【10月更文挑战第29天】本文深入解析ES6+的核心特性,包括箭头函数、模板字符串、解构赋值、Promise、模块化和类等,结合实战应用,展示如何利用这些新特性编写更加高效和优雅的代码。
49 0
|
存储 JavaScript 前端开发
JavaScript中的Set数据操作:交集、差集、交集、对称差集
在许多情况下,需要比较多个列表,获取它们有或没有交集、差集等等,在 Javascript 有一个数据类型可以很好的实现这些需求,那就是 Set 。
374 0
|
1月前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
30 1
JavaScript中的原型 保姆级文章一文搞懂
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
110 2