[JS] generator基本使用

来源:https://www.cnblogs.com/feixianxing/p/18300402/javascript-es6-generator-basic-usage
-Advertisement-
Play Games

這篇文章介紹了Generator函數的基本使用,包括next方法與yield關鍵字、throw方法、return關鍵字及其對應的方法,說明瞭它們的用法、運行結果和各自的特點,並解析了它們的共同點。 ...


next方法與yield關鍵字

generator函數可以返回一個迭代器,通過next方法切換generator的狀態。

generator函數被調用時並不會執行內部的語句,而是返回一個迭代器對象。

迭代器對象首次調用next方法,才開始執行generator函數的語句。

直到遇到yield語句,內部的執行中斷,返回yield關鍵字右側表達式的值作為迭代器調用next方法的返回值。

yield語句本身沒有返回值,由下一次調用next方法時傳入參數作為yield的返回值。

function* gen(){
  yield 'hello';
  let msg = yield 'world';
  console.log(msg);
  yield 'end';
}

const g = gen();

console.log(g.next());
console.log(g.next());
console.log(g.next('passing msg'));
console.log(g.next());

輸出結果

{ value: 'hello', done: false }
{ value: 'world', done: false }
passing msg
{ value: 'end', done: false }
{ value: undefined, done: true }

throw方法

迭代器對象可以通過調用throw方法向generator函數內部“拋出”異常,在函數內部通過try/catch捕獲。

也可以在generator函數內部拋出異常,在調用迭代器方法的位置拋出異常。

向內部拋出異常 - 分類討論

  1. (理想情況)調用iterator.throw(new Error(...))向內部拋出異常,在內部對應的yield表達式使用try/catch捕獲異常;
  2. 如果函數內部沒有捕獲異常,那麼在iterator.throw()語句所在的位置拋出異常;
  3. 如果generator內部和iterator.throw所在位置都沒有捕獲異常進行處理,那麼程式終止;
  4. 還沒首次執行next就執行throw,直接在外部調用iterator.throw的位置拋出異常。

向外拋出異常

接下來先看一個向外拋出異常的案例代碼:

function* gen(){
  yield 1;
  throw new Error('inner error');
  yield 2;	// 不會被執行
  yield 3;	// 不會被執行
}

const g = gen();

let res;
do{
  try{
    res = g.next();
    console.log(res);
  }catch(e){
    console.log(e);	// 捕獲到 'inner error'
  }
}while(!res.done);

運行結果:

{ value: 1, done: false }
Error: inner error
{ value: undefined, done: true }

解析:在generator內部使用throw關鍵字拋出異常,外部調用iterator.next的地方捕獲異常,由於generator拋出異常,JS引擎會認為這個generator已經運行結束了,後續的yield不會執行,迭代器的done變為true

return關鍵字

沒有寫return語句的 Generator 函數預設在尾部返回undefined

return關鍵字會返回右側表達式的值作為next方法的返回值。

return會終止generator,後續的代碼都不會執行了,這個特點和普通函數保持一致。

function* gen(){
  yield 1;
  return 2;
  yield 3;
}

const g = gen();

let res;
do{
  res = g.next();
  console.log(res.value);
}while(!res.done);

執行結果

1
2

return 方法

generator函數返回的迭代器對象還有return方法。

可以在外部手動得到return方法得到的值,並且結束generator。

function* gen(){
  yield 1;
  yield 2;
  yield 3;
}

const g = gen();

console.log(g.next());
console.log(g.return('done'));
console.log(g.next());

運行結果

{ value: 1, done: false }
{ value: 'done', done: true }
{ value: undefined, done: true }

next、throw、return的共同點

這三個方法的本質是讓generator函數恢復執行,並且使用不同的語句替換yield表達式。

  • next()yield表達式替換成一個值;
  • throw()yield表達式替換成一個throw語句;
  • return()yield表達式替換成一個return語句。

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 在 Vue 3 中,組合式 API(Composition API)引入了新的響應式系統,使得狀態管理和邏輯復用變得更加靈活和強大。ref() 和 reactive() 是組合式 API 中兩個重要的響應式工具,它們各自有不同的使用場景和特性。在這篇博客中,我們將深入探討 ref() 和 react ...
  • Vue.js 中的 Ajax 處理:vue-resource 庫的深度解析 在現代前端開發中,Ajax 請求是與後端進行數據交互的關鍵技術。Vue.js 作為一個漸進式 JavaScript 框架,提供了多種方式來處理 Ajax 請求,其中 vue-resource 是一個較為常用的庫。儘管 vue ...
  • Vue.js 是一個漸進式的 JavaScript 框架,用於構建用戶界面。理解 Vue 的生命周期是掌握這個框架的關鍵之一。在這篇博客中,我們將深入探討 Vue 2 的生命周期,並通過代碼示例來展示每個生命周期鉤子的作用。 Vue 實例的生命周期 Vue 實例的生命周期可以分為四個主要階段: 創建 ...
  • 摘要:“探索Nuxt.js的useFetch:高效數據獲取與處理指南”詳述了Nuxt.js中useFetch函數的使用,包括基本用法、動態參數獲取、攔截器使用,及參數詳解。文章通過示例展示瞭如何從API獲取數據,處理動態參數,自定義請求和響應,以及useFetch和useAsyncData的參數選項... ...
  • 我們是袋鼠雲數棧 UED 團隊,致力於打造優秀的一站式數據中台產品。我們始終保持工匠精神,探索前端道路,為社區積累並傳播經驗價值。 本文作者:霽明 一些名詞解釋 曝光 頁面上某一個元素、組件或模塊被用戶瀏覽了,則稱這個元素、組件或模塊被曝光了。 視圖元素 將頁面上展示的元素、組件或模塊統稱為視圖元素 ...
  • 相信不少同學都有歐陽這種情況,年初的時候給自己制定了一份關於學習英語和源碼的詳細年度計劃。但是到了實際執行的時候因為各種情況制定的計劃基本都沒有完成,年底回顧時發現年初制定的計劃基本都沒完成。痛定思痛,第二年年初決定再次制定一份學習英語和源碼的詳細年度計劃,毫無疑問又失敗了。 ...
  • title: Nuxt.js 錯誤偵探:useError 組合函數 date: 2024/7/14 updated: 2024/7/14 author: cmdragon excerpt: 摘要:文章介紹Nuxt.js中的useError組合函數,用於統一處理客戶端和伺服器端的錯誤,提供status ...
  • 什麼是深拷貝與淺拷貝?深拷貝與淺拷貝是js中處理對象或數據複製操作的兩種方式。‌在聊深淺拷貝之前咱得瞭解一下js中的兩種數據類型: ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...