diff --git a/docs/set-map.md b/docs/set-map.md index 7486a33..d07c284 100644 --- a/docs/set-map.md +++ b/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