解釋 JavaScript 中不同型別的生成器

---

眾所周知，JavaScript 是一種輕量級的程式語言，其中生成器是在 ECMAScript 2015 中引入的。生成器是一個具有多個輸出值的流程，可以停止和啟動。在 JavaScript 中，生成器由生成器函式組成，該函式生成可迭代的生成器物件。

在本文中，我們將討論 JavaScript 中的生成器，以及 JavaScript 中不同型別的生成器，並詳細介紹其語法和示例。

JavaScript 生成器簡介

生成器函式與普通函式相同，但有一點區別，即生成器函式可以恢復和暫停。在 JavaScript 中，通常情況下，函式一旦被呼叫就不會停止。通常，生成器的概念在非同步程式設計中可見。

JavaScript 生成器函式語法

現在我們將討論 JavaScript 中生成器函式的語法，並將其與普通函式進行比較。

函式 * 語法用於構建生成器函式，yield 關鍵字用於暫停它們。

function * genFunc() {
   yield 'Hello';
   yield 'World';
}
const g = genFunc(); // g is a generator
g.next(); // { value: 'Hello', done: false }
g.next(); // { value: 'World', done: false }
g.next(); // { value: undefined, done: true }
…

第一次呼叫生成器函式時，不會執行其任何程式碼，而是返回一個生成器物件。透過呼叫生成器的 next() 方法來使用值，該方法執行程式碼，直到遇到 yield 關鍵字，此時它會暫停並等待再次呼叫 next()。

在上面的程式碼中，在我們的最終語句之後，持續呼叫 g.next() 只會產生相同的返回值物件：{value: undefined, done: true}，因為我們沒有在 genFunc() 函式中的“world”之後定義任何內容。

yield 關鍵字會暫停生成器函式的執行，並將跟隨它的表示式的值提供給生成器的呼叫方。它類似於 return 關鍵字的基於生成器的版本。它只能直接從包含 yield 的生成器函式中呼叫。

與普通函式的比較

function regFunc() {
   console.log("Hello World");
}
// Hello World

在普通函式中，我們不使用“*”函式，如您在上面的示例中看到的，它也不使用 yield 函式。正如我們上面討論的那樣，普通函式和生成器函式之間的主要區別在於生成器函式可以停止和暫停。因此，透過上面的示例，您可以看到我們沒有選擇停止它並直接一起列印整個語句，即“Hello world”。

我們已經瞭解了生成器函式的基本知識，現在讓我們轉向不同型別的生成器函式 -

普通生成器

在普通生成器中，生成器充當迭代器，在每次執行 next() 方法呼叫以生成函式後生成下一個值。讓我們看一個示例，我們將逐個產生數字，直到列表結束。

function* generator_function(){
   for(var cur = 0 ; cur<7; cur++){
      yield cur;
   }
}
var object_generator = generator_function();
console.log(object_generator.next().value);
console.log(object_generator.next().value);
console.log(object_generator.next().value);
console.log(object_generator.next().value);
console.log(object_generator.next().value);
console.log(object_generator.next().value);
console.log(object_generator.next().value);

在上面的程式碼中，我們建立了一個帶有 yield 關鍵字的普通生成器函式，並使用 next() 函式多次呼叫它。

帶引數的生成器

帶引數的生成器與普通生成器略有不同，這次我們必須將引數與 next() 函式一起傳遞，以將其傳送到生成器函式。此外，每次我們傳遞引數時，它都會在 yield 關鍵字之後儲存，而不是之前，我們將在接下來的示例中瞭解此概念 -

function* generator_function(){
   console.log("start of the function")
   temp = yield;
   console.log("This is the first value passed: " + temp)
   temp = yield;
   console.log("This is the second value passed: " + temp)
}
var object_generator = generator_function();
object_generator.next("This is not the first ");
object_generator.next("this is first");
object_generator.next("this is second");
object_generator.next();

在上面的程式碼中，我們定義了生成器函式，這次我們將引數傳遞給它。當我們第一次呼叫該物件時，給定的引數不會被列印，因為這是在“yield”關鍵字之前傳送的，然後傳送的值儲存在變數中並列印，在第二個列印值之後不會發生任何事情，因為沒有 yield。

帶有物件屬性的生成器

生成器可以用作物件，當我們呼叫它們時，它們將簡單地返回值賦給它們，並且可以列印。為了理解這個概念，讓我們看一個例子。

function* generator_function(){
   yield "First value"
   yield "Second value"
   yield "Third value"
}
var object_generator = generator_function();
console.log(object_generator.next().value);
console.log(object_generator.next().value);
console.log(object_generator.next().value);

在上面的程式碼中，首先，我們定義了三個帶有字串的 yield 表示式，當我們呼叫生成器時，它們後面的字串將被返回。

還存在其他型別的生成器，例如帶有返回型別的生成器，以及一些包含其他生成器的生成器等。

結論

在本文中，我們瞭解到生成器函式與普通函式相同，但有一點區別，即生成器函式可以恢復和暫停。在 JavaScript 中，通常情況下，函式一旦被呼叫就不會停止。通常，生成器的概念在非同步程式設計中可見。有各種型別的生成器，例如普通生成器、帶引數的生成器、類似物件的生成器、包含其他生成器的生成器等。