」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 了解 JavaScript 產生器:強大的程式碼流控制工具

了解 JavaScript 產生器:強大的程式碼流控制工具

發佈於2024-11-08
瀏覽:992

Razumevanje JavaScript Generatora: Moćan Alat za Kontrolu Toka Koda

生成器是 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 



  • 优点:
    实现简单:该方案简单易懂,且没有流控问题。
    快速生成:一次性生成所有值,可以以更少的迭代次数提高效率。

  • 缺点:
    内存消耗:所有值都存储在内存中,这对于大型数组可能会出现问题。
    不偷懒:所有 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
  • 优点:
    流程控制:与生成器具有类似的功能,但执行更加线性。
    更简单的代码:没有收益,这可以使代码更容易理解。

  • 缺点:
    没有自动暂停:您必须手动管理迭代,这在某些情况下可能会很不方便。

使用 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(); 
  • 优点:
    异步执行:高效处理长时间运行的操作,而不阻塞主执行流程。
    现代语法:async/await 是一种更现代、更直观的异步代码处理方式。

  • 缺点:
    不适合同步代码:如果需要同步生成,这个解决方案并不理想。

结论

生成器是处理大量无限数据数组以及需要暂停和恢复进程的应用程序中的流量控制的绝佳工具。然而,它们的复杂性和潜在的性能问题意味着它们应该谨慎使用。根据应用程序的要求,迭代、递归或异步代码等替代解决方案可能更合适。

