小編給大家分享一下Javascript生成器怎么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯企業(yè)建站,10多年網站建設經驗，專注于網站建設技術，精于網頁設計，有多年建站和網站代運營經驗，設計師為客戶打造網絡企業(yè)風格，提供周到的建站售前咨詢和貼心的售后服務。對于成都網站設計、成都網站制作、外貿網站建設中不同領域進行深入了解和探索，創(chuàng)新互聯在網站建設中充分了解客戶行業(yè)的需求，以靈動的思維在網頁中充分展現，通過對客戶行業(yè)精準市場調研，為客戶提供的解決方案。

什么是生成器？

生成器是在函數內部運行的一些代碼

• 返回值后，它會自行暫停，并且——

• 調用程序可以要求取消暫停并返回另一個值

  
  

這種“返回”不是傳統(tǒng)的從函數 return。所以它被賦予了一個特殊的名稱——yield。

生成器語法因語言而異。Javascript 的生成器語法類似于 PHP，但是區(qū)別也很大，如果你希望它們的作用相同，那么最終你會感到非常困惑。

在 javascript 中，如果想要使用生成器，則需要：

• 定義特殊的生成器函數

• 調用該函數創(chuàng)建一個生成器對象

• 在循環(huán)中使用該生成器對象，或直接調用其 next 方法

  
  

我們以下面這個簡單的程序做為起點，并執(zhí)行以下每個步驟：

// File: sample-program.js
function *createGenerator() {
 for(let i=0;i<20;i++) {
 yield i
 }
}

const generator = createGenerator()

console.log(generator.next())
console.log(generator.next())

如果運行這段代碼，則會得到以下輸出：

$ node sample-program.js

{ value: 0, done: false }
{ value: 1, done: false }

下面我來解釋該程序是如何工作的。

生成器函數

首先，代碼中存在生成器函數的定義：

function* createGenerator() {
 for(let i=0;i<20;i++) {
 yield i
 }
}

function 后面的 * 告訴 javascript 這是一個生成器函數。以下寫法都是生成器函數的有效定義。

function*createGenerator
function* createGenerator
function *createGenerator

*  并不是函數名的一部分。而是 function* 符號定義了生成器。

調用生成器函數

定義了生成器函數后，我們將其命名為其他名稱的函數。

// 注意：當調用時，沒有 *。 * 不是函數名稱的一部分
// `function *` 是用于定義生成器函數的符號
const generator = createGenerator()

但是要記住：createGenerator 函數沒有返回值。這是因為生成器函數沒有傳統(tǒng)的返回值。相反，當你直接調用生成器函數時，它總是返回實例化的 Generator 對象。

這個生成器對象具有一個 next 方法。調用 next 將在生成器函數內部運行代碼。

function* createGenerator() {
 for(let i=0;i<20;i++) {
  yield i
 }
}

這很重要，足以再次調用它。直接調用生成器函數不會在生成器函數中運行任何代碼。而是創(chuàng)建一個生成器對象。它在生成器對象上調用 next，從而調用生成器函數中的代碼。

首次在生成器對象上調用 next 時，內部代碼將會一直運行，直到出現 yield 語句。一旦執(zhí)行到 yield，javascript 將會暫停該代碼的執(zhí)行，而 next 將返回（即給你，或yield）一個對象，該對象包含 yield 行中的值。

當你第二次（或第三次、第四次甚至更多次）再調用 next 時，代碼將會取消暫停并繼續(xù)運行（在上次調用時中斷的地方）。變量（例如本例中的 i ）將會保持它的值。當代碼到達另一個 yield 語句時，該函數會再次暫停，并返回一個包含 yield 值的對象。

這就是為什么我們要調用兩次  next

console.log(generator.next())
console.log(generator.next())

會得到以下輸出：

{ value: 0, done: false }
{ value: 1, done: false }

生成器函數中的代碼執(zhí)行完畢后，將來對 next 的任何調用都會返回一個對象，該對象的值為 undefined 且done 設置為 true。

{ value: undefined, done: true }

生成器和循環(huán)

雖然可以在生成器對象上手動調用 next，但我們主要是要在循環(huán)中使用?？匆幌逻@個稍作修改的程序。

// File: sample-program.js
@highlightsyntax@jscript
function *createGenerator() {
 for(let i=0;i<5;i++) {
 yield i
 }
}

const generator = createGenerator()
for(const value of generator) {
 console.log(value)
}

當在 for...of 循環(huán)中使用生成器對象時，每次循環(huán)都會在生成器對象上調用 next，并用產生的值填充變量（上面的 value）。運行該程序將會輸出以下內容:

$ node sample-program.js
0
1
2
3
4

以上是“Javascript生成器怎么用”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯行業(yè)資訊頻道！

當前名稱：Javascript生成器怎么用-創(chuàng)新互聯
網站鏈接：http://weahome.cn/article/igjdh.html