ES6的迭代器和生成器

ES6的迭代器

在es6之前，遍历数组都需要使用for循环，通过变量来跟踪数组的索引。如果多个循环嵌套就需要追踪多个变量，代码复杂度会大大增加，也容易产生错用循环变量的bug。
ES6 引入了一个全新的迭代器的概念，它提供一种方法能够顺序访问一个聚合对象中的各个元素，而不需要暴露该对象的内部表现。

迭代器对象（iterator）

ES6 对迭代器对象的定义是：实现了next方法的对象，其中next方法返回一个对象，这个对象包含两个属性，分别是done和value.

Symbol.iterator ES6新增
ES6中原生的迭代器有Array、Set、Map和String，for…of能够遍历它们是因为它们具有Symbol.iterator属性该属性指向该数据结构的默认迭代器方法，当使用for…of…迭代该数据结构时js引擎就会调用其Symbol.iterator方法，从而返回相应的默认迭代器。举例：

let arr = [1,2,4,6];
//也可以使用ES6提供的next()方法手工遍历
let iterator = arr[Symbol.iterator]();
console.log(iterator.next()); // {value: 1, done: false}
console.log(iterator.next()); // {value: 2, done: false}
console.log(iterator.next()); // {value: 4, done: false}
console.log(iterator.next()); // {value: 6, done: false}
console.log(iterator.next()); // {value: undefined, done: true}

//Symbol.iterator 来检测对象是否为可迭代的对象
  let arr = []; //true
        let obj = {}; //true
        let str = ''; //true
        let map = new Map(); //true
        let set = new Set(); //true
        let num = 123; //false
        console.log(typeof num[Symbol.iterator]);
        let isIterator1 = typeof arr[Symbol.iterator] === "function";
        let isIterator2 = Object.prototype.toString.call(num[Symbol.iterator]) === "[object Function]"
        console.log(isIterator1);

特点

1. 当 done 为 true 时则遍历结束
2. 每当我们执行一次next()方法，就会返回一个对象： {value: “”, done: false}
3. 当数据较多时 可以使用 for-fo

模拟源码：

const obj = {
    name: '小花',
     age: '18',
     sex:"男"，
    id: 1,
    [Symbol.iterator]: function () { // 迭代器属性
        const keys = Object.keys(this); // 读取对象键列表
        let keyIndex = 0; // 遍历未知
        const self = this; // 保存this，next中的function会有自己的this
        return { // 返回带有next()的对象
            next: function () {
                if (keyIndex < keys.length) { // 防止越界
                    const key = keys[keyIndex];
                    keyIndex++; // 移动到下一个位置
                    return {
                        value: [key, self[key]], // 键值对数组
                        done: false
                    }
                }
                return { // 遍历结束
                	 value: undefined,
                    done: true
                }
            }
        }
    }
};
 const it = items[Symbol.iterator]();
        console.log(it.next());
        

for-of

for-of 是 ES6 提供的行语法，它是和迭代器配合使用的，可以确保迭代的顺序

  for (const value of obj) {
        console.log(value );
    }

for…of 有哪些显著的优点呢？
有着同 for…in 一样的简洁语法，但是没有 for…in 那些缺点
不同于 forEach 方法，它可以与 break、continue 和 return 配合使用
提供了遍历所有数据结构的统一操作接口

使用 Generators 生成迭代器对象（iterator）

用户自定义迭代器对象，需要维护内部状态，迭代器对象越复杂，内部状态越难维护。通过 Generators 可以简化迭代器对象的定义，用户只需要定义一个函数，这个函数会自己维护内部状态。这个函数需要满足两个条件：

使用 function*
使用至少一个yield表达式

generator函数 可以通过yield关键字 将函数挂起，为改变执行流提供了可能，同时为了做异步编程提供了方案。

	//1.function后面 函数名之前有个*
	//2.只能在函数内部使用yield表达式，让函数挂起
     function* fn() {
         console.log('one')
         yield 2;
         console.log('one')
         yield 3;
         console.log('one')
     }
     // 原型的原型有next()方法
     let fun = fn()
     console.log(fun.next())
     console.log(fun.next())
     console.log(fun.next())

总结：generator函数是分段执行的，yield语句是暂停执行，而next()是恢复执行