<返回更多

一文了解 JavaScript 中的 Set(集合)

2019-09-19    
加入收藏

 

在写 Chrome插件时「插件分享,头条文章代码高亮,助力程序员文章分享」,刚好用到 Set 这个数据结构,所以这期就来谈谈 Set。

什么是 Set(集合)

Set 是 ES6 中新增的一种对象类型,它存储的是唯一值的集合。

也就是说,即使 Set 中存入相同的元素,也只会被保留一个。

一文了解 JavaScript 中的 Set(集合)

 

Set 的创建

Set 的创建有两种方法。

1.创建空集后填充元素

一文了解 JavaScript 中的 Set(集合)

 

也可以使用链式写法

一文了解 JavaScript 中的 Set(集合)

 

2.Set 构造函数传入可迭代对象

一文了解 JavaScript 中的 Set(集合)

 

需要注意,当接收字符串作为可迭代对象时,是逐个字符进行迭代。

一文了解 JavaScript 中的 Set(集合)

 

确定 Set 的大小

通过 .size ——

一文了解 JavaScript 中的 Set(集合)

 

扩展一下,为什么不是使用常见的 length?

根据 ECMA-262 规范,数据集合(collection)的形式分为两大类:

像字符串、数组等属于索引集合。它们通过索引进行元素的访问。这种形式的集合使用 length 确定集合大小。

而像 Map(映射),Set(集合)等是属于键集合。它们通过键来进行元素的访问。这种形式的集合使用 size 来确定集合的大小。

Set 新增元素

通过 .add(),并且可以链式操作 ——

一文了解 JavaScript 中的 Set(集合)

 

Set 删除元素

通过 .delete() ——

一文了解 JavaScript 中的 Set(集合)

 

检查 Set 中是否存在某个元素

通过 .has() ——

一文了解 JavaScript 中的 Set(集合)

 

清空 Set 中元素

通过 .clear() ——

一文了解 JavaScript 中的 Set(集合)

 

Set 的迭代操作

Set 属于可迭代对象,迭代顺序是基于插入的顺序。所以,它也存在可迭代对象的一些方法。

1.遍历 Set

使用 .forEach()

一文了解 JavaScript 中的 Set(集合)

 

作为可迭代对象,也可以使用 for of 进行遍历

一文了解 JavaScript 中的 Set(集合)

 

2.迭代方法

根据 ECMA-262 定义,Set 的迭代过程类似于具有相同键值对的 Map。

For iteration purposes, a Set Appears similar to a Map where each entry has the same value for its key and value.

所以,Set 中的 .keys() 与 .values() 的 返回相同。均返回一个迭代器对象,包含 Set 中的按插入顺序排列的所有元素的值。

而键值对 .entries() 返回的迭代器对象,包含 Set 中的按插入顺序排列的所有元素的值的 [value, value] 数组。

一文了解 JavaScript 中的 Set(集合)

 

常用场景

数组去重

一文了解 JavaScript 中的 Set(集合)

 

除了这个使用场景外,日常中很少有使用 Set 的地方。

部分原因在于,与提供了很多内置方法的数组 Array 相比,Set 的内置方法还是偏少。例如:基本的交集,并集等操作都没有提供。

因此,下期我们就对 Set 进行一个扩展,手把手将它改造成更加实用的结构。不妨先收藏加关注。

声明:本站部分内容来自互联网,如有版权侵犯或其他问题请与我们联系,我们将立即删除或处理。
▍相关推荐
更多资讯 >>>