ECMAScript 6（16）Set 和 WeakSet

以你之姓@ 2021-09-19 15:56 367阅读 0赞

**目录**

1.  Set

1.1  什么是 Set

1.2  创建

1.3  Set 实例的属性和方法

方法使用一览

1.4  遍历

2.  WeakSet

2.1  简述

2.2  使用

2.3  方法

--------------------

**简述 :**

1.  Set类型一种新的数据结构
2.  类似于数组 , 但是成员的值都是唯一的, 没有重复 (根据这个特性,可实现快速的数组去重, NaN也可以去重)
3.  Set 中两个空对象是不相等的, 因为引用地址不一样.

## 1.  Set ##

### 1.1  什么是 Set  ###

简单来说,  Set 可以说是一种数据结构, 但不是数据类型

new Set([iterable])
    
    //参数接受 一个数组（或者具有 iterable 接口的其他数据结构）

**特点 : **

1.  类似数组
2.  **成员唯一性 (快速去重)**
3.  没有键名，只有键值（或者说键名和键值是同一个值）,可以直接 for ... of 循环遍历
4.  只能通过内置方法, 增删元素
5.  可以用数组来初始化自己
6.  可以查看数组是否存在某个值
7.  可以利用Array.from()来将其转为数组 (自测扩展符也可以)

参数 :

首先，参数只允许使用以下几种：

1.  undefined：当作为传参处理；
2.  null：当作未传参处理；
3.  数组：数组的元素，会被依次添加到Set变量中，作为Set的元素
4.  字符串：会被解析成单个的字符串,并去重；

另外参数不能是 **number，object，symbol**，会报错。

### 1.2  创建 ###

let foo = new Set();    //空的Set
    let bar = new Set([1, 2]);    //用数组初始化一个Set，内有2个元素，分别是数字1和2
    let bor = new Set([1, 2, 3, 4, 5, 5, 5, 5]);  
    items.size // 5 自动去重

数组去重

// 去除数组的重复成员
    [...new Set(array)]
    // 或者
    Array.from(new Set(array))

字符串去重

[...new Set('ababbc')].join('')

### 1.3  Set 实例的属性和方法 ###

科普一个小习惯 :

谷歌浏览器控制台输入方法, 所有属性和方法都可以看到

不用刻意去记,  平时忘记了, 打开输入方法和实例就可以查看

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5kYW4xMTI3_size_16_color_FFFFFF_t_70][]

###  方法使用一览 ###

*  `Set.prototype.constructor`：构造函数，默认就是`Set`函数。
 *  `Set.prototype.size`：返回`Set`实例的成员总数。
 *  `add(value)`：添加某个值，返回 Set 结构本身。
 *  `delete(value)`：删除某个值，返回一个布尔值，表示删除是否成功。
 *  `has(value)`：返回一个布尔值，表示该值是否为`Set`的成员。
 *  `clear()`：清除所有成员，没有返回值。
 *  `forEach()`：与数组用法的用法一样,但是 key 和 value 值是一样的。

let set = new Set([1,2])
    
    set.size  // 2  
    
    set.add(3)  // 添加值
    set.size  // 3
    
    
    set.delete(1)  // 删除值
    set.size  // 2
    
    set.has(3)  // true 拥有某值
    set.has(1)  // false
    
    set.clear() // Set(0) {} 清空

###  1.4  遍历 ###

let set = new Set()
    set.keys()
    set.values()
    set.entries()

> 1. 返回的都是一个遍历器对象（Iterator对象）。通过这个遍历器对象，可以依次访问Set类型变量的每个元素。
> 
> 2. 遍历器对象不是数组，因此不能通过数组的下标那种方式来访问。
> 
> 3. 对于Set类型变量来说，key就是value，value就是key，所以前两个方法获取的结果可以认为是一样的（虽然显然返回的
> 
> 两个对象他们并不相等）。

利用 let…of 直接遍历set类型对象 (for ... in 无效)

let set = new Set(['red', 'green', 'blue']);
    for (let item of set) {
        console.log(item);
    }
    //red
    //green
    //blue

**当转为数组后：**

1.  当将Set转为数组后，就可以使用数组的各种API对其进行操作了；
2.  而数组可以作为初始化Set类型对象的参数；
3.  因此如果操作比较复杂的话，可以将其先转为数组，修改完毕后再通过new Set()重新转为Set类型对象；

let set = new Set([1, 2, 3]);
    set = new Set([...set].map(x => x * 2));
    // 返回Set结构：{2, 4, 6}
    
    let set = new Set([1, 2, 3, 4, 5]);
    set = new Set([...set].filter(x => (x % 2) == 0));
    // 返回Set结构：{2, 4}

## 2.  WeakSet ##

### 2.1  简述 ###

1.  简单来说：WeakSet是一个功能弱化版的Set，在里面只能放置引用类型变量（比如数组或者对象,际上，任何具有 Iterable 接口的对象，都可以作为 WeakSet 的参数）。
2.  存放在WeakSet的对象，不会影响内存回收，即里面的元素在引用数为0时，会直接被内存回收（即使放在WeakSet里面，也不会影响其回收）。
3.  只对对象、数组有用；
4.  只能添加、删除，并且查看某个元素是否存在；
5.  不可以遍历，不能转为数组进行处理；
6.  因为不可遍历，所以可以认为在WeakSet里面没有对其的引用，所以不会导致内存溢出不回收。
7.  WeakSet 的成员是不适合引用的，因为它会随时消失, WeakSet 内部有多少个成员，取决于垃圾回收机制有没有运行，运行前后很可能成员个数是不一样的，而垃圾回收机制何时运行是不可预测的，因此 ES6 规定 WeakSet 不可遍历。

### 2.2  使用 ###

const ws = new WeakSet();
    
    const a = [[1, 2], [3, 4]];
    const ws = new WeakSet(a);
    // WeakSet {[1, 2], [3, 4]}

### 2.3  方法 ###

对比Set方法少了一半

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5kYW4xMTI3_size_16_color_FFFFFF_t_70 1][]

*  **WeakSet.prototype.add(value)**：向 WeakSet 实例添加一个新成员。
 *  **WeakSet.prototype.delete(value)**：清除 WeakSet 实例的指定成员。
 *  **WeakSet.prototype.has(value)**：返回一个布尔值，表示某个值是否在

const ws = new WeakSet();
    const obj = {};
    const foo = {};
    
    ws.add(window);
    ws.add(obj);
    
    ws.has(window); // true
    ws.has(foo);    // false
    
    ws.delete(window);
    ws.has(window);    // false

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5kYW4xMTI3_size_16_color_FFFFFF_t_70]: /images/20210726/854f7a85340a4ccea680ac991d657ab0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5kYW4xMTI3_size_16_color_FFFFFF_t_70 1]: /images/20210726/6102dbb9bc4c495aaa5f352b24dcba5a.png