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实例的成员总数

操作方法(用于操作数据):

  • add(value):添加某个值,返回Set结构本身
  • delete(value):删除某个值,返回一个布尔值,表述删除是否成功
  • has(value):返回一个布尔值,表示该值是否为Set的成员
  • clear():清除所有成员,没有返回值

代码示例如下:

let s = new Set();
s.add(1).add(1).add(2).add(3); 

s.size; // 3

s.has(1) // true
s.has(2) // true
s.has(4) // false

s.delete(2) // true

s.clear()

ps: Array.from方法可以将Set 结构转为数组(Array.from方法用于将两类对象转为真正的数组:类数组对象和可遍历对象)

实现数组去重

function dedupe(array) {
    return Array.from(new Set(array))
}

遍历方法(用于遍历成员):

  • keys():返回键名的遍历器
  • values():返回键值的遍历器
  • entries():返回键值对的遍历器
  • forEach():使用回调函数遍历每个成员
    PS:Set 的遍历顺序就是插入顺序。这个特性有时非常游泳,比如使用Set保存一个回调函数列表,调用时就能保证按照添加顺序调用。

未完待续。。。。。。

原文地址:https://www.cnblogs.com/clover77/p/9257191.html