迭代器与生成器

《JavaScript高级程序设计》读书笔记

迭代器

实现 Iterable 接口（可迭代协议）要求同时具备两种能力：支持迭代的自我识别能力和创建实现
Iterator 接口的对象的能力。这个属性必须使用特殊的 Symbol.iterator 作为键。

内置类型实现的Iterabled 接口：

• 字符串
• 数组
• 映射
• 集合
• arguments 对象
• NodeList 等Dom 集合类型

let num = 1
let obj = {}
let str = 'abc'
let arr = ['a','b','c']
let map = new Map().set('a', 1).set('b', 2)
let set = new Set().add('a').add('b')
console.log(num[Symbol.iterator]) // undefined
console.log(obj[Symbol.iterator]) // undefined
// 实现了迭代器工厂函数
console.log(str[Symbol.iterator]) // [Symbol.iterator]() { [native code] }
console.log(arr[Symbol.iterator]) //  values() { [native code] }
console.log(map[Symbol.iterator]) // entries() { [native code] }
console.log(set[Symbol.iterator]) //  values() { [native code] }
// 调用这个工厂函数会生成一个迭代器
console.log(str[Symbol.iterator]()) // StringIterator {}
console.log(arr[Symbol.iterator]()) // Array Iterator {}
console.log(map[Symbol.iterator]()) // MapIterator {"a" => 1, "b" => 2}
console.log(set[Symbol.iterator]()) // SetIterator {"a", "b"}

接收可迭代对象的原生语言（会在后台调用提供的可迭代对象的这个工厂函数，从而创建一个迭代器）：

• for -of 循环
• 数组解构
• 扩展操作符
• Array.from()
• 创建集合
• 创建映射
• Promise.all()接收由期约组成的可迭代对象
• Promise.race()接收由期约组成的可迭代对象
• yield*操作符，在生成器中使用

迭代器 API 使用 next()方法在可迭代对象中遍历数据。每次成功调用 next()，都会返回一个 IteratorResult 对象，其中包含迭代器返回的下一个值。

迭代器对象 IteratorResult 包含两个属性：done 和 value。 done 是一个布尔值，表示是否还可以再次调用 next()取得下一个值； value 包含可迭代对象的下一个值。done为 true 为耗尽。

let arr = ['foo', 'baz'];
let iter = arr[Symbol.iterator]();
console.log(iter.next()); // { done: false, value: 'foo' }
// 在数组中间插入值
arr.splice(1, 0, 'bar');
console.log(iter.next()); // { done: false, value: 'bar' }
console.log(iter.next()); // { done: false, value: 'baz' }
console.log(iter.next()); 

自定义迭代器

Counter 类只能被迭代一定的次数：

class Counter {
    // Counter 的实例应该迭代 limit 次
    constructor(limit) {
        this.count = 1;
            this.limit = limit;
    }
    next() {
        if (this.count <= this.limit) {
            return { done: false, value: this.count++ };
        } else {
            return { done: true, value: undefined };
        }
    }
    [Symbol.iterator]() {
        return this;
    }
}
let counter = new Counter(3);
for (let i of counter) {
    console.log(i);
}
// 1
// 2
// 3

一个可迭代对象能够创建多个迭代器：

class Counter {
  constructor(limit) {
    this.limit = limit
  }
  [Symbol.iterator]() {
    let count = 1,
      limit = this.limit
    return {
      next() {
        if (count <= limit) {
          return { done: false, value: count++ }
        } else {
          return { done: true, value: undefined }
        }
      },
    }
  }
}
let counter = new Counter(3)
for (let i of counter) {
  console.log(i)
}
// 1
// 2
// 3
for (let i of counter) {
  console.log(i)
}
// 1
// 2
// 3

提前终止迭代器

• for-of 循环通过 break、 continue、 return 或 throw 提前退出；
• 解构操作并未消费所有值。

class Counter {
  constructor(limit) {
    this.limit = limit
  }
  [Symbol.iterator]() {
    let count = 1,
      limit = this.limit
    return {
      next() {
        if (count <= limit) {
          return { done: false, value: count++ }
        } else {
          return { done: true }
        }
      },
      return() {
        console.log('Exiting early')
        return { done: true }
      },
    }
  }
}
let counter1 = new Counter(5)
for (let i of counter1) {
  if (i > 2) {
    break
  }
  console.log(i)
}

