[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 微服務框架,幫助我們輕鬆構建和管理微服務應用。 本框架不僅支持 Consul 服務註 ...
  • 先看一下效果吧: 如果不會寫動畫或者懶得寫動畫,就直接交給Blend來做吧; 其實Blend操作起來很簡單,有點類似於在操作PS,我們只需要設置關鍵幀,滑鼠點來點去就可以了,Blend會自動幫我們生成我們想要的動畫效果. 第一步:要創建一個空的WPF項目 第二步:右鍵我們的項目,在最下方有一個,在B ...
  • Prism:框架介紹與安裝 什麼是Prism? Prism是一個用於在 WPF、Xamarin Form、Uno 平臺和 WinUI 中構建鬆散耦合、可維護和可測試的 XAML 應用程式框架 Github https://github.com/PrismLibrary/Prism NuGet htt ...
  • 在WPF中,屏幕上的所有內容,都是通過畫筆(Brush)畫上去的。如按鈕的背景色,邊框,文本框的前景和形狀填充。藉助畫筆,可以繪製頁面上的所有UI對象。不同畫筆具有不同類型的輸出( 如:某些畫筆使用純色繪製區域,其他畫筆使用漸變、圖案、圖像或繪圖)。 ...
  • 前言 嗨,大家好!推薦一個基於 .NET 8 的高併發微服務電商系統,涵蓋了商品、訂單、會員、服務、財務等50多種實用功能。 項目不僅使用了 .NET 8 的最新特性,還集成了AutoFac、DotLiquid、HangFire、Nlog、Jwt、LayUIAdmin、SqlSugar、MySQL、 ...
  • 本文主要介紹攝像頭(相機)如何採集數據,用於類似攝像頭本地顯示軟體,以及流媒體數據傳輸場景如傳屏、視訊會議等。 攝像頭採集有多種方案,如AForge.NET、WPFMediaKit、OpenCvSharp、EmguCv、DirectShow.NET、MediaCaptre(UWP),網上一些文章以及 ...
  • 前言 Seal-Report 是一款.NET 開源報表工具,擁有 1.4K Star。它提供了一個完整的框架,使用 C# 編寫,最新的版本採用的是 .NET 8.0 。 它能夠高效地從各種資料庫或 NoSQL 數據源生成日常報表,並支持執行複雜的報表任務。 其簡單易用的安裝過程和直觀的設計界面,我們 ...
  • 背景需求: 系統需要對接到XXX官方的API,但因此官方對接以及管理都十分嚴格。而本人部門的系統中包含諸多子系統,系統間為了穩定,程式間多數固定Token+特殊驗證進行調用,且後期還要提供給其他兄弟部門系統共同調用。 原則上:每套系統都必須單獨接入到官方,但官方的接入複雜,還要官方指定機構認證的證書 ...
  • 本文介紹下電腦設備關機的情況下如何通過網路喚醒設備,之前電源S狀態 電腦Power電源狀態- 唐宋元明清2188 - 博客園 (cnblogs.com) 有介紹過遠程喚醒設備,後面這倆天瞭解多了點所以單獨加個隨筆 設備關機的情況下,使用網路喚醒的前提條件: 1. 被喚醒設備需要支持這WakeOnL ...
  • 前言 大家好,推薦一個.NET 8.0 為核心,結合前端 Vue 框架,實現了前後端完全分離的設計理念。它不僅提供了強大的基礎功能支持,如許可權管理、代碼生成器等,還通過採用主流技術和最佳實踐,顯著降低了開發難度,加快了項目交付速度。 如果你需要一個高效的開發解決方案,本框架能幫助大家輕鬆應對挑戰,實 ...