mirror of
https://github.com/ruanyf/es6tutorial.git
synced 2025-05-24 18:32:22 +00:00
docs(set): edit weakMap & weakSet
This commit is contained in:
ruanyf
parent
ca2a2fc8b3
commit
e1bfba24ed
144
docs/set-map.md
144
docs/set-map.md
@ -66,7 +66,7 @@ set.add(b);
|
||||
set // Set {NaN}
|
||||
```
|
||||
|
||||
上面代码向Set实例添加了两个`NaN`，但是只能加入一个。这表明，在Set内部，两个`NaN`是相等。
|
||||
上面代码向 Set 实例添加了两个`NaN`，但是只能加入一个。这表明，在 Set 内部，两个`NaN`是相等。
|
||||
|
||||
另外，两个对象总是不相等的。
|
||||
|
||||
@ -82,14 +82,14 @@ set.size // 2
|
||||
|
||||
上面代码表示，由于两个空对象不相等，所以它们被视为两个值。
|
||||
|
||||
### Set实例的属性和方法
|
||||
### Set 实例的属性和方法
|
||||
|
||||
Set结构的实例有以下属性。
|
||||
Set 结构的实例有以下属性。
|
||||
|
||||
- `Set.prototype.constructor`：构造函数，默认就是`Set`函数。
|
||||
- `Set.prototype.size`：返回`Set`实例的成员总数。
|
||||
|
||||
Set实例的方法分为两大类：操作方法（用于操作数据）和遍历方法（用于遍历成员）。下面先介绍四个操作方法。
|
||||
Set 实例的方法分为两大类：操作方法（用于操作数据）和遍历方法（用于遍历成员）。下面先介绍四个操作方法。
|
||||
|
||||
- `add(value)`：添加某个值，返回Set结构本身。
|
||||
- `delete(value)`：删除某个值，返回一个布尔值，表示删除是否成功。
|
||||
@ -155,7 +155,7 @@ dedupe([1, 1, 2, 3]) // [1, 2, 3]
|
||||
|
||||
### 遍历操作
|
||||
|
||||
Set结构的实例有四个遍历方法，可以用于遍历成员。
|
||||
Set 结构的实例有四个遍历方法，可以用于遍历成员。
|
||||
|
||||
- `keys()`：返回键名的遍历器
|
||||
- `values()`：返回键值的遍历器
|
||||
@ -195,14 +195,14 @@ for (let item of set.entries()) {
|
||||
|
||||
上面代码中，`entries`方法返回的遍历器，同时包括键名和键值，所以每次输出一个数组，它的两个成员完全相等。
|
||||
|
||||
Set结构的实例默认可遍历，它的默认遍历器生成函数就是它的`values`方法。
|
||||
Set 结构的实例默认可遍历，它的默认遍历器生成函数就是它的`values`方法。
|
||||
|
||||
```javascript
|
||||
Set.prototype[Symbol.iterator] === Set.prototype.values
|
||||
// true
|
||||
```
|
||||
|
||||
这意味着，可以省略`values`方法，直接用`for...of`循环遍历Set。
|
||||
这意味着，可以省略`values`方法，直接用`for...of`循环遍历 Set。
|
||||
|
||||
```javascript
|
||||
let set = new Set(['red', 'green', 'blue']);
|
||||
@ -227,11 +227,11 @@ set.forEach((value, key) => console.log(value * 2) )
|
||||
// 6
|
||||
```
|
||||
|
||||
上面代码说明，`forEach`方法的参数就是一个处理函数。该函数的参数依次为键值、键名、集合本身（上例省略了该参数）。另外，`forEach`方法还可以有第二个参数，表示绑定的this对象。
|
||||
上面代码说明，`forEach`方法的参数就是一个处理函数。该函数的参数依次为键值、键名、集合本身（上例省略了该参数）。另外，`forEach`方法还可以有第二个参数，表示绑定的`this`对象。
|
||||
|
||||
**（3）遍历的应用**
|
||||
|
||||
扩展运算符（`...`）内部使用`for...of`循环，所以也可以用于Set结构。
|
||||
扩展运算符（`...`）内部使用`for...of`循环，所以也可以用于 Set 结构。
|
||||
|
||||
```javascript
|
||||
let set = new Set(['red', 'green', 'blue']);
|
||||
@ -239,7 +239,7 @@ let arr = [...set];
|
||||
// ['red', 'green', 'blue']
|
||||
```
|
||||
|
||||
扩展运算符和Set结构相结合，就可以去除数组的重复成员。
|
||||
扩展运算符和 Set 结构相结合，就可以去除数组的重复成员。
|
||||
|
||||
```javascript
|
||||
let arr = [3, 5, 2, 2, 5, 5];
|
||||
@ -247,7 +247,7 @@ let unique = [...new Set(arr)];
|
||||
// [3, 5, 2]
|
||||
```
|
||||
|
||||
而且，数组的`map`和`filter`方法也可以用于Set了。
|
||||
而且，数组的`map`和`filter`方法也可以用于 Set 了。
|
||||
|
||||
```javascript
|
||||
let set = new Set([1, 2, 3]);
|
||||
@ -259,7 +259,7 @@ set = new Set([...set].filter(x => (x % 2) == 0));
|
||||
// 返回Set结构：{2, 4}
|
||||
```
|
||||
|
||||
因此使用Set可以很容易地实现并集（Union）、交集（Intersect）和差集（Difference）。
|
||||
因此使用 Set 可以很容易地实现并集（Union）、交集（Intersect）和差集（Difference）。
|
||||
|
||||
```javascript
|
||||
let a = new Set([1, 2, 3]);
|
||||
@ -278,7 +278,7 @@ let difference = new Set([...a].filter(x => !b.has(x)));
|
||||
// Set {1}
|
||||
```
|
||||
|
||||
如果想在遍历操作中，同步改变原来的Set结构，目前没有直接的方法，但有两种变通方法。一种是利用原Set结构映射出一个新的结构，然后赋值给原来的Set结构；另一种是利用`Array.from`方法。
|
||||
如果想在遍历操作中，同步改变原来的 Set 结构，目前没有直接的方法，但有两种变通方法。一种是利用原 Set 结构映射出一个新的结构，然后赋值给原来的 Set 结构；另一种是利用`Array.from`方法。
|
||||
|
||||
```javascript
|
||||
// 方法一
|
||||
@ -292,10 +292,12 @@ set = new Set(Array.from(set, val => val * 2));
|
||||
// set的值是2, 4, 6
|
||||
```
|
||||
|
||||
上面代码提供了两种方法，直接在遍历操作中改变原来的Set结构。
|
||||
上面代码提供了两种方法，直接在遍历操作中改变原来的 Set 结构。
|
||||
|
||||
## WeakSet
|
||||
|
||||
### 含义
|
||||
|
||||
WeakSet 结构与 Set 类似，也是不重复的值的集合。但是，它与 Set 有两个区别。
|
||||
|
||||
首先，WeakSet 的成员只能是对象，而不能是其他类型的值。
|
||||
@ -310,7 +312,15 @@ ws.add(Symbol())
|
||||
|
||||
上面代码试图向 WeakSet 添加一个数值和`Symbol`值，结果报错，因为 WeakSet 只能放置对象。
|
||||
|
||||
其次，WeakSet 中的对象都是弱引用，即垃圾回收机制不考虑 WeakSet 对该对象的引用，也就是说，如果其他对象都不再引用该对象，那么垃圾回收机制会自动回收该对象所占用的内存，不考虑该对象还存在于 WeakSet 之中。这个特点意味着，无法引用 WeakSet 的成员，因此 WeakSet 是不可遍历的。
|
||||
其次，WeakSet 中的对象都是弱引用，即垃圾回收机制不考虑 WeakSet 对该对象的引用，也就是说，如果其他对象都不再引用该对象，那么垃圾回收机制会自动回收该对象所占用的内存，不考虑该对象还存在于 WeakSet 之中。
|
||||
|
||||
这是因为垃圾回收机制依赖引用计数，如果一个值的引用次数不为`0`，垃圾回收机制就不会释放这块内存。对于那些不重要的引用，在结束使用之后，有时会忘记取消引用，导致内存无法释放，进而可能会引发内存泄漏。WeakSet 里面的引用，都不计入垃圾回收机制，所以就不存在这个问题。因此，WeakSet 适合临时存放一组对象，以及存放跟对象绑定的信息。只要这些对象在外部消失，它在 WeakMap 里面的引用就会自动消失。
|
||||
|
||||
由于上面这个特点，WeakSet 的成员是不适合引用的，因为它会随时消失。另外，由于 WeakSet 内部有多少个成员，取决于垃圾回收机制有没有运行，运行前后很可能成员个数是不一样的，而垃圾回收机制何时运行是不可预测的，因此 ES6 规定 WeakSet 不可遍历。
|
||||
|
||||
这些特点同样适用于本章后面要介绍的 WeakMap 结构。
|
||||
|
||||
### 语法
|
||||
|
||||
WeakSet 是一个构造函数，可以使用`new`命令，创建 WeakSet 数据结构。
|
||||
|
||||
@ -373,9 +383,9 @@ ws.forEach(function(item){ console.log('WeakSet has ' + item)})
|
||||
|
||||
上面代码试图获取`size`和`forEach`属性，结果都不能成功。
|
||||
|
||||
WeakSet不能遍历，是因为成员都是弱引用，随时可能消失，遍历机制无法保证成员的存在，很可能刚刚遍历结束，成员就取不到了。WeakSet的一个用处，是储存DOM节点，而不用担心这些节点从文档移除时，会引发内存泄漏。
|
||||
WeakSet 不能遍历，是因为成员都是弱引用，随时可能消失，遍历机制无法保证成员的存在，很可能刚刚遍历结束，成员就取不到了。WeakSet 的一个用处，是储存 DOM 节点，而不用担心这些节点从文档移除时，会引发内存泄漏。
|
||||
|
||||
下面是WeakSet的另一个例子。
|
||||
下面是 WeakSet 的另一个例子。
|
||||
|
||||
```javascript
|
||||
const foos = new WeakSet()
|
||||
@ -548,7 +558,7 @@ map.get(NaN) // 123
|
||||
|
||||
### 实例的属性和操作方法
|
||||
|
||||
Map结构的实例有以下属性和操作方法。
|
||||
Map 结构的实例有以下属性和操作方法。
|
||||
|
||||
**（1）size属性**
|
||||
|
||||
@ -878,7 +888,7 @@ jsonToMap('[[true,7],[{"foo":3},["abc"]]]')
|
||||
|
||||
## WeakMap
|
||||
|
||||
### 含义和用法
|
||||
### 含义
|
||||
|
||||
`WeakMap`结构与`Map`结构类似，也是用于生成键值对。
|
||||
|
||||
@ -907,6 +917,8 @@ map.set(1, 2)
|
||||
// TypeError: 1 is not an object!
|
||||
map.set(Symbol(), 2)
|
||||
// TypeError: Invalid value used as weak map key
|
||||
map.set(null, 2)
|
||||
// TypeError: Invalid value used as weak map key
|
||||
```
|
||||
|
||||
上面代码中，如果将数值`1`和`Symbol`值作为 WeakMap 的键名，都会报错。
|
||||
@ -943,17 +955,16 @@ WeakMap 就是为了解决这个问题而诞生的，它的键名所引用的对
|
||||
|
||||
```javascript
|
||||
const wm = new WeakMap();
|
||||
const element = document.querySelector('.element');
|
||||
|
||||
wm.set(element, 'Original');
|
||||
wm.get(element) // "Original"
|
||||
const element = document.getElementById('example');
|
||||
|
||||
element.parentNode.removeChild(element);
|
||||
element = null;
|
||||
wm.get(element) // undefined
|
||||
wm.set(element, 'some information');
|
||||
wm.get(element) // "some information"
|
||||
```
|
||||
|
||||
上面代码中，变量`wm`是一个`WeakMap`实例，我们将一个`DOM`节点`element`作为键名，然后销毁这个节点，`element`对应的键就自动消失了，再引用这个键名就返回`undefined`。
|
||||
上面代码中，先新建一个 Weakmap 实例。然后，将一个 DOM 节点作为键名存入该实例，并将一些附加信息作为键值，一起存放在 WeakMap 里面。这时，WeakMap 里面对`element`的引用就是弱引用，不会被计入垃圾回收机制。
|
||||
|
||||
也就是说，上面的 DOM 节点对象的引用计数是`1`，而不是`2`。这时，一旦消除对该节点的引用，它占用的内存就会被垃圾回收机制释放。Weakmap 保存的这个键值对，也会自动消失。
|
||||
|
||||
总之，`WeakMap`的专用场合就是，它的键所对应的对象，可能会在将来消失。`WeakMap`结构有助于防止内存泄漏。
|
||||
|
||||
@ -972,6 +983,87 @@ wm.get(key)
|
||||
|
||||
上面代码中，键值`obj`是正常引用。所以，即使在 WeakMap 外部消除了`obj`的引用，WeakMap 内部的引用依然存在。
|
||||
|
||||
### WeakMap 的示例
|
||||
|
||||
WeakMap 的例子很难演示，因为无法观察它里面的引用会自动消失。此时，其他引用都解除了，已经没有引用指向 WeakMap 的键名了，导致无法证实那个键名是不是存在。
|
||||
|
||||
贺师俊老师[提示](https://github.com/ruanyf/es6tutorial/issues/362#issuecomment-292109104)，如果引用所指向的值占用特别多的内存，就可以通过 Node 的`process.memoryUsage`方法看出来。根据这个思路，网友[vtxf](https://github.com/ruanyf/es6tutorial/issues/362#issuecomment-292451925)补充了下面的例子。
|
||||
|
||||
首先，打开 Node 命令行。
|
||||
|
||||
```bash
|
||||
$ node --expose-gc
|
||||
```
|
||||
|
||||
上面代码中，`--expose-gc`参数表示允许手动执行垃圾回收机制。
|
||||
|
||||
然后，执行下面的代码。
|
||||
|
||||
```javascript
|
||||
// 手动执行一次垃圾回收，保证获取的内存使用状态准确
|
||||
> global.gc();
|
||||
undefined
|
||||
|
||||
// 查看内存占用的初始状态，heapUsed 为 4M 左右
|
||||
> process.memoryUsage();
|
||||
{ rss: 21106688,
|
||||
heapTotal: 7376896,
|
||||
heapUsed: 4153936,
|
||||
external: 9059 }
|
||||
|
||||
> let wm = new WeakMap();
|
||||
undefined
|
||||
|
||||
> const b = new Object();
|
||||
undefined
|
||||
|
||||
> global.gc();
|
||||
undefined
|
||||
|
||||
// 此时，heapUsed 仍然为 4M 左右
|
||||
> process.memoryUsage();
|
||||
{ rss: 20537344,
|
||||
heapTotal: 9474048,
|
||||
heapUsed: 3967272,
|
||||
external: 8993 }
|
||||
|
||||
// 在 WeakMap 中添加一个键值对，
|
||||
// 键名为对象 b，键值为一个 5*1024*1024 的数组
|
||||
> wm.set(b, new Array(5*1024*1024));
|
||||
WeakMap {}
|
||||
|
||||
// 手动执行一次垃圾回收
|
||||
> global.gc();
|
||||
undefined
|
||||
|
||||
// 此时，heapUsed 为 45M 左右
|
||||
> process.memoryUsage();
|
||||
{ rss: 62652416,
|
||||
heapTotal: 51437568,
|
||||
heapUsed: 45911664,
|
||||
external: 8951 }
|
||||
|
||||
// 解除对象 b 的引用
|
||||
> b = null;
|
||||
null
|
||||
|
||||
// 再次执行垃圾回收
|
||||
> global.gc();
|
||||
undefined
|
||||
|
||||
// 解除 b 的引用以后，heapUsed 变回 4M 左右
|
||||
// 说明 WeakMap 中的那个长度为 5*1024*1024 的数组被销毁了
|
||||
> process.memoryUsage();
|
||||
{ rss: 20639744,
|
||||
heapTotal: 8425472,
|
||||
heapUsed: 3979792,
|
||||
external: 8956 }
|
||||
```
|
||||
|
||||
上面代码中，只要外部的引用消失，WeakMap 内部的引用，就会自动被垃圾回收清除。由此可见，有了 WeakMap 的帮助，解决内存泄漏就会简单很多。
|
||||
|
||||
### WeakMap 的语法
|
||||
|
||||
WeakMap 与 Map 在 API 上的区别主要是两个，一是没有遍历操作（即没有`key()`、`values()`和`entries()`方法），也没有`size`属性。因为没有办法列出所有键名，这个键名是否存在完全不可预测，跟垃圾回收机制是否运行相关。二是无法清空，即不支持`clear`方法。因此，`WeakMap`只有四个方法可用：`get()`、`set()`、`has()`、`delete()`。
|
||||
|
||||
```javascript
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user