JavaScript Generator 函数迭代器

Generator 函数迭代器

一.概念

Generator函数是ES6提供的一种异步编程解决方案,语法行为与传统函数完全不同.

语法上,可以把它理解成Generator函数是一个状态机,封装了多个内部状态.

形式上,Generator函数是一个普通函数,但是有两个特征:

• function关键字与函数名之间有一个星号 *
• 函数体内部使用yield表达式,定义不同的内部状态(yield即产出)

二.使用Generator

//Generator遍历器生成函数
function* helloGenerator() {
    yield 'hello';
    yield 'world';
    return 'result';
}
var iterator = helloGenerator();
console.log(iterator);//迭代器对象
console.log(iterator.next());//{value: "hello", done: false}
console.log(iterator.next());//{value: "world", done: false}
console.log(iterator.next());//{value: "result", done: true}
console.log(iterator.next());//{value: undefined, done: true}

1.遍历器对象

上述代码,定义了一个Generator函数helloGenerator.当我们调用它的时候,不会立即执行,而是会返回一个迭代器对象(Object Iterator).

要执行遍历器对象,就必须调用遍历器对象的next方法,相当于一个指针,每次执行next方法,内部指针都会从函数的头部或上一次停下来的地方开始执行,直到遇到yield表达式(或return语句)为止.也就是说Generator函数是分段执行的,yield表达式是暂停执行的标记,而next方法可以恢复执行

上面调用了4次的next方法,每次调用各不相同

• 第一次调用: Generator函数开始执行,直到遇到第一个yield表达式为止.next方法返回一个对象,它的value属性就是当前yield表达式的值hello,done属性的值false,表示遍历还未结束
• 第二次调用:Generator函数从上次yield表达式停下的地方,一直执行到下一个yield表达式.next方法返回的对象的value属性就是当前yield表达式的值,world,done属性的值false,表示遍历还未结束
• 第三次调用:Generator函数从上次yield表达式停下的地方,一直执行到return语句(如果没有return语句,就执行到函数结束).next方法返回的对象的value属性就是return语句后面的表达式的值result(如果没有return语句,则value属性的值为undefined),done属性的值true,表示遍历结束
• 第四次调用，此时 Generator 函数已经运行完毕，next方法返回对象的value属性为undefined，done属性为true。以后再调用next方法，返回的都是这个值。

总结一下:调用Generator函数,返回一个遍历器对象,代表Generator函数的内部指针,以后,每次调用遍历器对象的next方法,就会返回一个有着value和done两个属性的对象,value属性表示当前的内部状态的值,是yield表达式后面那个表达式的值,而done属性是一个布尔值,表示是否遍历结束

2.Generator写法

ES6没有规定,function关键字与函数名之间的星号,写在哪个位置,所以只要是中间就行

function * foo(x, y) { ··· }
function *foo(x, y) { ··· }
function* foo(x, y) { ··· }
function*foo(x, y) { ··· }

写法看个人习惯,都可以,不过一般推荐第三种

3.yield表达式

由于Generator函数返回的遍历器对象,只有调用next方法,才会遍历下一个内部状态.所以提供了一种可以暂停执行的函数.yield表达式就是暂停标志

遍历器对象的next方法的运行逻辑如下:

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

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

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

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

注意: yield表达式后面的表达式,只有当调用next方法,内部指针指向该语句时才会执行

1.yield与return区别

相同点:都能返回紧跟在语句后面的那个表达式的值

不同点:

• 每次遇到yield,函数都会暂停执行,下一次再从该位置继续向后执行,而return语句不具备位置记忆功能
• 一个函数里,只能执行一次或者说一个return语句,但是可以执行多次或者说多个yield表达式
• 正常函数只能返回一个值,因为只能执行一次return,但是Generator函数可以返回一系列的值,因为可以有多个yield

2.yield不存在于Generator时

Generator函数可以不用yield表达式,这时就变成了一个单纯的暂缓执行函数.

function* foo() {
    console.log('执行');
}
var fooGenerator = foo();
setTimeout(function () {
    fooGenerator.next()
}, 2000);

注意:yield表达式只能在Generator函数里面,用在其他地方都会报错

三.与Iterator的接口的关系

任意一个对象的Symbol.iterator方法,等于该对象的遍历器生成函数(Generator),调用该函数会返回该对象的一个遍历器对象

原生js对象不具备Iterator接口,无法使用上述接口,将Generator函数加到对象的Symbol.iteratore属性上面即可使用

function* objGenerator() {
    let keys = Object.keys(this); // ["name", "sex", "aeg"]
    for (let key of keys) {
        yield [key, this[key]]; // [key,value]
    }
}

let xmObj = { name: 'xiaoming', sex: '男', aeg: 23 };

// 将 Generator 函数加到对象的Symbol.iterator属性上面
xmObj[Symbol.iterator] = objGenerator;

for (let [key, value] of xmObj) { // 可以使用for/of遍历
    console.log(`${key}: ${value}`);
}
// name: xiaoming
// sex: 男
// aeg: 23

for…of循环，扩展运算符（…）等方法，内部调用的都是遍历器接口。