版本聲明 本文轉載於:https://dev.to/jelena_petkovic/razumevanje-javascript-generatora-mocan-alat-za-kontrolu-toka-koda-2hpo?1如有侵犯,請聯絡[email protected]刪除
最新教學 更多>
  • 了解命令式程式設計和聲明式程式設計之間的區別
    了解命令式程式設計和聲明式程式設計之間的區別
    當我剛開始學習React時,我的老師說:「JavaScript是命令式編程,而React是聲明式編程。」然而,一開始這對我來說不太有意義。因此,我決定將其分解以更好地理解其中的差異。 將命令式和聲明式程式設計與披薩進行比較? 為了更容易理解,讓我們來比較一下這兩種烹飪方法。 ...
    程式設計 發佈於2024-11-08
  • 如何使用 JPA 和 Hibernate 以 UTC 格式儲存日期/時間和時間戳記?
    如何使用 JPA 和 Hibernate 以 UTC 格式儲存日期/時間和時間戳記?
    使用JPA 和Hibernate 以UTC 格式儲存日期/時間和時間戳在Java Persistence API (JPA) 和Hibernate 中,管理日期/時間不同時區的時間戳值可能是一個挑戰。為了確保 UTC(協調世界時)時間的一致儲存和檢索,正確配置框架至關重要。 考慮提供的附註解的 JP...
    程式設計 發佈於2024-11-08
  • java.lang.RuntimeException 和 java.lang.Exception 之間的主要區別是什麼?
    java.lang.RuntimeException 和 java.lang.Exception 之間的主要區別是什麼?
    揭示java.lang.RuntimeException 和java.lang.Exception 的獨特本質在Java 異常領域內,兩個經常遇到的異常類別出現:java.lang.RuntimeException 和java.lang.Exception。為了有效地理解異常處理的複雜性,剖析它們之...
    程式設計 發佈於2024-11-08
  • 為什麼嵌入框陰影在透明背景的圖片上消失?
    為什麼嵌入框陰影在透明背景的圖片上消失?
    了解圖像上的插入框陰影問題在網頁設計中,使用插入框陰影在元素內創建深度和尺寸是一種常見技術。然而,在處理包含圖像的容器時,事情並不總是那麼簡單。當嵌入框陰影似乎在嵌入影像上消失時,就會出現問題。 隱形陰影的情況考慮原始問題中提供的範例:body { background-color: #0000...
    程式設計 發佈於2024-11-08
  • 如何在 ReactJS 中維護懸停狀態:解決事件註冊問題
    如何在 ReactJS 中維護懸停狀態:解決事件註冊問題
    在ReactJS 中維護懸停狀態:解決事件註冊問題使用內聯樣式時,您會遇到ReactJS 中懸停和活動事件的問題,因為onMouseEnter 和onMouseLeave 方法被證明是不可靠的。 要解決此問題,請考慮使用下列事件處理程序之一:onMouseDownonMouseEnter onMou...
    程式設計 發佈於2024-11-08
  • 如何在 JavaScript 中準確檢查 Null 值和空字串?
    如何在 JavaScript 中準確檢查 Null 值和空字串?
    檢查 JavaScript 中的 Null 值在 JavaScript 中,確定值是否為 null 有時會令人困惑。為了提供更深入的理解,本文將深入研究在 JavaScript 情境中偵測空值的細節。 檢查空值提供的程式碼片段旨在檢查跨多個變數的null 值:if (pass == null || ...
    程式設計 發佈於2024-11-08
  • 在 Golang 中建立 Google Drive 下載器(第 1 部分)
    在 Golang 中建立 Google Drive 下載器(第 1 部分)
    介绍 在本教程中,我们将构建一个功能强大的下载器,允许从Google Drive和其他云提供商下载文件。借助 Golang 高效的并发模式,您将能够同时管理多个下载、流式传输大文件并实时跟踪进度。无论您是下载一些小文件还是处理大型数据集,该项目都将展示如何构建可扩展且强大的下载器,...
    程式設計 發佈於2024-11-08
  • PHP 4 快速部署
    PHP 4 快速部署
    Servbay 已成為高效配置開發環境的領先工具。在本指南中,我們將引導您完成快速、安全地部署 PHP 8.1 的過程,以展示 Servbay 對簡化部署的承諾。 先決條件 確保您的電腦上安裝了 Servbay。您可以從 Servbay 官方網站輕鬆下載。安裝過程人性化;只需按照安...
    程式設計 發佈於2024-11-08
  • 如何繞過驗證碼
    如何繞過驗證碼
    No matter how many times people wrote that the captcha has outlived itself long time ago and no longer works as effectively as its developers would ha...
    程式設計 發佈於2024-11-08
  • 使用 super 呼叫超類別建構函數
    使用 super 呼叫超類別建構函數
    子類別可以使用 super(parameter-list);. 形式來呼叫其超類別定義的建構函數 parameter-list 必須指定超類別建構子所需的參數。 子類別建構子中執行的第一條語句必須始終是 super(); (或 super(parameter-list); 如果需要傳遞參數). ...
    程式設計 發佈於2024-11-08
  • 你能比較 C++ 中不同容器的迭代器嗎?
    你能比較 C++ 中不同容器的迭代器嗎?
    比較來自不同容器的迭代器:一個警示故事在C 中,迭代器提供了一個強大的遍歷集合的機制。然而,在使用來自不同容器的迭代器時,重要的是要意識到這些限制。 比較不同容器的迭代器是否合法的問題經常出現。考慮以下範例:std::vector<int> foo; std::vector<int...
    程式設計 發佈於2024-11-08
  • 幫助 FastAPI:如何為文件翻譯做出貢獻
    幫助 FastAPI:如何為文件翻譯做出貢獻
    One of the great features of FastAPI is its great documentation ?. But wouldn't it be better if more people around the world had access to this docume...
    程式設計 發佈於2024-11-08
  • 如何使用 CSS 和 AngularJS 建立垂直 HTML 表格?
    如何使用 CSS 和 AngularJS 建立垂直 HTML 表格?
    垂直HTML 表格創建具有垂直行的HTML 表格提供了一種獨特的方式來顯示數據,行標題位於左側而不是頂部。要實現此目的,可以套用 CSS 樣式來轉換表格的結構。 CSS 樣式若要將表格行呈現為垂直列,請遵循下列CSS 規則可使用:tr { display: block; float: lef...
    程式設計 發佈於2024-11-08
  • 透過自訂 Hooks 在 React 中重複使用邏輯:實用指南
    透過自訂 Hooks 在 React 中重複使用邏輯:實用指南
    自訂鉤子是React 中的一項強大功能,與React 內建鉤子不同,它用於更具體的目的,並且它是透過將常見功能封裝到獨立函數中來完成的。自訂掛鉤促進可重複使用性、改進元件組織並整體增強程式碼可維護性。 在本指南中,我們將深入探討使用自訂鉤子的目的,以了解創建自訂鉤子的基礎知識以及如何使用其他元件。...
    程式設計 發佈於2024-11-08
  • 使用 ReactJS 建立免費的 AI 圖像生成器
    使用 ReactJS 建立免費的 AI 圖像生成器
    开发者们大家好, 今天,我将向您展示如何使用 ReactJS 创建图像生成器,并且完全可以免费使用,这要感谢黑森林实验室和 Together AI。 第 1 步:设置项目 在本教程中,我们将使用 Vite 来初始化应用程序并使用 Shadcn 来初始化 UI。我假设您已经设置了项目并...
    程式設計 發佈於2024-11-08

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3