面试题：JavaScript生成器与现代异步编程模型的深度融合

生成器与 async/await、Promise 的比较

性能
- 生成器：
  - 优势：理论上，生成器的执行可以按需暂停和恢复，避免不必要的计算，在一些计算密集型且需要分段执行的异步任务中有潜在性能优势。例如处理大型数据集的分段计算，当暂停执行时不会占用额外资源。
  - 劣势：手动控制执行流程，如果控制不当会增加性能开销。比如频繁的暂停和恢复操作可能导致上下文切换成本增加。且生成器本身不直接处理异步操作，需配合其他异步工具，这中间的协调可能产生性能损耗。
- async/await：
  - 优势：代码看起来像同步代码，执行顺序清晰，引擎在优化异步执行上有更好的支持，性能相对稳定。它基于 Promise，利用了 Promise 的微任务队列机制，在事件循环中的调度更高效。
  - 劣势：与简单的回调相比，async/await 函数调用和异步操作的封装会引入一些额外开销，但在现代 JavaScript 引擎优化下，这种开销通常较小。
- Promise：
  - 优势：通过链式调用管理异步操作，在处理多个异步操作的序列或并行执行时，利用微任务队列，在事件循环中能较高效地调度。例如 Promise.all 可以并行处理多个 Promise，提升整体执行效率。
  - 劣势：链式调用如果过长，代码可读性会受影响，且错误处理相对集中在.catch 中，排查具体错误源可能不太直观。另外，Promise 一旦创建就会立即执行，不像生成器可以按需控制执行。
可维护性
- 生成器：
  - 优势：提供了一种更底层的异步控制方式，对于复杂的异步控制流，开发人员可以完全掌控执行流程，当需要实现一些自定义的异步调度逻辑时，生成器有更大的发挥空间。
  - 劣势：语法相对复杂，需要手动调用 next 方法推进执行，并且错误处理需要在生成器内部和外部共同处理，代码可读性和可维护性较差。例如，一个复杂生成器函数中，next 方法的调用位置和参数传递容易出错。
- async/await：
  - 优势：代码风格更接近同步代码，简洁明了，易于理解和维护。错误处理可以像同步代码一样使用 try - catch 块，使错误定位和处理更方便。
  - 劣势：嵌套的 async 函数可能导致回调地狱的变体，虽然程度较轻，但仍需要合理规划函数结构来避免。
- Promise：
  - 优势：链式调用使得异步操作的流程较为清晰，每个.then 处理一个阶段的结果，易于理解异步操作的顺序。且 Promise 有统一的错误处理机制.catch，便于集中处理错误。
  - 劣势：长链式调用会使代码横向扩展，可读性下降，并且调试复杂链式调用中的错误可能比较困难。
灵活性
- 生成器：
  - 优势：高度灵活，可以实现自定义的异步控制流模式，如交错执行多个异步任务、暂停执行等待特定条件满足等。例如，可以实现一个异步任务队列，按照特定顺序执行任务。
  - 劣势：由于灵活性高，开发人员需要自己处理很多底层细节，如任务调度、状态管理等，增加了开发难度和出错概率。
- async/await：
  - 优势：基于 Promise，在处理常见的异步操作序列、并行操作等方面有足够的灵活性，并且能很好地与现有的基于 Promise 的库和 API 集成。
  - 劣势：相对生成器，在实现非常定制化的异步控制流时灵活性稍欠，因为它的执行流程相对固定，依赖于 Promise 的状态变化。
- Promise：
  - 优势：在处理异步操作的组合（如 all、race 等）上有很好的灵活性，可以方便地实现并行、竞争等多种异步模式。
  - 劣势：在更复杂的异步控制场景下，如动态调整异步任务执行顺序、根据运行时条件暂停和恢复任务等，不如生成器灵活。

生成器作为最佳选择的特定场景

自定义异步控制流场景 例如实现一个任务调度器，按照特定顺序依次执行多个异步任务，并且可以在任务执行过程中动态添加新任务。

function* taskGenerator() {
    yield new Promise((resolve) => {
        setTimeout(() => {
            console.log('Task 1 completed');
            resolve();
        }, 1000);
    });
    yield new Promise((resolve) => {
        setTimeout(() => {
            console.log('Task 2 completed');
            resolve();
        }, 1500);
    });
}

const taskGen = taskGenerator();
function runTasks() {
    const task = taskGen.next();
    if (!task.done) {
        task.value.then(() => {
            // 动态添加新任务
            taskGen.return(new Promise((resolve) => {
                setTimeout(() => {
                    console.log('New task completed');
                    resolve();
                }, 2000);
            })).then(() => {
                runTasks();
            });
        });
    }
}
runTasks();

处理需要暂停等待外部条件的异步操作 比如一个实时数据获取功能，只有当用户点击按钮后才继续获取下一段数据。

function* dataFetcher() {
    while (true) {
        yield new Promise((resolve) => {
            document.getElementById('fetchButton').addEventListener('click', () => {
                console.log('Fetching data...');
                setTimeout(() => {
                    console.log('Data fetched');
                    resolve();
                }, 1000);
            });
        });
    }
}

const dataGen = dataFetcher();
function startFetching() {
    dataGen.next().value.then(() => {
        startFetching();
    });
}
startFetching();

面试题：JavaScript生成器与现代异步编程模型的深度融合

知识考点

面试题答案

生成器与 async/await、Promise 的比较

生成器作为最佳选择的特定场景