当前位置：首页 > 文章列表 > 文章 > 前端 > 了解 JavaScript 生成器：强大的代码流控制工具

了解 JavaScript 生成器：强大的代码流控制工具

来源：dev.to 2024-11-28 14:18:53 0浏览收藏

推广推荐

支持 PC / 移动端，安全直达

今日不肯埋头，明日何以抬头！每日一句努力自己的话哈哈~哈喽，今天我将给大家带来一篇《了解 JavaScript 生成器：强大的代码流控制工具》，主要内容是讲解等等，感兴趣的朋友可以收藏或者有更好的建议在评论提出，我都会认真看的！大家一起进步，一起学习！

生成器是 javascript 中最强大的功能之一，它允许我们编写可以根据需要暂停和恢复的代码。与一次执行所有代码的常规函数不同，生成器使用延迟执行，增量返回值，从而更容易处理数据序列、迭代或长时间运行的进程。

发电机如何工作？

在javascript中，生成器是使用function*关键字定义的，并与yield关键字结合，允许部分执行函数。每次我们调用生成器函数时，它不会立即执行，而是返回一个允许受控执行的迭代器。

示例：

const id = (function* () {
    let i = 1;
    while (true) {
        yield i;
        i += 1;
    }
})();

在此示例中，函数生成器返回无限的数字序列，其中每个数字仅在需要时生成并返回。

yield 有什么作用？

yield 关键字停止生成器的执行并将值返回给外界。在下一个函数调用（使用 next()）时，生成器将从中断处继续。

调用生成器的样子：

console.log(id.next().value); // 1
console.log(id.next().value); // 2
console.log(id.next().value); // 3

每次调用 next() 都会返回数组的下一个值，并在下一个yield 时暂停该函数。

发电机的优点

懒惰：
生成器不会立即执行所有内容，而是仅在需要时才生成值。这非常适合处理无限序列或大型数据数组。
流量控制：
暂停和恢复该功能的可能性可以更好地控制长时间运行的进程。
效率：
生成器不是将所有值存储在内存中，而是一次返回一个值，这减少了内存消耗。

发电机的缺点

虽然生成器很有用，但它们有几个潜在的问题：

复杂的流量控制：
暂停和恢复会使代码更难理解和调试，尤其是在复杂的场景中。
表现：
在某些情况下，暂停和恢复代码可能会带来额外的开销，从而降低效率。
限量：
每次调用返回一个值，如果需要一次访问大量数据，则效率可能会很低。
兼容性：
生成器是 ecmascript 2015 (es6) 标准的一部分，因此如果没有像 babel 这样的附加工具，较旧的浏览器可能不支持它们。

替代方法

如果生成器引入太多复杂性，您可以考虑替代方案：

带回调的递归函数：

function generateid(callback, start = 1) {
    callback(start);
    settimeout(() => generateid(callback, start + 1), 0);
}

优点：
更简单的流程控制：虽然使用了递归，但在控制程序流程方面，函数的可读性和清晰性更高。
异步执行：使用settimeout可以实现异步操作，这有助于保持性能。
缺点：
递归开销：对于非常大量的迭代，可能会出现递归问题（堆栈溢出）。

循环：
对于较小的数组，生成预定数量的值的简单循环可能是更有效的选择。

function generateids(limit) {
    const ids = [];
    for (let i = 1; i <= limit; i++) {
        ids.push(i);
    }
    return ids;
}

const ids = generateids(100); // generiše prvih 100 id-eva
console.log(ids);

优点：
实现简单：这个方案很容易理解，并且没有流量控制的问题。
快速生成：所有值一次性生成，可以以更少的迭代次数提高效率。
缺点：
内存消耗：所有值都存储在内存中，这对于大型数组可能会出现问题。
不要偷懒：所有 id 都是预先生成的，如果您不需要全部 id，效率可能会很低。

迭代器：
通过 .next() 方法返回可迭代值的对象，类似于生成器，但具有更多控制权。

function createiditerator() {
    let i = 1;
    return {
        next() {
            return { value: i++, done: false };
        }
    };
}

const iditerator = createiditerator();

console.log(iditerator.next().value); // 1
console.log(iditerator.next().value); // 2
console.log(iditerator.next().value); // 3

优点：
流程控制：与生成器具有类似的功能，但执行更加线性。
更简单的代码：没有yield，这可以使代码更容易理解。
缺点：
没有自动暂停：您必须手动管理迭代，这在某些情况下可能会很不方便。

使用 async/await 异步生成
如果 id 是异步生成的，您可以将 async/await 与返回 promise 的函数结合使用。

async function generateID(start = 1) {
    let i = start;
    while (true) {
        await new Promise((resolve) => setTimeout(resolve, 0));
        console.log(i++);
    }
}

generateID();