From 1f9f4914bddd2142f1f1d35432a1d230787b9c2f Mon Sep 17 00:00:00 2001 From: ruanyf Date: Sun, 13 Sep 2015 12:26:01 +0800 Subject: [PATCH] edit Set/Map --- docs/set-map.md | 173 +++++++++++++++++++++++++++++++++++++----------- 1 file changed, 133 insertions(+), 40 deletions(-) diff --git a/docs/set-map.md b/docs/set-map.md index 126fbf0..bf159d8 100644 --- a/docs/set-map.md +++ b/docs/set-map.md @@ -17,16 +17,31 @@ for (i of s) {console.log(i)} // 2 3 5 4 ``` -上面代码通过add方法向Set结构加入成员，结果表明Set结构不会添加重复的值。 +上面代码通过`add`方法向Set结构加入成员，结果表明Set结构不会添加重复的值。 -Set函数可以接受一个数组作为参数，用来初始化。 +Set函数可以接受一个数组（或类似数组的对象）作为参数，用来初始化。 ```javascript -var items = new Set([1,2,3,4,5,5,5,5]); +var set = new Set([1, 2, 3, 4, 4]) +[...set] +// [1, 2, 3, 4] + +var items = new Set([1, 2, 3, 4, 5, 5, 5, 5]); items.size // 5 + +function divs () { + return [...document.querySelectorAll('div')] +} + +var set = new Set(divs()) +set.size // 56 + +// 类似于 +divs().forEach(div => set.add(div)) +set.size // 56 ``` -向Set加入值的时候，不会发生类型转换，所以5和“5”是两个不同的值。Set内部判断两个值是否不同，使用的算法类似于精确相等运算符（===），这意味着，两个对象总是不相等的。唯一的例外是NaN等于自身（精确相等运算符认为NaN不等于自身）。 +向Set加入值的时候，不会发生类型转换，所以`5`和`"5"`是两个不同的值。Set内部判断两个值是否不同，使用的算法类似于精确相等运算符（`===`），这意味着，两个对象总是不相等的。唯一的例外是`NaN`等于自身（精确相等运算符认为`NaN`不等于自身）。 ```javascript let set = new Set(); @@ -120,7 +135,7 @@ Set结构的实例有四个遍历方法，可以用于遍历成员。 - entries()：返回一个键值对的遍历器 - forEach()：使用回调函数遍历每个成员 -key方法、value方法、entries方法返回的都是遍历器（详见《Iterator对象》一章）。由于Set结构没有键名，只有键值（或者说键名和键值是同一个值），所以key方法和value方法的行为完全一致。 +`key`方法、`value`方法、`entries`方法返回的都是遍历器对象（详见《Iterator对象》一章）。由于Set结构没有键名，只有键值（或者说键名和键值是同一个值），所以`key`方法和`value`方法的行为完全一致。 ```javascript let set = new Set(['red', 'green', 'blue']); @@ -147,16 +162,16 @@ for ( let item of set.entries() ){ // ["blue", "blue"] ``` -上面代码中，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']); @@ -169,7 +184,7 @@ for (let x of set) { // blue ``` -由于扩展运算符（...）内部使用for...of循环，所以也可以用于Set结构。 +由于扩展运算符（...）内部使用`for...of`循环，所以也可以用于Set结构。 ```javascript let set = new Set(['red', 'green', 'blue']); @@ -185,7 +200,7 @@ let unique = [...new Set(arr)]; // [3, 5, 2] ``` -而且，数组的map和filter方法也可以用于Set了。 +而且，数组的`map`和`filter`方法也可以用于Set了。 ```javascript let set = new Set([1, 2, 3]); @@ -220,7 +235,7 @@ set.forEach((value, key) => console.log(value * 2) ) // 6 ``` -上面代码说明，forEach方法的参数就是一个处理函数。该函数的参数依次为键值、键名、集合本身（上例省略了该参数）。另外，forEach方法还可以有第二个参数，表示绑定的this对象。 +上面代码说明，`forEach`方法的参数就是一个处理函数。该函数的参数依次为键值、键名、集合本身（上例省略了该参数）。另外，`forEach`方法还可以有第二个参数，表示绑定的this对象。 如果想在遍历操作中，同步改变原来的Set结构，目前没有直接的方法，但有两种变通方法。一种是利用原Set结构映射出一个新的结构，然后赋值给原来的Set结构；另一种是利用Array.from方法。 @@ -250,17 +265,19 @@ WeakSet结构与Set类似，也是不重复的值的集合。但是，它与Set var ws = new WeakSet(); ws.add(1) // TypeError: Invalid value used in weak set +ws.add(Symbol()) +// TypeError: invalid value used in weak set ``` -上面代码试图向WeakSet添加一个数值，结果报错。 +上面代码试图向WeakSet添加一个数值和`Symbol`值，结果报错。 -WeakSet是一个构造函数，可以使用new命令，创建WeakSet数据结构。 +WeakSet是一个构造函数，可以使用`new`命令，创建WeakSet数据结构。 ```javascript var ws = new WeakSet(); ``` -作为构造函数，WeakSet可以接受一个数组或类似数组的对象作为参数。（实际上，任何具有iterable接口的对象，都可以作为WeakSet的对象。）该数组的所有成员，都会自动成为WeakSet实例对象的成员。 +作为构造函数，WeakSet可以接受一个数组或类似数组的对象作为参数。（实际上，任何具有iterable接口的对象，都可以作为WeakSet的参数。）该数组的所有成员，都会自动成为WeakSet实例对象的成员。 ```javascript var a = [[1,2], [3,4]]; @@ -306,6 +323,24 @@ ws.forEach(function(item){ console.log('WeakSet has ' + item)}) WeakSet不能遍历，是因为成员都是弱引用，随时可能消失，遍历机制无法保存成员的存在，很可能刚刚遍历结束，成员就取不到了。WeakSet的一个用处，是储存DOM节点，而不用担心这些节点从文档移除时，会引发内存泄漏。 +下面是WeakMap的另一个例子。 + +```javascript +const foos = new WeakSet() +class Foo { + constructor() { + foos.add(this) + } + method () { + if (!foos.has(this)) { + throw new TypeError('Foo.prototype.method 只能在Foo的实例上调用！') + } + } +} +``` + +上面代码保证了`Foo`的实例方法，只能在`Foo`的实例上调用。这里使用WeakSet的好处是，数组`foos`对实例的引用，不会被计入内存回收机制，所以删除实例的时候，不用考虑`foos`，也不会出现内存泄漏。 + ## Map ### Map结构的目的和基本用法 @@ -341,7 +376,7 @@ m.has(o) // false 作为构造函数，Map也可以接受一个数组作为参数。该数组的成员是一个个表示键值对的数组。 ```javascript -var map = new Map([ ["name", "张三"], ["title", "Author"]]); +var map = new Map([["name", "张三"], ["title", "Author"]]); map.size // 2 map.has("name") // true @@ -352,6 +387,17 @@ map.get("title") // "Author" 上面代码在新建Map实例时，就指定了两个键name和title。 +Map构造函数接受数组作为参数，实际上执行的是下面的算法。 + +```javascript +var items = [ + ["name", "张三"], + ["title", "Author"] +]; +var map = new Map(); +items.forEach(([key, value]) => map.set(key, value)); +``` + 如果对同一个键多次赋值，后面的值将覆盖前面的值。 ```javascript @@ -416,14 +462,31 @@ map.get(+0) // 123 Map结构的实例有以下属性和操作方法。 -- size：返回成员总数。 -- set(key, value)：设置key所对应的键值，然后返回整个Map结构。如果key已经有值，则键值会被更新，否则就新生成该键。 -- get(key)：读取key对应的键值，如果找不到key，返回undefined。 -- has(key)：返回一个布尔值，表示某个键是否在Map数据结构中。 -- delete(key)：删除某个键，返回true。如果删除失败，返回false。 -- clear()：清除所有成员，没有返回值。 +**（1）size属性** -set()方法返回的是Map本身，因此可以采用链式写法。 +`size`属性返回Map结构的成员总数。 + +```javascript +let map = new Map(); +map.set('foo', true); +map.set('bar', false); + +map.size // 2 +``` + +**（2）set(key, value)** + +`set`方法设置`key`所对应的键值，然后返回整个Map结构。如果`key`已经有值，则键值会被更新，否则就新生成该键。 + +```javascript +var m = new Map(); + +m.set("edition", 6) // 键是字符串 +m.set(262, "standard") // 键是数值 +m.set(undefined, "nah") // 键是undefined +``` + +`set`方法返回的是Map本身，因此可以采用链式写法。 ```javascript let map = new Map() @@ -432,32 +495,51 @@ let map = new Map() .set(3, 'c'); ``` -下面是has()和delete()的例子。 +**（3）get(key)** + +`get`方法读取`key`对应的键值，如果找不到`key`，返回`undefined`。 ```javascript var m = new Map(); -m.set("edition", 6) // 键是字符串 -m.set(262, "standard") // 键是数值 -m.set(undefined, "nah") // 键是undefined - var hello = function() {console.log("hello");} m.set(hello, "Hello ES6!") // 键是函数 +m.get(hello) // Hello ES6! +``` + +**（4）has(key)** + +`has`方法返回一个布尔值，表示某个键是否在Map数据结构中。 + +```javascript +var m = new Map(); + +m.set("edition", 6); +m.set(262, "standard"); +m.set(undefined, "nah"); + m.has("edition") // true m.has("years") // false m.has(262) // true m.has(undefined) // true -m.has(hello) // true +``` + +**（5）delete(key)** + +`delete`方法删除某个键，返回true。如果删除失败，返回false。 + +```javascript +var m = new Map(); +m.set(undefined, "nah"); +m.has(undefined) // true m.delete(undefined) m.has(undefined) // false - -m.get(hello) // Hello ES6! -m.get("edition") // 6 ``` +**（6）clear()** -下面是size属性和clear方法的例子。 +`clear`方法清除所有成员，没有返回值。 ```javascript let map = new Map(); @@ -471,11 +553,12 @@ map.size // 0 ### 遍历方法 -Map原生提供三个遍历器。 +Map原生提供三个遍历器生成函数和一个遍历方法。 - keys()：返回键名的遍历器。 - values()：返回键值的遍历器。 - entries()：返回所有成员的遍历器。 +- forEach()：遍历Map的所有成员。 下面是使用实例。 @@ -514,7 +597,7 @@ for (let [key, value] of map) { } ``` -上面代码最后的那个例子，表示Map结构的默认遍历器接口（Symbol.iterator属性），就是entries方法。 +上面代码最后的那个例子，表示Map结构的默认遍历器接口（`Symbol.iterator`属性），就是`entries`方法。 ```javascript map[Symbol.iterator] === map.entries @@ -584,7 +667,7 @@ map.forEach(function(value, key, map) { }, reporter); ``` -上面代码中，forEach方法的回调函数的this，就指向reporter。 +上面代码中，`forEach`方法的回调函数的`this`，就指向`reporter`。 ### 与其他数据结构的互相转换 @@ -692,11 +775,21 @@ jsonToMap('[[true,7],[{"foo":3},["abc"]]]') ## WeakMap -WeakMap结构与Map结构基本类似，唯一的区别是它只接受对象作为键名（null除外），不接受原始类型的值作为键名，而且键名所指向的对象，不计入垃圾回收机制。 +`WeakMap`结构与`Map`结构基本类似，唯一的区别是它只接受对象作为键名（`null`除外），不接受其他类型的值作为键名，而且键名所指向的对象，不计入垃圾回收机制。 -WeakMap的设计目的在于，键名是对象的弱引用（垃圾回收机制不将该引用考虑在内），所以其所对应的对象可能会被自动回收。当对象被回收后，WeakMap自动移除对应的键值对。典型应用是，一个对应DOM元素的WeakMap结构，当某个DOM元素被清除，其所对应的WeakMap记录就会自动被移除。基本上，WeakMap的专用场合就是，它的键所对应的对象，可能会在将来消失。WeakMap结构有助于防止内存泄漏。 +```javascript +var map = new WeakMap() +map.set(1, 2) +// TypeError: 1 is not an object! +map.set(Symbol(), 2) +// TypeError: Invalid value used as weak map key +``` -下面是WeakMap结构的一个例子，可以看到用法上与Map几乎一样。 +上面代码中，如果将1和`Symbol`作为WeakMap的键名，都会报错。 + +`WeakMap`的设计目的在于，键名是对象的弱引用（垃圾回收机制不将该引用考虑在内），所以其所对应的对象可能会被自动回收。当对象被回收后，`WeakMap`自动移除对应的键值对。典型应用是，一个对应DOM元素的`WeakMap`结构，当某个DOM元素被清除，其所对应的`WeakMap`记录就会自动被移除。基本上，`WeakMap`的专用场合就是，它的键所对应的对象，可能会在将来消失。`WeakMap`结构有助于防止内存泄漏。 + +下面是`WeakMap`结构的一个例子，可以看到用法上与`Map`几乎一样。 ```javascript var wm = new WeakMap(); @@ -710,9 +803,9 @@ element = null; wm.get(element) // undefined ``` -上面代码中，变量wm是一个WeakMap实例，我们将一个DOM节点element作为键名，然后销毁这个节点，element对应的键就自动消失了，再引用这个键名就返回undefined。 +上面代码中，变量`wm`是一个`WeakMap`实例，我们将一个`DOM`节点`element`作为键名，然后销毁这个节点，`element`对应的键就自动消失了，再引用这个键名就返回`undefined`。 -WeakMap与Map在API上的区别主要是两个，一是没有遍历操作（即没有key()、values()和entries()方法），也没有size属性；二是无法清空，即不支持clear方法。这与WeakMap的键不被计入引用、被垃圾回收机制忽略有关。因此，WeakMap只有四个方法可用：get()、set()、has()、delete()。 +WeakMap与Map在API上的区别主要是两个，一是没有遍历操作（即没有`key()`、`values()`和`entries()`方法），也没有`size`属性；二是无法清空，即不支持`clear`方法。这与`WeakMap`的键不被计入引用、被垃圾回收机制忽略有关。因此，`WeakMap`只有四个方法可用：`get()`、`set()`、`has()`、`delete()`。 ```javascript var wm = new WeakMap();