1
0
mirror of https://github.com/ruanyf/es6tutorial.git synced 2025-05-24 18:32:22 +00:00

docs(set): 添加遍历顺序的说明

This commit is contained in:
ruanyf 2016-06-13 08:18:45 +08:00
parent 96dfa3b858
commit 5e0525be35

View File

@ -157,11 +157,15 @@ dedupe([1, 1, 2, 3]) // [1, 2, 3]
Set结构的实例有四个遍历方法可以用于遍历成员。
- `keys()`:返回一个键名的遍历器
- `values()`:返回一个键值的遍历器
- `entries()`:返回一个键值对的遍历器
- `keys()`:返回键名的遍历器
- `values()`:返回键值的遍历器
- `entries()`:返回键值对的遍历器
- `forEach()`:使用回调函数遍历每个成员
需要特别指出的是,`Set`的遍历顺序就是插入顺序。这个特性有时非常有用比如使用Set保存一个回调函数列表调用时就能保证按照添加顺序调用。
**1`keys()``values()``entries()`**
`key`方法、`value`方法、`entries`方法返回的都是遍历器对象详见《Iterator对象》一章。由于Set结构没有键名只有键值或者说键名和键值是同一个值所以`key`方法和`value`方法的行为完全一致。
```javascript
@ -211,7 +215,23 @@ for (let x of set) {
// blue
```
由于扩展运算符(`...`)内部使用`for...of`循环所以也可以用于Set结构。
**2`forEach()`**
Set结构的实例的`forEach`方法,用于对每个成员执行某种操作,没有返回值。
```javascript
let set = new Set([1, 2, 3]);
set.forEach((value, key) => console.log(value * 2) )
// 2
// 4
// 6
```
上面代码说明,`forEach`方法的参数就是一个处理函数。该函数的参数依次为键值、键名、集合本身(上例省略了该参数)。另外,`forEach`方法还可以有第二个参数表示绑定的this对象。
**3遍历的应用**
扩展运算符(`...`)内部使用`for...of`循环所以也可以用于Set结构。
```javascript
let set = new Set(['red', 'green', 'blue']);
@ -239,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]);
@ -258,19 +278,7 @@ let difference = new Set([...a].filter(x => !b.has(x)));
// [1]
```
Set结构的实例的`forEach`方法,用于对每个成员执行某种操作,没有返回值。
```javascript
let set = new Set([1, 2, 3]);
set.forEach((value, key) => console.log(value * 2) )
// 2
// 4
// 6
```
上面代码说明,`forEach`方法的参数就是一个处理函数。该函数的参数依次为键值、键名、集合本身(上例省略了该参数)。另外,`forEach`方法还可以有第二个参数表示绑定的this对象。
如果想在遍历操作中同步改变原来的Set结构目前没有直接的方法但有两种变通方法。一种是利用原Set结构映射出一个新的结构然后赋值给原来的Set结构另一种是利用Array.from方法。
如果想在遍历操作中同步改变原来的Set结构目前没有直接的方法但有两种变通方法。一种是利用原Set结构映射出一个新的结构然后赋值给原来的Set结构另一种是利用`Array.from`方法。
```javascript
// 方法一
@ -398,7 +406,7 @@ data[element] = metadata;
data["[Object HTMLDivElement]"] // metadata
```
上面代码原意是将一个DOM节点作为对象data的键但是由于对象只接受字符串作为键名所以element被自动转为字符串`[Object HTMLDivElement]`
上面代码原意是将一个DOM节点作为对象data的键但是由于对象只接受字符串作为键名所以`element`被自动转为字符串`[Object HTMLDivElement]`
为了解决这个问题ES6提供了Map数据结构。它类似于对象也是键值对的集合但是“键”的范围不限于字符串各种类型的值包括对象都可以当作键。也就是说Object结构提供了“字符串—值”的对应Map结构提供了“值—值”的对应是一种更完善的Hash结构实现。如果你需要“键值对”的数据结构Map比Object更合适。
@ -414,18 +422,18 @@ m.delete(o) // true
m.has(o) // false
```
上面代码使用set方法将对象o当作m的一个键然后又使用get方法读取这个键接着使用delete方法删除了这个键。
上面代码使用`set`方法,将对象`o`当作m的一个键然后又使用`get`方法读取这个键,接着使用`delete`方法删除了这个键。
作为构造函数Map也可以接受一个数组作为参数。该数组的成员是一个个表示键值对的数组。
```javascript
var map = new Map([["name", "张三"], ["title", "Author"]]);
var map = new Map([['name', '张三'], ['title', 'Author']]);
map.size // 2
map.has("name") // true
map.get("name") // "张三"
map.has("title") // true
map.get("title") // "Author"
map.has('name') // true
map.get('name') // "张三"
map.has('title') // true
map.get('title') // "Author"
```
上面代码在新建Map实例时就指定了两个键`name``title`
@ -434,8 +442,8 @@ Map构造函数接受数组作为参数实际上执行的是下面的算法
```javascript
var items = [
["name", "张三"],
["title", "Author"]
['name', '张三'],
['title', 'Author']
];
var map = new Map();
items.forEach(([key, value]) => map.set(key, value));
@ -602,10 +610,12 @@ map.size // 0
Map原生提供三个遍历器生成函数和一个遍历方法。
- keys():返回键名的遍历器。
- values():返回键值的遍历器。
- entries():返回所有成员的遍历器。
- forEach()遍历Map的所有成员。
- `keys()`:返回键名的遍历器。
- `values()`:返回键值的遍历器。
- `entries()`:返回所有成员的遍历器。
- `forEach()`遍历Map的所有成员。
需要特别注意的是Map的遍历顺序就是插入顺序。
下面是使用实例。
@ -651,7 +661,7 @@ map[Symbol.iterator] === map.entries
// true
```
Map结构转为数组结构比较快速的方法是结合使用扩展运算符...)。
Map结构转为数组结构比较快速的方法是结合使用扩展运算符`...`)。
```javascript
let map = new Map([
@ -673,7 +683,7 @@ let map = new Map([
// [[1,'one'], [2, 'two'], [3, 'three']]
```
结合数组的map方法、filter方法可以实现Map的遍历和过滤Map本身没有map和filter方法
结合数组的`map`方法、`filter`方法可以实现Map的遍历和过滤Map本身没有`map``filter`方法)。
```javascript
let map0 = new Map()
@ -692,7 +702,7 @@ let map2 = new Map(
// 产生Map结构 {2 => '_a', 4 => '_b', 6 => '_c'}
```
此外Map还有一个forEach方法与数组的forEach方法类似也可以实现遍历。
此外Map还有一个`forEach`方法,与数组的`forEach`方法类似,也可以实现遍历。
```javascript
map.forEach(function(value, key, map)) {
@ -700,7 +710,7 @@ map.forEach(function(value, key, map)) {
};
```
forEach方法还可以接受第二个参数用来绑定this。
`forEach`方法还可以接受第二个参数,用来绑定`this`
```javascript
var reporter = {