ES6中如何使用Set和WeakSet

关于ES6中的Set和WeakSet的详细介绍和使用指南

ES6为我们带来了两个新的数据结构：Set和WeakSet。Set是一种类似于数组但成员变量值唯一的数据结构，它不包含重复的值。而WeakSet则是一种只能存放对象的集合，且对对象的引用是弱引用。

一、Set的使用

(1) Set的构造函数

我们可以使用`new Set()`来创建一个Set实例。例如：

```javascript

var s = new Set();

[2,2,2,5,8,16,2,1].map(x => s.add(x))

for(let i of s){console.log(i)} // 输出：2, 5, 8, 16, 1

```

(2) 使用数组初始化Set

Set可以接受一个数组作为构造参数进行初始化：

```javascript

var s = new Set([1,2,3,4,2,4,3]);

console.log([...s]) // 输出：[1, 2, 3, 4]

```

值得注意的是，向Set中添加值时，不会发生类型转换。5和"5"是两个不同的值。Set内部判断两个值是否相等使用的是===。这意味着，除了NaN之外，其他所有类型的值都必须精确匹配。由于JavaScript中的对象比较使用的是引用比较，所以向Set中添加的两个不同的空对象也被视为不同的值。

(3) Set的方法和属性

Set有一些方法和属性可以帮助我们操作和管理Set数据结构。

Set的属性：

+ `Set.prototype.size`: 返回Set实例的成员数量。

+ `Set.prototype.constructor`: 默认的构造Set函数。

Set的操作方法：

+ `add(value)`: 添加某个值，返回Set结构本身。

+ `delete(value)`: 删除某个值，返回一个布尔值，表示删除成功。

+ `has(value)`: 返回一个布尔值，表示参数是否为Set的成员。

+ `clear()`: 清除所有成员，没有返回值。

例如：

```javascript

var set = new Set();

set.add(1).add(2).add(22).add(22);

console.log(set.size) // 输出：3

console.log(set.has(22)) // 输出：true

console.log(set.has(4)) // 输出：false

console.log(set.delete(2)) // 输出：true

```

(4) Set的遍历操作

Set提供了多种遍历方法，可以用于遍历成员。包括`keys()`、`values()`、`entries()`和`forEach()`。由于Set没有键名，只有值名，所以`keys()`和`values()`返回的结果是一样的。而`entries()`返回的遍历器包括键名和值，所以每次输出的是一个数组。默认遍历器生成函数是`values()`方法。可以直接使用for…of循环遍历Set。例如：

```javascript

var set = new Set([1,2,3,4]);

for(let x of set){

console.log(x); // 输出：1, 2, 3, 4

}

Set与WeakSet的奥秘

一、Set的神奇之处

在计算机科学中，Set是一种非常重要的数据结构，它允许我们存储独特的值，且不重复。让我们以一个包含颜色名称的Set为例，来展示其基础用法。

创建一个包含'red'、'green'和'blue'的Set：

```javascript

let set = new Set(['red', 'green', 'blue']);

let arr = [...set]; // 结果为 ['red', 'green', 'blue']

```

接下来，我们将Set的并集、交集和差集的实现方式。假设我们有两个Set：set1和set2。

```javascript

let set1 = new Set([1, 2, 3, 4, 5, 6]);

let set2 = new Set([4, 5, 6, 7, 8, 9]);

```

并集就是将两个集合的元素合并，得到一个新的集合：

```javascript

let union = new Set([...set1, ...set2]); // 结果为 [1, 2, 3, 4, 5, 6, 7, 8, 9]

```

交集是两个集合共有的元素：

```javascript

let intersect = new Set([...set1].filter(x => set2.has(x))); // 结果为 [4, 5, 6]

```

差集是一个集合中存在，但另一个集合中不存在的元素：

对于差集的实现存在一点误解，以下是正确的实现方式：

```javascript

let difference = new Set([...set1].filter(x => !set2.has(x))); // 结果为 [1, 2, 3] （假设set2不包含这些元素）

```

二、Set的forEach方法的使用

Set的forEach方法允许我们遍历集合中的每个元素。让我们创建一个包含数字的新Set，并使用forEach方法来处理每个元素：

```javascript

let set = new Set([1, 2, 3, 4, 5, 6]);

set.forEach(value => console.log(value + 1)); // 输出：2到7的数字

```

注意，forEach方法的参数是一个处理函数，该函数接受两个参数：值（value）和键名（key）。第二个参数是可选的，表示绑定this的对象。在实际使用中，Set的键名和键值是相同的，因此通常只关注值。请注意拼写错误“consloe”应更正为“console”。

三、WeakSet的与应用场景分析。WeakSet类似于Set，也是一种集合结构，但它只能存储对象引用。这意味着我们不能在WeakSet中存储除对象以外的其他类型的值。以下是关于WeakSet的基本用法：首先创建一个新的WeakSet实例对象ws和一个对象obj作为成员添加到WeakSet中。尝试添加非对象（如数值和Symbol）会报错。WeakSet提供了添加（add）、删除（delete）和检查成员是否存在（has）的方法。特别需要注意的是，WeakSet的成员是弱引用的，这意味着如果对象从文档中被移除或没有其他引用指向它时，它在WeakSet中的引用会自动消失。这使得WeakSet特别适合存储DOM节点或其他需要弱引用的场景。由于成员可能会随时消失，因此WeakSet不能被遍历。WeakSet的主要用途是避免在对象被移除时造成内存泄漏问题。这种设计非常适合存储DOM节点等场景，以确保即使节点被移除，也不会影响程序的内存管理。在特定的应用场景下，如渲染DOM节点时，我们可以使用WeakSet来安全地存储和管理这些节点的引用信息。例如，"cambrian.render('body')"这样的操作可以通过WeakSet来确保即使在节点更新或移除的情况下也能保持正确的引用关系。