mirror of
https://github.com/ruanyf/es6tutorial.git
synced 2025-05-27 20:32:21 +00:00
edit Set/Map
This commit is contained in:
ruanyf
parent
f5365acb2a
commit
1f9f4914bd
173
docs/set-map.md
173
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();
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user