深入理解ES6的迭代器与生成器

本文介绍了深入理解ES6的迭代器与生成器，分享给大家，具体如下：

循环语句的问题

var colors = ["red", "green", "blue"];for(var i=0; i<colors.length; i++){  console.log(colors[i]);}

在ES6之前，这种标准的for循环，通过变量来跟踪数组的索引。如果多个循环嵌套就需要追踪多个变量，代码复杂度会大大增加，也容易产生错用循环变量的bug。

迭代器的出现旨在消除这种复杂性并减少循环中的错误。

什么是迭代器

我们先感受一下用ES5语法模拟创建一个迭代器：

function createIterator(items) {  var i = 0;    return { // 返回一个迭代器对象    next: function() { // 迭代器对象一定有个next()方法      var done = (i >= items.length);      var value = !done ? items[i++] : undefined;            return { // next()方法返回结果对象        value: value,        done: done      };    }  };}var iterator = createIterator([1, 2, 3]);console.log(iterator.next()); // "{ value: 1, done: false}"console.log(iterator.next()); // "{ value: 2, done: false}"console.log(iterator.next()); // "{ value: 3, done: false}"console.log(iterator.next()); // "{ value: undefiend, done: true}"// 之后所有的调用都会返回相同内容console.log(iterator.next()); // "{ value: undefiend, done: true}"

以上，我们通过调用createIterator()函数，返回一个对象，这个对象存在一个next()方法，当next()方法被调用时，返回格式{ value: 1, done: false}的结果对象。

因此，我们可以这么定义：迭代器是一个拥有next()方法的特殊对象，每次调用next()都返回一个结果对象。

借助这个迭代器对象，我们来改造刚开始那个标准的for循环【暂时先忘记ES6的for-of循环新特性】：

var colors = ["red", "green", "blue"];var iterator = createIterator(colors);while(!iterator.next().done){  console.log(iterator.next().value);}

what?，消除循环变量而已，需要搞这么麻烦，代码上不是得不偿失了吗？

并非如此，毕竟createIterator()只需写一次，就可以一直复用。不过ES6引入了生成器对象，可以让创建迭代器的过程变得更加简单。

什么是生成器

生成器是一种返回迭代器的函数，通过function关键字后的星号（*）来表示，函数中会用到新的关键字yield。

function *createIterator(items) {  for(let i=0; i<items.length; i++) {    yield items[i];  }}let iterator = createIterator([1, 2, 3]);// 既然生成器返回的是迭代器，自然就可以调用迭代器的next()方法console.log(iterator.next()); // "{ value: 1, done: false}"console.log(iterator.next()); // "{ value: 2, done: false}"console.log(iterator.next()); // "{ value: 3, done: false}"console.log(iterator.next()); // "{ value: undefiend, done: true}"// 之后所有的调用都会返回相同内容console.log(iterator.next()); // "{ value: undefiend, done: true}"