ES6 Iterator与Generator

一 Iterator

　　遍历器（Iterator），它是一种接口，为各种不同的数据结构提供统一的访问机制。。即for...of循环，当使用for...of循环遍历某种数据结构时，该循环会自动去寻找Iterator接口。任何数据结构只要部署Iterator接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）

　　1 作用：　

• 1）是为各种数据结构，提供一个统一的、简便的访问接口　　
• 2）使得数据结构的成员能够按某种次序排列　
• 3）Iterator接口主要供for...of消费

　　2 模拟next方法返回值的例子

 1     //一个遍历器生成函数，作用就是返回一个遍历器对象
 2     function makeIterator(arr){
 3         var index = 0;
 4         return {
 5             next: function() {
 6                if(index<arr.length){
 7                    return {value:arr[index++],done:false}
 8                }else{
 9                    return {value: undefined,done:true}
10                }
11             }
12         }
13     }
14     var it = makeIterator(['a', 'b']);
15     //指针对象的next方法，用来移动指针。
16     //开始时，指针指向数组的开始位置。
17     //然后，每次调用next方法，指针就会指向数组的下一个成员。
18     //第一次调用，指向a；第二次调用，指向b。
19     console.log(it.next())//Iterator.html:21 {value: "a", done: false}
20     console.log(it.next())//{value: "b", done: false}
21     console.log(it.next())//{value: undefined, done: true}

　　3 工作原理：

1. 创建一个指针对象，指向数据结构的起始位置。
2. 第一次调用next方法，指针自动指向数据结构的第一个成员
3. 接下来不断调用next方法，指针会一直往后移动，直到指向最后一个成员
4. 每调用next方法返回的是一个包含value和done的对象，{value: 当前成员的值,done: 布尔值}
   • value表示当前成员的值，done对应的布尔值表示当前的数据的结构是否遍历结束。
   • 当遍历结束的时候返回的value值是undefined，done值为true

　　4 调用Iterator接口的场合

• （1）解构赋值，对数组和Set结构进行解构赋值时，会默认调用Symbol.iterator方法。
  • let [first, ...rest] = set;
• （2）扩展运算符
  • [...str]
• （3）yield* yield*后面跟的是一个可遍历的结构，它会调用该结构的遍历器接口。
• （4）for...of Array.from() Map() Set()

 //当使用扩展运算符（...）或者对数组和 Set 结构进行解构赋值时，会默认调用Symbol.iterator方法
    // 原生具备iterator接口的数据(可用for of遍历)
    //数组 字符串  Set
    let arr1 = [1, 2, 3, 4];
    let arr2 = "kaixin";
    let set = new Set(["q","w","e","r","t","y"])
    for(let i of arr1){
        console.log(i); // 1 2 3  4
    }
    console.log(...arr1) // 1 2 3 4
    console.log(...arr2) // k a i x i n
    console.log(...set) //q w e r t y
    //对象不行 因为本身没有迭代器 会报错
    var obj = { a: 2, b: 3 }
    for(let i of obj){
        console.log(i); // Iterator.html:38 Uncaught TypeError: obj is not iterable
    }
    //让对象支持for…of的办法就是手动给对象添加迭代器
    obj[Symbol.iterator] = function(){
        const _this = this
        const keys = Object.keys(this)
        let index = 0
        return {
            next(){
                return {
                    value: _this[keys[index++]],
                    done: index>keys.length
                }
            }
        }
    }
    for(let i of obj){
        console.log(i); // 2,3
    }

二 Generator 

• Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同。
• 两个特征。一是，function关键字与函数名之间有一个星号；二是，函数体内部使用yield语句，定义不同的内部状态
•  yield可暂停，next方法可启动。每次返回的是yield后的表达式结果

　　1 特点

1. 调用Generator函数后，该函数并不执行，返回的也不是函数运行结果，而是一个指向内部状态的遍历器对象
2. 每次调用next方法，内部指针就从函数头部或上一次停下来的地方开始执行，直到遇到下一个yield语句（或return语句）为止。
3. Generator函数是分段执行的，yield语句是暂停执行的标记，而next方法可以恢复执行。

　　2 写法

　　yield语句：只有调用next方法才会遍历下一个内部状态，所以其实提供了一种可以暂停执行的函数。yield语句就是暂停标志。在一个普通函数中使用yield语句，会产生一个句法错误

    //function关键字与函数名之间有一个星号；
    // 函数体内部使用yield表达式，定义不同的内部状态
    function* helloWorldGenerator(){
        console.log("开始执行")
        yield 'hello';  
        yield 'generator';
        yield '！！';
    }
    let gen = helloWorldGenerator();
    console.log(gen.next());    //generator.html:12 {value: "hello", done: false}
    console.log(gen.next());    //generator.html:13 {value: "generator", done: false}
    console.log(gen.next());   //generator.html:14 {value: "！！", done: false}
    console.log(gen.next()); //generator.html:15 {value: undefined, done: true}

