ES6系列之set & map

一时失言乱红尘 2023-02-23 08:04 12阅读 0赞

**回顾ES6系列：**  
[一、变量声明][Link 1]  
[二、解构赋值][Link 2]

es6还有两种数据结构：set和map。

注意哦，是数据结构，不是数据类型！就好比数组，json等。

## 一、关于Set ##

它类似于数组，但是其成员的值都是唯一的，没有重复的值（甚至在Set内部，NaN和NaN是相等的）

它在初始化的时候接受一个数组或者类数组作为参数，数组里的值将会做为set的成员：  
![在这里插入图片描述][20200706092400741.png]  
初始化之后我们就得到了一个set，和数组一样，set身上也有很多方法和属性。

我们都知道数组身上有一个属性length，用来获取数组的长度。

**set同样也有属性用于获取它里面数据的长度：**

“size” 通过s1.size就能得到它里面数据的长度了；

另外，set身上具有四个基本的方法，用于增删改查。

## 四个操作方法： ##

**add(value)：**

用于往set里面添加新的值，返回值是set结构本身。

**delete(value)：**

用于删除某个值，返回一个布尔值，表示删除是否成功。

**has(value)：**

返回一个布尔值，用于判断该值是否是set的成员。

**clear()：**

用于清除所有成员，没有返回值。

**先来说说add：**

add方法是用来往set结构里面添加值的，其返回值就是set结构本身，并且一次只能添加一个值：  
![在这里插入图片描述][20200706092503554.png]  
然后set结构也是可以遍历的，但是不能再简单的用for循环去进行遍历，而是要用forEach方法。

再然后就是用set的一些静态方法去进行遍历。

这个我们后面再说。

**最后，由于set方法里面不能存在相同的值；**

所以如果用add方法去添加一个set结构里面已经存在的值的话是没有作用的。

然后，和set非常相似的还有一个数据结构，叫weakset。

**weakset和set很相似，也是不重复的值的集合。**

**区别在于：**

WeakSet的成员只能是对象，而不能是其他类型的值。

WeakSet中的对象都是弱引用，即垃圾回收机制不考虑WeakSet对该对象的引用；

也就是说，如果其他对象都不再引用该对象，那么垃圾回收机制会自动回收该对象所占用的内存，不考虑该对象还存在于WeakSet之中。

这个特点意味着，无法引用WeakSet的成员，因此WeakSet是不可遍历的。

## 二、关于Map ##

Map结构提供了“值 —— 值”的对应，是一种更完善的结构实。

Map和Objeect类似，也是键值对的集合。

但是Map的键不再仅限于字符串，任何数据类型都可以作为Map结构的键名；

甚至Object都可以做为键名。

Map在初始化的时候，接收一个二维数组作为参数，二维数组里面的第一项和第二项将被作为一个键值对存入Map结构中。

其余项将被忽略掉，所以想要让Map出现多个键值对，就需要多个数组：  
![在这里插入图片描述][20200706092623338.png]  
通过以上代码可以看到，第一个数组中的第三，四项就被忽略了，并没有存入到Map结构中。

当然，想要往Map中添加数据，还有其他的方法；

*  set(‘key’,‘content’)：  
    用于往Map里面添加新的值，返回值是Map结构本身。
 *  get(‘key’)：  
    用于获取key对应的值，返回获取到的值
 *  has(‘key’)：  
    返回一个布尔值，用于判断该值是否是Map的成员。
 *  delete(‘key’)：  
    用于删除指定的键值，返回一个布尔值，用于表示删除是否成功
 *  clear()：  
    用于清除Map结构里的所有数据，没有返回值

![在这里插入图片描述][20200706092719127.png]  
刚才我们也说了，Map结构可以接收一个对象多为其键名，我们来看看操作：  
![在这里插入图片描述][20200706092725392.png]  
很明显，也是没有问题的，不过在这里要注意一点：

如果我们像上面这段代码这样操作的话，那么这里面的123我们将永远也拿不出来了，因为它没有任何变量指向这个对象。

**所以我们在用对象多为键名存数据的时候，一定要用变量名指向这个对象；**

然后通过这个变量名去获取到这个值：  
![在这里插入图片描述][20200706092734530.png]

--------------------

> 摘至开课吧前端团队，阅读后颇有收获分享至此，希望对大家有所帮助~

[Link 1]: https://blog.csdn.net/qq_30071415/article/details/107056443
[Link 2]: https://blog.csdn.net/qq_30071415/article/details/107057323
[20200706092400741.png]: https://img-blog.csdnimg.cn/20200706092400741.png
[20200706092503554.png]: https://img-blog.csdnimg.cn/20200706092503554.png
[20200706092623338.png]: https://img-blog.csdnimg.cn/20200706092623338.png
[20200706092719127.png]: https://img-blog.csdnimg.cn/20200706092719127.png
[20200706092725392.png]: https://img-blog.csdnimg.cn/20200706092725392.png
[20200706092734530.png]: https://img-blog.csdnimg.cn/20200706092734530.png