ES6 入门教程 18 Iterator 和 for...of 循环 18.3 调用 Iterator 接口的场合 & 18.4 字符串的 Iterator 接口

146 阅读 0 评论 97 点赞

我是靠谱客的博主结实鼠标，这篇文章主要介绍ES6 入门教程 18 Iterator 和 for...of 循环 18.3 调用 Iterator 接口的场合 & 18.4 字符串的 Iterator 接口，现在分享给大家，希望可以做个参考。

ES6 入门教程

ECMAScript 6 入门

作者：阮一峰

本文仅用于学习记录，不存在任何商业用途，如侵删

文章目录

- - ES6 入门教程
  - 18 Iterator 和 for...of 循环
  - - 18.3 调用 Iterator 接口的场合
    - 18.4 字符串的 Iterator 接口

18 Iterator 和 for…of 循环

18.3 调用 Iterator 接口的场合

有一些场合会默认调用 Iterator 接口（即Symbol.iterator方法），除了下文会介绍的for...of循环，还有几个别的场合。

【1】解构赋值

对数组和 Set 结构进行解构赋值时，会默认调用Symbol.iterator方法。

复制代码

1
2
3
4
5
6
let set = new Set().add('a').add('b').add('c');
let [x,y] = set;
// x='a'; y='b'
let [first, ...rest] = set;
// first='a'; rest=['b','c'];

在这里插入图片描述

【2】扩展运算符

扩展运算符（…）也会调用默认的 Iterator 接口。

复制代码

1
2
3
4
5
6
7
8
9
// 例一
var str = 'hello';
[...str] //
['h','e','l','l','o']
// 例二
let arr = ['b', 'c'];
['a', ...arr, 'd']
// ['a', 'b', 'c', 'd']

在这里插入图片描述

上面代码的扩展运算符内部就调用 Iterator 接口。

实际上，这提供了一种简便机制，可以将任何部署了 Iterator 接口的数据结构，转为数组。

也就是说，只要某个数据结构部署了 Iterator 接口，就可以对它使用扩展运算符，将其转为数组。

复制代码

1
2
let arr = [...iterable];

【3】yield*

yield*后面跟的是一个可遍历的结构，它会调用该结构的遍历器接口。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
let generator = function* () {
yield 1;
yield* [2,3,4];
yield 5;
};
var iterator = generator();
iterator.next() // { value: 1, done: false }
iterator.next() // { value: 2, done: false }
iterator.next() // { value: 3, done: false }
iterator.next() // { value: 4, done: false }
iterator.next() // { value: 5, done: false }
iterator.next() // { value: undefined, done: true }

在这里插入图片描述

【4】其他场合

由于数组的遍历会调用遍历器接口，所以任何接受数组作为参数的场合，其实都调用了遍历器接口。下面是一些例子。

for…of
Array.from()
Map(), Set(), WeakMap(), WeakSet()（比如new Map([['a',1],['b',2]])）
Promise.all()
Promise.race()

18.4 字符串的 Iterator 接口

字符串是一个类似数组的对象，也原生具有 Iterator 接口。

复制代码

1
2
3
4
5
6
7
8
9
10
11
var someString = "hi";
typeof someString[Symbol.iterator]
// "function"
var iterator = someString[Symbol.iterator]();
iterator.next()
// { value: "h", done: false }
iterator.next()
// { value: "i", done: false }
iterator.next()
// { value: undefined, done: true }

在这里插入图片描述

上面代码中，调用Symbol.iterator方法返回一个遍历器对象，在这个遍历器上可以调用 next 方法，实现对于字符串的遍历。

可以覆盖原生的Symbol.iterator方法，达到修改遍历器行为的目的。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var str = new String("hi");
[...str] // ["h", "i"]
str[Symbol.iterator] = function() {
return {
next: function() {
if (this._first) {
this._first = false;
return { value: "bye", done: false };
} else {
return { done: true };
}
},
_first: true
};
};
[...str] // ["bye"]
str // "hi"