JS中的迭代器(iterator)和生成器(generator)

迭代器

迭代器是一个对象，是确使用户可在容器对象（container，例如链表或数组）上遍访的对象，使用该接口无需关心对象的内部实现细节。
迭代器有next属性，其对应的方法有如下的要求：
一个无参数或者一个参数的函数，返回一个应当拥有以下两个属性的对象：

• done（boolean） 如果迭代器可以产生序列中的下一个值，则为 false。（这等价于没有指定 done 这个属性。）如果迭代器已将序列迭代完毕，则为 true。这种情况下，value 是可选的，如果它依然存在，即为迭代结束之后的默认返回值。
• value
  迭代器返回的任何 JavaScript 值。done 为 true 时可省略。

	const friends = ['lilei', 'kobe', 'james'];
    let index = 0
    const friendsIterator = {
       next: function() {
       if (index < friends.length)
           return { done: false, value: friends[index++] }
       } else {
       	   return { done: true, value: friends[index++] }
       }
    }
    console.log(friendsIterator.next().value);
    console.log(friendsIterator.next().value);
    console.log(friendsIterator.next().value);

可迭代对象：

当一个对象实现了iterable protocol协议时，它就是一个可迭代对象；它和迭代器是不一样的。这个对象的要求是必须实现 @@iterator 方法，在代码中我们使用 Symbol.iterator 访问该属性；

	// 可迭代对象
    const iteratorObj = {
        names: ['leilei', 'tom', 'mark'],
        index: 0,
        [Symbol.iterator]: function() {
            return {
                // 这边使用箭头函数，以使this指向iteratorObj
                next: () => {
                    if (this.index < this.names.length) {
                        return { done: false, value: this.names[this.index++] }
                    } else {
                        return { done: true, value: 'no name' }
                    }
                }
            }
        }
    }
    // 获取迭代器
    const iterator1 = iteratorObj[Symbol.iterator]()
    console.log(iterator1.next());
    console.log(iterator1.next());
    console.log(iterator1.next());
    console.log(iterator1.next());	

事实上我们平时创建的很多原生对象已经实现了可迭代协议，会生成一个迭代器对象的：String、Array、Map、Set、arguments对象、NodeList集合；

生成器

生成器是ES6中新增的一种函数控制、使用的方案，它可以让我们更加灵活的控制函数什么时候继续执行、暂停执行等。
生成器函数也是一个函数，但是和普通的函数有一些区别：

• 首先，生成器函数需要在function的后面加一个符号*：
• 其次，生成器函数可以通过yield关键字来控制函数的执行流程：
• 最后，生成器函数的返回值是一个Generator（生成器）：
  生成器事实上就是一种特殊的迭代器；
  MDN的解释：Instead, they return a special type of iterator, called a Generator.

 function* getName() {
  console.log('函数开始执行');
      const value1 = 'tom'
      console.log(value1)
      yield value1

      const value2 = 'mary'
      console.log(value2);
      yield value2
      const value3 = 'tony'
      console.log(value3)
      yield value3
	  console.log('函数执行结束')
  }
  // 返回生成器
  const iterator = getName()
  console.log(iterator.next()); 
  console.log(iterator.next());
  console.log(iterator.next());
  console.log(iterator.next());
  // 函数开始执行
  // tom
  // { value: 'tom', done: false }
  // mary
  // { value: 'mary', done: false }
  // tony
  // { value: 'tony', done: false }
  // '函数执行结束'
  // { value: undefined, done: true }

注意：直接调用生成器函数是不会执行的，它会返回生成器。yield表示每次会在这儿停止。
其中，yield可以返回值。

next(传递参数)

生成器的next可以传递参数，而且这个参数会作为上一个yield语句的返回值；

function* sum() {
    const value1 = 10;
     const n1 = yield value1; // 这个n1的值为5

     const value2 = 20 * n1
     /** 
     * 注意此处的n接收的是next()传来的值，和上面的value2的值没有必然关联，当然我们也可以把第一
     * 次的结果当作参数传入，视实际情况而定
     */ 
     const n2 = yield value2 // 这个n2的值为10

     const value3 = 30 * n2
     yield value3
 }
 const iterator = sum()
 console.log('第一次的值：', iterator.next());
 console.log('第二次的值：', iterator.next(5)); // 传给第一次yield的返回值
 console.log('第三次的值：', iterator.next(10)); // 传给第二次yield的返回值
 // 第一次的值： {value: 10, done: false}
 // 第二次的值： {value: 100, done: false}
 // 第三次的值： {value: 300, done: false}

生成器提前结束 - return函数

return传值后这个生成器函数就会结束，之后调用next不会继续生成值了；

	function* sum() {
    	const value1 = 10;
        const n1 = yield value1;

        // 相当与在这执行了以下代码
        // return 5
        const value2 = 20 * n1
        const n2 = yield value2

        const value3 = 30 * n2
        yield value3
    }
    const iterator = sum()
    console.log('第一次的值：', iterator.next());
    console.log('第二次的值：', iterator.return(5)); 
    // 第一次的值： {value: 10, done: false}
    // 第二次的值： {value: 5, done: true}

生成器抛出异常 - throw函数

抛出异常后我们可以在生成器函数中捕获异常；
但是在catch语句中不能继续yield新的值了，但是可以在catch语句外使用yield继续中断函数的执行；

function* sum() {
    const value1 = 10;
    yield value1;
    
    try {
        const value2 = 20
        yield 20
    } catch (error) {
        console.log(error);
        // yield '哈哈，错了'
    }

    const value3 = 30
    yield value3
}
const iterator2 = sum()
console.log('第一次的值：', iterator2.next());
console.log('第二次的值：', iterator2.next());
// 注意：throw紧跟着上个next()执行异常处理，所以要看好应该进行异常处理的位置
console.log('第三次的值：', iterator2.throw('有错误')); 
console.log('第四次的值：', iterator2.next());

// 结果：
// 第一次的值： {value: 10, done: false}
// 第二次的值： {value: 20, done: false}
// 有错误
// 第三次的值： {value: 30, done: false}
// 第四次的值： {value: undefined, done: true}