龙空技术网

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

前端面试题 242

前言:

现时姐妹们对“js的set”大概比较关切,你们都需要学习一些“js的set”的相关文章。那么小编同时在网摘上搜集了一些对于“js的set””的相关文章,希望大家能喜欢,同学们一起来学习一下吧!

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

什么是 Set(集合)

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

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

Set 的创建

Set 的创建有两种方法。

1.创建空集后填充元素

也可以使用链式写法

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

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

确定 Set 的大小

通过 .size ——

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

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

Indexed Collection(索引集合)Keyed Collection(键集合)

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

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

Set 新增元素

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

Set 删除元素

通过 .delete() ——

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

通过 .has() ——

清空 Set 中元素

通过 .clear() ——

Set 的迭代操作

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

1.遍历 Set

使用 .forEach()

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

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] 数组。

常用场景

数组去重

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

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

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

标签: #js的set