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

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

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

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]刪除
最新教學 更多>
  • 切換到MySQLi後CodeIgniter連接MySQL數據庫失敗原因
    切換到MySQLi後CodeIgniter連接MySQL數據庫失敗原因
    Unable to Connect to MySQL Database: Troubleshooting Error MessageWhen attempting to switch from the MySQL driver to the MySQLi driver in CodeIgniter,...
    程式設計 發佈於2025-04-29
  • 如何從PHP中的數組中提取隨機元素?
    如何從PHP中的數組中提取隨機元素?
    從陣列中的隨機選擇,可以輕鬆從數組中獲取隨機項目。考慮以下數組:; 從此數組中檢索一個隨機項目,利用array_rand( array_rand()函數從數組返回一個隨機鍵。通過將$項目數組索引使用此鍵,我們可以從數組中訪問一個隨機元素。這種方法為選擇隨機項目提供了一種直接且可靠的方法。
    程式設計 發佈於2025-04-29
  • 為什麼儘管有效代碼,為什麼在PHP中捕獲輸入?
    為什麼儘管有效代碼,為什麼在PHP中捕獲輸入?
    在php ;?>" method="post">The intention is to capture the input from the text box and display it when the submit button is clicked.但是,輸出...
    程式設計 發佈於2025-04-29
  • 如何使用PHP將斑點(圖像)正確插入MySQL?
    如何使用PHP將斑點(圖像)正確插入MySQL?
    essue VALUES('$this->image_id','file_get_contents($tmp_image)')";This code builds a string in PHP, but the function call fil...
    程式設計 發佈於2025-04-29
  • 左連接為何在右表WHERE子句過濾時像內連接?
    左連接為何在右表WHERE子句過濾時像內連接?
    左JOIN CONUNDRUM:WITCHING小時在數據庫Wizard的領域中變成內在的加入很有趣,當將c.foobar條件放置在上面的Where子句中時,據說左聯接似乎會轉換為內部連接。僅當滿足A.Foo和C.Foobar標準時,才會返回結果。 為什麼要變形?關鍵在於其中的子句。當左聯接的右側...
    程式設計 發佈於2025-04-29
  • Java字符串非空且非null的有效檢查方法
    Java字符串非空且非null的有效檢查方法
    檢查字符串是否不是null而不是空的 if(str!= null && str.isementy())二手: if(str!= null && str.length()== 0) option 3:trim()。 isement(Isement() trim whitespace whites...
    程式設計 發佈於2025-04-29
  • 表單刷新後如何防止重複提交?
    表單刷新後如何防止重複提交?
    在Web開發中預防重複提交 在表格提交後刷新頁面時,遇到重複提交的問題是常見的。要解決這個問題,請考慮以下方法: 想像一下具有這樣的代碼段,看起來像這樣的代碼段:)){ //數據庫操作... 迴聲“操作完成”; 死(); } ? > ...
    程式設計 發佈於2025-04-29
  • 為什麼PYTZ最初顯示出意外的時區偏移?
    為什麼PYTZ最初顯示出意外的時區偏移?
    與pytz 最初從pytz獲得特定的偏移。例如,亞洲/hong_kong最初顯示一個七個小時37分鐘的偏移: 差異源利用本地化將時區分配給日期,使用了適當的時區名稱和偏移量。但是,直接使用DateTime構造器分配時區不允許進行正確的調整。 example pytz.timezone(&#...
    程式設計 發佈於2025-04-29
  • 如何將MySQL數據庫添加到Visual Studio 2012中的數據源對話框中?
    如何將MySQL數據庫添加到Visual Studio 2012中的數據源對話框中?
    在Visual Studio 2012 儘管已安裝了MySQL Connector v.6.5.4,但無法將MySQL數據庫添加到實體框架的“ DataSource對話框”中。為了解決這一問題,至關重要的是要了解MySQL連接器v.6.5.5及以後的6.6.x版本將提供MySQL的官方Visual...
    程式設計 發佈於2025-04-29
  • JavaScript計算兩個日期之間天數的方法
    JavaScript計算兩個日期之間天數的方法
    How to Calculate the Difference Between Dates in JavascriptAs you attempt to determine the difference between two dates in Javascript, consider this s...
    程式設計 發佈於2025-04-29
  • 解決Spring Security 4.1及以上版本CORS問題指南
    解決Spring Security 4.1及以上版本CORS問題指南
    彈簧安全性cors filter:故障排除常見問題 在將Spring Security集成到現有項目中時,您可能會遇到與CORS相關的錯誤,如果像“訪問Control-allo-allow-Origin”之類的標頭,則無法設置在響應中。為了解決此問題,您可以實現自定義過濾器,例如代碼段中的MyFi...
    程式設計 發佈於2025-04-29
  • 查找當前執行JavaScript的腳本元素方法
    查找當前執行JavaScript的腳本元素方法
    如何引用當前執行腳本的腳本元素在某些方案中理解問題在某些方案中,開發人員可能需要將其他腳本動態加載其他腳本。但是,如果Head Element尚未完全渲染,則使用document.getElementsbytagname('head')[0] .appendChild(v)的常規方...
    程式設計 發佈於2025-04-29
  • MySQL中如何高效地根據兩個條件INSERT或UPDATE行?
    MySQL中如何高效地根據兩個條件INSERT或UPDATE行?
    在兩個條件下插入或更新或更新 solution:的答案在於mysql的插入中...在重複鍵更新語法上。如果不存在匹配行或更新現有行,則此功能強大的功能可以通過插入新行來進行有效的數據操作。如果違反了唯一的密鑰約束。 實現所需的行為,該表必須具有唯一的鍵定義(在這種情況下為'名稱'...
    程式設計 發佈於2025-04-29
  • Java數組中元素位置查找技巧
    Java數組中元素位置查找技巧
    在Java數組中檢索元素的位置 利用Java的反射API將數組轉換為列表中,允許您使用indexof方法。 (primitives)(鏈接到Mishax的解決方案) 用於排序陣列的數組此方法此方法返回元素的索引,如果發現了元素的索引,或一個負值,指示應放置元素的插入點。
    程式設計 發佈於2025-04-29
  • 如何在Java的全屏獨家模式下處理用戶輸入?
    如何在Java的全屏獨家模式下處理用戶輸入?
    Handling User Input in Full Screen Exclusive Mode in JavaIntroductionWhen running a Java application in full screen exclusive mode, the usual event ha...
    程式設計 發佈於2025-04-29

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

Copyright© 2022 湘ICP备2022001581号-3