// 1
// 2
// Exiting early
let counter2 = new Counter(5)
try {
  for (let i of counter2) {
    if (i > 2) {
      throw 'err'
    }
    console.log(i)
  }
} catch (e) {}
// 1
// 2
// Exiting early
let counter3 = new Counter(5)
let [a, b] = counter3
// Exiting early

生成器

可以自定义迭代器和实现协程。生成器的形式是一个函数，函数名称前面加一个星号（ *）表示它是一个生成器。只要是可以定义函数的地方，就可以定义生成器。

// 生成器函数声明
function* generatorFn() {}
// 生成器函数表达式
let generatorFn = function* () {}
// 作为对象字面量方法的生成器函数
let foo = {
  *generatorFn() {},
}
// 作为类实例方法的生成器函数
class Foo {
  *generatorFn() {}
}
// 作为类静态方法的生成器函数
class Bar {
  static *generatorFn() {}
}

调用生成器函数会产生一个生成器对象。生成器对象一开始处于暂停执行（ suspended）的状态，只会在初次调用 next()方法后开始执行。next()方法有一个 done 属性和一个 value 属性，value 属性是生成器函数的返回值，默认值为 undefined。

生成器对象实现了 Iterable 接口，默认的迭代器是自引用的

function* generatorFn() {}
const g = eneratorFn();
console.log(g === g[Symbol.iterator]()); // true

通过yield 中断执行

yield 关键字可以让生成器停止和开始执行，遇到yield 关键字之前会正常执行，遇到后会停止执行，函数作用域的状态会被保留，通过调用next() 方法恢复执行。

1. 生成器对象作为可迭代对象

function* generatorFn() {
    yield 1;
    yield 2;
    yield 3;
}
for (const x of generatorFn()) {
    console.log(x);
}
// 1
// 2
// 3

function* nTimes(n) {
    while(n--) {
        yield
    }
}
for( let x of nTimes(3)){
    console.log('ddd');
}

2. 使用yield 实现输入和输出

yield 关键字可以作为函数的中间参数使用。上一次让生成器函数暂停的yield 关键字会接受到传给next() 方法的第一个值，第一次调用next() 传入的值不会被使用。

function* gFn(initial) {
    console.log(initial);
    console.log(yield)
    console.log(yield);
}
let g = gFn('foo');
g.next('bar'); // foo  (第一次调用是为了开始执行生成器函数)
g.next('pig'); // pig
g.next('apple'); // apple

3. 产生可迭代对象

可以使用星号增强yield 的行为，让它能够迭代一个可迭代对象，从而一次产出一个值；

// 这两个函数等价
function* gFn1() {
    for(const x of [1, 2, 3]){
        yield x;
    }
}
function* gFn2() {
    yield* [1, 2, 3];
}

4. 使用yield* 实现递归算法

function* nTime(n) {
    if(n > 0) {
        yield* nTimes(n - 1);
        yield n -1;
    }
}

生成器作为默认迭代器

class Foo {
    constructor(){
        this.values = [1, 2, 3];
    }
    * [Symbol.iterator]() {
        yield* this.values;
    }
}
const f= new Foo();
for(const x of f) {
    console.log(x);
}
// 1   2    3

提前终止生成器

• return() 方法会强制生成器进入关闭状态
• throw() 方法会在暂停的时候将一个提供的错误注入到生成器对象中。如果错误未被处理，生成器就会关闭

function* genFn() {
    for( const x of [1, 2, 3]) {
        yield x;
    }
}
const g = genFn();
console.log(g);  // genFn {<suspended>}
console.log(g.return(4)); // console.log(g.return(4));
console.log(g); // genFn {<closed>}

function* genFn2() {
    for( const x of [1, 2, 3]) {
        yield x;
    }
}
const g2 = genFn2();
console.log(g2);  // genFn2{<suspended>}
try{
    g2.throw('foo');
} catch(e) {
    console.log('foo'); // foo
}
console.log(g2); // genFn2 {<closed>}