ES6学习笔记之迭代器和生成器

一、引入

这是一个十分普通的for循环，可以输出遍历arr这个数组中的每个值，我们使用迭代也可以完成这个功能，那我们说说迭代是啥

二、迭代器(iterator)

迭代器(iterator)并非JavaScript的特性，而是一种概念，需要我们自己实现

1. 什么是迭代？
   从一个数据集合中按照一定的顺序，不断的取出数据的过程。

2. 迭代和遍历的区别？
   迭代强调的是依次取出，不能确定数据的长度，也不能保证把数据全部取完。
   遍历必须保证数据的长度，循环不断的全部取出，针对于数据量过大的情况使用遍历耗时较长。

   打个简单的比方：
   对于一个数组，我们使用迭代，第一次取出arr[i],第二次就取出arr[i+1],第三次就取出arr[i+2]，以此类推，n次后就是arr[i+n]，如果arr[i+n],没有值了就是undefined
   如果是遍历的话，for(var = 0 ; i<arr.length ; i++)，我们已经必须要指定数据的长度，然后来遍历

3. 迭代器的使用场景：react框架，fetch…

4. 迭代器需要满足的条件：
   1. 拥有取出下一个数据的能力
   2. 判断是否有下一个数据

我们自己来写一个js中的迭代器

 const arr = [1,2,3,4,5]
 const iterator ={  //用于迭代数组的对象，iterator为迭代器的名称
        i : 0,
        next(){
           var result = {
           value : arr[this.i], //当前项的值
           done : this.i >= arr.length //判断时候有后续数据，false则有，true则无
         }
         this.i ++;
         return result;
      }
   }

当我们调用迭代器中的next方法，结果是

  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: undefind, done: true}

为了更好的使用迭代器，我们对上面的代码进行封装

function makeIterator(array){
  var nextIndex = 0;

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

function createIterator(arr){
     let i = 0
     return {
        next(){
            var result = {
                value : arr[i],
                done : i >= arr.length
            }
            i ++;
            return result;
        }
     }
}

运行代码

const it = createIterator([1, 2, 3, 4])
it.next()//{value: 1, done: false}
。。。。

可以看到，每调用以此it.next()，就可以获取到一个值，同时可以通过done知道是否已经迭代完成了。

三、生成器(Generator)

简单来说，生成器(generator)就是一个自带迭代器(iterator)的函数。
一个简单的例子：

function* printOneToThree() {
  yield 1;
  yield 2;
  yield 3;
}

let it = printOneToThree();
console.log(it.next()); // {value: 1, done: false}
console.log(it.next()); // {value: 2, done: false}
console.log(it.next()); // {value: 3, done: false}
console.log(it.next()); // {value: undefined, done: true}

可以看到，我们每调用一次it.next()语句,就会运行一个yield表示式，知道所有的yield表达式全部运行完毕。如此一来，我们如开篇所说，生成器具有了分段执行一个函数的能力。