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

相关文章
|
20天前
|
JavaScript 前端开发 索引
问js的forEach和map的区别
JavaScript中的`forEach`和`map`都是数组迭代方法。`forEach`遍历数组但不修改原数组,无返回值;它接受回调函数处理元素。`map`则遍历数组并返回新数组,新数组元素为回调函数处理后的结果。两者都接收元素、索引和数组作为回调函数参数。
20 7
|
1月前
|
缓存 JavaScript 数据安全/隐私保护
js开发:请解释什么是ES6的Proxy,以及它的用途。
`ES6`的`Proxy`对象用于创建一个代理,能拦截并自定义目标对象的访问和操作,应用于数据绑定、访问控制、函数调用的拦截与修改以及异步操作处理。
17 3
|
1月前
|
JavaScript
js开发:请解释什么是ES6的类(class),并说明它与传统构造函数的区别。
ES6的类提供了一种更简洁的面向对象编程方式,对比传统的构造函数,具有更好的可读性和可维护性。类使用`class`定义,`constructor`定义构造方法,`extends`实现继承,并可直接定义静态方法。示例展示了如何创建`Person`类、`Student`子类以及它们的方法调用。
22 2
|
1月前
|
自然语言处理 JavaScript 网络架构
js开发:请解释什么是ES6的箭头函数,以及它与传统函数的区别。
ES6的箭头函数以`=&gt;`定义,简化了函数写法,具有简洁语法和词法作用域的`this`。它无`arguments`对象,不能用作构造函数,不支持`Generator`,且不改变`this`、`super`、`new.target`绑定。适用于简短表达式,常用于异步编程和高阶函数。
18 5
|
1月前
|
JavaScript 前端开发
解释 JavaScript 中的`map()`、`filter()`和`reduce()`方法的用途。
解释 JavaScript 中的`map()`、`filter()`和`reduce()`方法的用途。
19 1
|
1月前
|
前端开发 JavaScript 开发者
探索JavaScript ES6的八种常见使用技巧:开启现代编程之旅
探索JavaScript ES6的八种常见使用技巧:开启现代编程之旅
|
1天前
|
存储 JavaScript 索引
js开发:请解释什么是ES6的Map和Set,以及它们与普通对象和数组的区别。
ES6引入了Map和Set数据结构。Map的键可以是任意类型且有序,与对象的字符串或符号键不同;Set存储唯一值,无重复。两者皆可迭代,支持for...of循环。Map有get、set、has、delete等方法,Set有add、delete、has方法。示例展示了Map和Set的基本操作。
12 3
|
1天前
|
JavaScript 前端开发
js开发:请解释什么是ES6的Generator函数,以及它的用途。
ES6的Generator函数是暂停/恢复功能的特殊函数,利用yield返回多个值,适用于异步编程和流处理,解决了回调地狱问题。例如,一个简单的Generator函数可以这样表示: ```javascript function* generator() { yield &#39;Hello&#39;; yield &#39;World&#39;; } ``` 创建实例后,通过`.next()`逐次输出&quot;Hello&quot;和&quot;World&quot;,展示其暂停和恢复的特性。
10 0
|
1月前
|
JavaScript 前端开发
js开发:请解释什么是ES6的async/await,以及它如何解决回调地狱问题。
ES6的`async/await`是基于Promise的异步编程工具,能以同步风格编写异步代码,提高代码可读性。它缓解了回调地狱问题,通过将异步操作封装为Promise,避免回调嵌套。错误处理更直观,类似同步的try...catch。