ES6--Set之再理解

Set

其实2016年就看过阮大神的ECMAScript 6 入门,当时看了Set之后,大致看懂了,但事实上根本没有理解Set到底是什么,所以更记不住,平时做项目大多用到的还是ES5的传统写法,以至于始终觉得Set很神秘。

上上周闲来无事,翻了翻《数据结构与算法JavaScript描述》,第9章讲的是集合,很好理解,跟高中数学课上学的集合差不多,可以存一些数据,但是集合中的每个元素都是唯一的(不重复),然后就是交集、并集、补集、全集、子集的一些概念,都很好理解。

今天又回过头来看阮神的ES6入门Set,突然恍然大悟!原来神秘的Set,其实就是集合而已!JS中也原生实现了这种数据结构!哈哈哈哈哈

知识点

下面简单梳理记录主要知识点,不完善之处后续慢慢补充。

  • Set类似于数组,其成员的值唯一
  • Set是一个构造函数,用来生成Set数据结构。就像Array是个构造函数一样
  • Set函数可以接受具有iterable接口的其他数据结构作为参数,用来初始化
  • 在Set内部,两个NaN是相等的,不能重复add
  • 向Set加入值的时候,不会进行类型转换,所以5"5"是两个不同的值。

PS:
Set 内部判断两个值是否不同,使用的算法叫做“Same-value-zero equality”,它类似于精确相等运算符(===),主要的区别是NaN等于自身,而精确相等运算符认为NaN不等于自身。

初始化Set的一些代码示例

// 示例一
const set = new Set([1, 2, 3, 2, 4, 5, 3, 4, 6]);
[...set]
// [1, 2, 3, 4, 5, 6]

// 示例二
const set = new Set(document.querySelectorAll('div'));
set.size // 11

// 类似于
const set = new Set();
document.querySelectorAll('div').forEach(div => set.add(div));
set.size // 11

// 数组去重
[...new Set([3, 2, 5, 3, 1, 6, 2, 7])]  // [3, 2, 5, 1, 6, 7]

Set 实例的属性和方法

属性:

  • Set.prototype.constructor:构造函数,默认就是Set函数
  • Set.prototype.size:返回Set实例的成员总数

猜你喜欢

转载自www.cnblogs.com/clover77/p/9257191.html
今日推荐