JS Generator 函数的含义与用法实例总结

下面我将为您详细讲解“JS Generator 函数的含义与用法实例总结”的完整攻略。

什么是Generator函数？

Generator函数是ES6中新增的一种异步编程解决方案，它是一个状态机，封装了多个内部状态，执行Generator函数会返回一个迭代器对象，通过调用这个迭代器对象的next方法实现状态的切换。

Generator函数的特点和用法

1.特点：
* function关键字与函数名之间有一个星号；
* 函数体内部使用yield表达式来定义不同状态；
* 调用Generator函数返回的是一个迭代器对象，即在调用Generator函数时，函数内部的代码并不会执行，直到调用迭代器对象的next方法时才会执行。

2.用法：
* 定义于函数形式差别不大；
* 使用next方法调用迭代器实现异步遍历操作；
* 使用yield方法控制状态的切换；
* 通过try...catch语句来捕获可能的错误。

下面通过两个示例来进一步说明：

示例一：计算斐波那契数列

function* fibonacci(){
    let a = 0;
    let b = 1;
    while(true){
        yield a;
        [a, b] = [b, a + b];
    }
}

let fib = fibonacci();
for (let i = 0; i < 10; i++) {
    console.log(fib.next().value);
}

执行结果：

0
1
1
2
3
5
8
13
21
34

这里的Generator函数以斐波那契数列为例，使用yield关键字实现状态的切换。具体实现方式是使用数组结构来交换a、b的值，从而得到下一个斐波那契数列的值。通过for循环遍历并输出结果。

示例二：异步操作

function sleep(time, val) {
    return new Promise(resolve => setTimeout(() => resolve(val), time));
}

function* gen() {
    let x = yield sleep(1000, 1); // 等待1秒
    let y = yield sleep(2000, 2); // 等待2秒
    return x + y;
}

let g = gen();

g.next().value.then(function(val){ // 第一次调用返回一个promise对象
    return g.next(val).value; // 因为上一个yield表达式返回了一个Promise对象，所以调用value属性获取Promise对象的结果
}).then(function (val) {
    console.log(val);  // 最终输出结果3
    return;
});

执行结果：

3

这里的Generator函数通过异步操作实现状态的切换，在实现异步操作时，yield返回的是一个Promise对象，我们通常通过next().value获取到该Promise对象，然后通过Promise返回的结果继续执行后面的代码。通常我们使用Promise的then方法来继续操作下一步的任务。

通过以上两个示例，我们可以看到Generator函数对于异步编程是非常方便的，并且实现也相对简单，它可以帮助我们优雅地解决异步编程过程中的很多问题。