Generator 函数和普通函数的区别是什么？

推荐答案

Generator 函数和普通函数的主要区别在于它们的执行方式和控制流程：

1. 执行方式：

   • 普通函数：普通函数一旦调用，就会从头到尾执行，直到函数结束或遇到 return 语句。
   • Generator 函数：Generator 函数可以暂停执行，并在需要时恢复执行。它通过 yield 关键字来暂停函数的执行，并通过 next() 方法来恢复执行。

2. 返回值：

   • 普通函数：普通函数返回一个单一的值（或 undefined）。
   • Generator 函数：Generator 函数返回一个迭代器对象，该对象可以通过 next() 方法逐步获取 yield 表达式的值。

3. 控制流程：

   • 普通函数：普通函数的控制流程是线性的，一旦开始执行，就会一直运行到结束。
   • Generator 函数：Generator 函数的控制流程是可控的，可以在任意 yield 处暂停，并在需要时继续执行。

本题详细解读

1. 执行方式

普通函数的执行是“一次性”的，调用后立即执行，直到函数结束或遇到 return 语句。例如：

function normalFunction() {
    console.log('Start');
    console.log('End');
}

normalFunction(); // 输出: Start End

而 Generator 函数则可以通过 yield 关键字暂停执行，并在需要时通过 next() 方法恢复执行。例如：

// www.javascriptcn.com code example
function* generatorFunction() {
    console.log('Start');
    yield;
    console.log('End');
}

const gen = generatorFunction();
gen.next(); // 输出: Start
gen.next(); // 输出: End

2. 返回值

普通函数返回一个单一的值（或 undefined），而 Generator 函数返回一个迭代器对象。这个迭代器对象可以通过 next() 方法逐步获取 yield 表达式的值。例如：

// www.javascriptcn.com code example
function* generatorFunction() {
    yield 1;
    yield 2;
    yield 3;
}

const gen = generatorFunction();
console.log(gen.next().value); // 输出: 1
console.log(gen.next().value); // 输出: 2
console.log(gen.next().value); // 输出: 3

3. 控制流程

普通函数的控制流程是线性的，一旦开始执行，就会一直运行到结束。而 Generator 函数的控制流程是可控的，可以在任意 yield 处暂停，并在需要时继续执行。这使得 Generator 函数非常适合处理异步操作和复杂的控制流程。例如：

// www.javascriptcn.com code example
function* asyncGenerator() {
    const result1 = yield asyncOperation1();
    const result2 = yield asyncOperation2(result1);
    return result2;
}

const gen = asyncGenerator();
gen.next().value.then(result1 => {
    gen.next(result1).value.then(result2 => {
        console.log(gen.next(result2).value); // 输出最终结果
    });
});

通过这种方式，Generator 函数可以有效地管理异步操作的执行顺序，而不需要使用回调函数或 Promise 链。