JavaScript Set 集合

发布于 2022-01-18 22:46:19 字数 3131 浏览 1018 评论 0

集合对象类似于以前 JavaScript 中的数组,只是集合对象中不能存在相同的对象。

集合的初始化

集合对象是通过构造函数进行初始化的,调用格式有2种

不传参数给构造函数,这将创建一个空的集合对象

var sampleSet = new Set();
console.log(sampleSet.size); //will output 0

传递一个数组对象给构造函数,将创建一个包含这个数组中不重复内容的集合

var sampleSet = new Set([1,2,3,4,5,5,6]);
console.log(sampleSet.size);//will output 6
console.log(sampleSet);//will ouput Set {1,2,3,4,5,6}

向集合添加内容

可以通过使用集合对象的 add 方法向已经创建的集合添加新的内容

var sampleSet = new Set();
sampleSet.add(2);
sampleSet.add('2');
console.log(sampleSet.size); //will output 2
console.log(sampleSet); //will output Set { 2, '2' }

//例子2
var sampleSet = new Set();
sampleSet.add(NaN);
sampleSet.add(NaN);
console.log(sampleSet); //will output Set { NaN }

从上面程序的输出,可以看出

  • 集合可以保存不同类型的数据
  • 在向集合添加数据的时候,JavaScript 并不进行数据转化。因此2和'2'是不一样的
  • 对集合对象来说,所有的NaN都是一样的

向集合添加对象

我们之所以将向集合添加对象单独出来解释,是因为对对象是否相同的判断和普通对象不一样。下面是几个例子。

//例子1
var sampleSet = new Set();
var a = {};
var a1 = a;
//因为a和a1在底层指向的是同一个内存对象,所以a === a1
sampleSet.add(a);
sampleSet.add(a1);
console.log(sampleSet); //will output Set { {} }

//例子2
var sampleSet = new Set();
var a = {};
var a1 = {};
//因为a和a1在底层指向的是不同的内存对象,所以a != a1
sampleSet.add(a);
sampleSet.add(a1);
console.log(sampleSet); //will output Set Set { {}, {} }

集合的其他操作

除了向已经存在的集合添加内容,你还可以通过集合的成员函数实施下面的操作

  • 删除内容,通过 delete(value) 来删除集合中的某个内容
  • 判断集合是否包含内容,通过 has(value) 来判断集合中是否包含参数所指定的内容
  • 清除所有内容,通过 clear() 你可以删除一个集合中的所有内容

集合对象的遍历

遍历集合对象最简单的方法就是遍历 values() 方法的返回值,下面是一个具体的例子

'use strict';
var sampleSet = new Set([1,2,3,4,5]);
//output is
//1
//2
//3
//4
//5
for (let val of sampleSet.values()){
  console.log(val);
}

遍历集合的第二个方法是条用 forEach 函数完成,下面是具体的例子。对于这个例子,大家一定很奇怪,为什么 forEach 接受的函数的参数是 2 个。对于这点我一开始也觉得很奇怪,在看了相关的文档才明白,实际上对于集合中的每个元素,都有2个属性与之绑定(Key 和 value),只不过他们完全相同而已,我个人估计是为了和映射对象保持类似的结构,从而简化 JavaScript 引擎而这么做的。

var sampleSet = new Set([1,2,3,4,5]);
//output is
//1
//2
//3
//4
//5
//实际上你用console.log(key)也会得到完全一样的结果
sampleSet.forEach((value, key) => {console.log(value);});

弱集合

弱集合对象和普通的集合对象有着下面这些不同点:

  • 弱集合对象只能保存对象,不能保存普通数据
  • 弱集合对象对另外一个对象的引用,并不影响垃圾回收器的工作。换句话说,如果一个弱集合 set 包含一个对象 a 的引用,如果在运行过程中,除了这个应用,没有任何其他地方应用a这个对象了,那么垃圾回收器将回收 a
  • 弱集合对象没有 size 属性,也不能进行遍历。不能进行遍历的原因就是因为第二点。因为在遍历的过程中,集合中的对象随时可能被垃圾回收器给回收。

可以执行的操作

根据上面的描述,对弱集合对象可以进行的操作仅限于。

  • 增加成员,使用 add() 方法增加成员
  • 删除成员, 使用 delete() 方法删除成员
  • 判断成员是否在集合,使用 has() 方法判断一个成员是否存在

弱集合的使用

弱集合的一个使用场合是你需要操作 DOM 的一个集合,但是你不想因为集合拥有对 DOM 对象的引用而阻止对 DOM 对象的自动销毁。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84960 人气
更多

推荐作者

lorenzathorton8

文章 0 评论 0

Zero

文章 0 评论 0

萧瑟寒风

文章 0 评论 0

mylayout

文章 0 评论 0

tkewei

文章 0 评论 0

17818769742

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文