ES6精通之Iterator接口和for...of循环个人笔记

2019-11-20	Iterator接口和for...of循环

目录

• Interator（遍历器）概念
• Interator（遍历器）遍历过程
• 默认的Interator接口
• 调用Iterator接口的场合
• Interator（遍历器）对象的return() throw()
• Set和Map数据结构的遍历过程
• 计算生成的数据结构
• Interator对对象的遍历
• Interator与其他遍历语法比较

---

Interator（遍历器）概念

interator是一种接口，三个作用：为不同的数据结构提供统一的访问机制；使数据结构的成员能够按照某种次序排列；通过es6提供的for…of…

Interator（遍历器）遍历过程

创建一个指针指向开始地点；调用next()，使指针指向数据结构的第一个成员；不断调用next(),指导指向数据结构结束的位置
每次遍历都会返回一个带有value（当前值）和done（是否完成）的对象

默认的Interator接口

只要数据结构中部署了Interator接口，或者说属性有Symbol.iterator属性，那么就可以被for…of 进行遍历
原生具备可便利的数据结构：数组，字符串，Set，Map,argument,NodeList对象

let arr = ['a', 'b', 'c'];let iter = arr[Symbol.iterator]();

iter.next() // { value: 'a', done: false }
iter.next() // { value: 'b', done: false }
iter.next() // { value: 'c', done: false }
iter.next() // { value: undefined, done: true }

对象身上每当有iterator接口，因为他不知道先遍历哪个后遍历哪个，遍历器是一种线性处理

let iterable = {
a: 'a',
b: 'b',
c: 'c',
length: 3,
[Symbol.iterator]: Array.prototype[Symbol.iterator]};for (let item of iterable) {
console.log(item); // undefined, undefined, undefined
}

调用Iterator接口的场合

（1）for…of
（2）解构赋值
（3）扩展运算符[…a]
（4）yield*后边是一个可遍历的结构

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

（5）其他场合
Array.form() Map() Set() WeakMap() WeakSet() Promise.all() Promise.race()

Interator（遍历器）对象的return() throw()

如果自己写interator接口，[Symbol.Iterator]方法的next()方法使必须的，但是return() 和throw()方法就是不必须的了
（1）return()方法，下面两种情况会自动调用return方法， return方法必须返回一个对象，这是 Generator 规格决定的。

// 情况一
for (let line of readLinesSync(fileName)) {
console.log(line);
break;}
// 情况二
for (let line of readLinesSync(fileName)) {
console.log(line);
throw new Error();}

（2）throw()
throw方法主要是配合 Generator 函数使用，一般的遍历器对象用不到这个方法。请参阅《Generator 函数》一章。

Set和Map数据结构的遍历过程

var engines = new Set(["Gecko", "Trident", "Webkit", "Webkit"]);
for (var e of engines) {console.log(e);}
// Gecko
// Trident
// Webkit
var es6 = new Map();
es6.set("edition", 6);
es6.set("committee", "TC39");
es6.set("standard", "ECMA-262");for (var [name, value] of es6) {
console.log(name + ": " + value);}
// edition: 6
// committee: TC39
// standard: ECMA-262

遍历时需要注意两个地方：
1.遍历的顺序是按照各个成员被添加进去的顺序输出的
2.Set遍历时返回的是一个值，而Map遍历返回的是一个数组

计算生成的数据结构

entries() 返回一个遍历器对象，用来遍历[键名, 键值]组成的数组。对于数组，键名就是索引值；对于 Set，键名与键值相同。Map 结构的 Iterator 接口，默认就是调用entries方法。

keys() 返回一个遍历器对象，用来遍历所有的键名。

values() 返回一个遍历器对象，用来遍历所有的键值。

Interator对对象的遍历

因为对象默认没有Iterator接口，所以不能使用for…of循环，但是可以使用for…in循环得出键名，然后for…of循环键名

for (var key of Object.keys(someObject)) {
console.log(key + ': ' + someObject[key]);}

Interator与其他遍历语法比较

（1）最原始的for循环 （写法麻烦）
（2）forEach循环 （无法中途跳出循环，break和return都不行）
（3）for…in循环 （遍历出来是字符串1，2，3；不仅仅遍历数字键名，会遍历手动添加的其他键，甚至原型链上的键）
（4）for…of循环 （语法简洁，可以break;return;continue;配合使用）

参考文献
阮一峰官网（Iterator 和 for…of 循环）