　　（1）遇到yield语句，就暂停执行后面的操作，并将紧跟在yield后面的那个表达式的值，作为返回的对象的value属性值。

　　（2）下一次调用next方法时，再继续往下执行，直到遇到下一个yield语句。

　　（3）如果没有再遇到新的yield语句，就一直运行到函数结束，直到return语句为止，并将return语句后面的表达式的值，作为返回的对象的value属性值。

　　（4）如果该函数没有return语句，则返回的对象的value属性值为undefined。

　　3 next也可以传递参数

　　next方法可以带一个参数，该参数就会被当作上一个yield表达式的返回值。

    //next传递参数  
    // next方法可以带一个参数，该参数就会被当作上一个yield表达式的返回值。
    function* generatorExample () {
        console.log('开始执行')
        let result = yield 'hello'
        console.log(result)
        yield 'generator'
    }
    let gen1 = generatorExample();
    console.log(gen1.next());   
    console.log(gen1.next(123));  
    //开始执行   
    //generator.html:24 {value: "hello", done: false} 
    //123   
    //generator.html:25 {value: "generator", done: false}
    //next把123 传进去，这时候打印的result不为hello，而是123

　　4 与 Iterator 接口的关系

　　由于 Generator 函数就是遍历器生成函数，因此可以把 Generator 赋值给对象的Symbol.iterator属性，从而使得该对象具有 Iterator 接口。

    //与 Iterator 接口的关系
    // 对象没有iterator接口，用for...of遍历时便会报错。
    let obj = { username: 'kobe', age: 39 }
    for (let i of obj) {
        console.log(i) //  Uncaught TypeError: obj is not iterable
    }
    //由于 Generator 函数就是遍历器生成函数，因此可以把 Generator 赋值给对象的Symbol.iterator属性，从而使得该对象具有 Iterator 接口。
    let obj = { username: '王', age:  123}
    obj[Symbol.iterator] = function* myTest() {
        yield '王';
        yield 123;
        yield 3;
    };
    for (let i of obj) {
        console.log(i) // 王 // 123  //3
    }

　　5 yield* 表达式和取出嵌套数组

　　如果yield命令后面跟的是一个遍历器对象，需要在yield命令后面加上星号，表明它返回的是一个遍历器对象。这被称为yield*语句

    //yield* 表达式
    //如果在 Generator 函数内部，调用另一个 Generator 函数，默认情况下是没有效果的。
    //这个就需要用到yield*语句，用来在一个 Generator 函数里面执行另一个 Generator 函数。
    //如果yield命令后面跟的是一个遍历器对象，需要在yield命令后面加上星号，表明它返回的是一个遍历器对象。这被称为yield*语句
    function* inner() {
        yield 'hello!';
    }

    function* outer1() {
        yield 'open';
        yield* inner();
        yield 'close';
    }
    let out = outer1();
    console.log(out.next());  //generator.html:62 {value: "open", done: false}
    console.log(out.next());  //generator.html:63 {value: "hello!", done: false}
    console.log(out.next());  //generator.html:64 {value: "close", done: false}
    console.log(out.next());   //generator.html:65 {value: undefined, done: true}
    //例子
    // 数组
    //yield*命令可以很方便地取出嵌套数组的所有成员
    function* iterTree(tree) {
        if (Array.isArray(tree)) {//如果取的值为数组，那么遍历yield出组里的数据
            for(let i=0; i < tree.length; i++) {
                yield* iterTree(tree[i]);
            }
        } else {
            yield tree;
        }
    }
    const tree = [ 'a', ['b', 'c'], ['d', 'e'] ];
    for(let x of iterTree(tree)) {
        console.log(x);  
    }
    //a
    //b
    //c
    //d
    //e
    //或者扩展运算符
    console.log([...iterTree(tree)]) //["a", "b", "c", "d", "e"]

 　　参考链接：

• https://es6.ruanyifeng.com/#docs/generator#yield--%E8%A1%A8%E8%BE%BE%E5%BC%8F
• https://es6.ruanyifeng.com/#docs/iterator#%E5%AD%97%E7%AC%A6%E4%B8%B2%E7%9A%84-Iterator-%E6%8E%A5%E5%8F%A3
• https://www.cnblogs.com/zjx304/p/10253304.html
• http://jsrun.net/t/BZKKp