mirror of
https://github.com/ruanyf/es6tutorial.git
synced 2025-05-24 18:32:22 +00:00
docs(set): 添加遍历顺序的说明
This commit is contained in:
parent
96dfa3b858
commit
5e0525be35
@ -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 = {
|
||||
|
Loading…
x
Reference in New Issue
Block a user