es6 Iterator笔记

前言

日常开发经常用到的遍历,es6其中一章单独讨论了Iterator但对其概念很模糊,因此想深入研究下。


基础概念

Iterator 的作用有三个:

  1. 为各种数据结构,提供一个统一的、简便的访问接口
  2. 使得数据结构的成员能够按某种次序排列;
  3. ES6 创造了一种新的遍历命令for...of循环,Iterator 接口主要供for...of消费。
Iterator 的遍历过程是这样的。
  1. 创建一个指针对象,指向当前数据结构的起始位置。也就是说,遍历器对象本质上,就是一个指针对象
  2. 第一次调用指针对象的next方法,可以将指针指向数据结构的第一个成员。
  3. 第二次调用指针对象的next方法,指针就指向数据结构的第二个成员。
  4. 不断调用指针对象的next方法,直到它指向数据结构的结束位置。

每一次调用next方法,都会返回数据结构的当前成员的信息。具体来说,就是返回一个包含value和done两个属性的对象。其中,value属性是当前成员的值,done属性是一个布尔值,表示遍历是否结束。

// 模拟next方法返回值的例子
var it = makeIterator(['a', 'b']);

it.next() // { value: "a", done: false }
it.next() // { value: "b", done: false }
it.next() // { value: undefined, done: true }

function makeIterator(array) {
  var nextIndex = 0;
  return {
    next: function() {
      return nextIndex < array.length ?
        {value: array[nextIndex++], done: false} :
        {value: undefined, done: true};
    }
  };
}

由于 Iterator 只是把接口规格加到数据结构之上,所以,遍历器与它所遍历的那个数据结构,实际上是分开的,完全可以写出没有对应数据结构的遍历器对象,或者说用遍历器对象模拟出数据结构。


默认 Iterator接口

ES6 规定,默认的 Iterator 接口部署在数据结构的Symbol.iterator属性,或者说,一个数据结构只要具有Symbol.iterator属性,就可以认为是“可遍历的”(iterable)。
Symbol.iterator是一个当前数据结构默认的遍历器生成函数,执行这个函数,就会返回一个遍历器。这是一个预定义好的、类型为 Symbol 的特殊值,所以要放在方括号内。

const myIterable = {};
myIterable[Symbol.iterator] = function* () {
  yield 1;
  yield 2;
  yield 3;
};
[...myIterable] // [1, 2, 3]

class Collection {
  *[Symbol.iterator]() {
    let i = 0;
    while(this[i] !== undefined) {
      yield this[i];
      ++i;
    }
  }
}
let myCollection = new Collection();
myCollection[0] = 1;
myCollection[1] = 2;

for(let value of myCollection) {
  console.log(value);
}
// 1
// 2

上述的案例中。function* (){}为函数生成器,与普通函数的区别是通常中间用yeild作暂停执行的标记(类似return),可以通过next方法恢复执行。
a[mySymbol] = 'Hello!'let a = { [mySymbol]: 'Hello!' }两种方法都可以把Symbol添加为属性名。
案例中实际为命名某Symbol属性指向一个Generator函数用于遍历,即添加了遍历器接口,在触发循环遍历时会被调用。
原生具备 Iterator 接口的数据结构:Array、Map、Set、String、TypedArray、函数的 arguments 对象、NodeList 对象。

Object之所以没有默认部署 Iterator 接口,是因为对象的哪个属性先遍历,哪个属性后遍历是不确定的,需要开发者手动指定。本质上,遍历器是一种线性处理,对于任何非线性的数据结构,部署遍历器接口,就等于部署一种线性转换。不过,严格地说,对象部署遍历器接口并不是很必要,因为这时对象实际上被当作 Map 结构使用,ES5 没有 Map 结构,而 ES6 原生提供了。


调用 Iterator 接口的场合

上面的案例也涉及到了。

  1. 解构赋值
  2. ...扩展运算符
  3. yield*后面跟的是一个可遍历的结构,它会调用该结构的遍历器接口。yield*后面的 Generator 函数(没有return语句时),等同于在 Generator 函数内部,部署一个for...of循环。
function* bar() {
  yield 'x';
  yield* foo();
  yield 'y';
}
// 等同于
function* bar() {
  yield 'x';
  yield 'a';
  yield 'b';
  yield 'y';
}
// 等同于
function* bar() {
  yield 'x';
  for (let v of foo()) {
    yield v;
  }
  yield 'y';
}
for (let v of bar()){
  console.log(v);
}
// "x"
// "a"
// "b"
// "y"
  1. 其他场合for...ofArray.from()Map(), Set(), WeakMap(), WeakSet()(比如new Map([['a',1],['b',2]]))Promise.all()Promise.race()例如此类的遍历方法

遍历器对象的throw和return

遍历器对象除了具有next方法,还可以具有return方法和throw方法。如果你自己写遍历器对象生成函数,那么next方法是必须部署的,return方法和throw方法是否部署是可选的

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

情况一输出文件的第一行以后,就会执行return方法,关闭这个文件;情况二会在执行return方法关闭文件之后,再抛出错误。
Generator 规格,return方法必须返回一个对象

// throw()是将yield表达式替换成一个throw语句。
gen.throw(new Error('出错了')); // Uncaught Error: 出错了
// 相当于将 let result = yield x + y
// 替换成 let result = throw(new Error('出错了'));

// return()是将yield表达式替换成一个return语句。
gen.return(2); // Object {value: 2, done: true}
// 相当于将 let result = yield x + y
// 替换成 let result = return 2;

因此上述行为符合,先执行内部,再中断返回或抛出错误


心得总结

Iterator,其涉及到了Symbol和Generator的知识点。从最基本的原生可遍历对象开始入手,难点就在于理解函数生成器如何运作以及其与Iterator 接口关联起来。
说实话现在日常业务开发很少涉及到去添加或重写Iterator 接口。但是一些组件工具方法中,这是可以利用的“骚操作”。


参考

阮一峰的ES6--Iterator 和 for...of 循环

你可能感兴趣的:(es6 Iterator笔记)