這篇文章主要講解了“JavaScript生成器如何使用”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“JavaScript生成器如何使用”吧！
10年積累的做網(wǎng)站、成都網(wǎng)站建設(shè)經(jīng)驗，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認識你，你也不認識我。但先網(wǎng)站設(shè)計制作后付款的網(wǎng)站建設(shè)流程，更有商南免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
可以理解成一個函數(shù)的內(nèi)部狀態(tài)的遍歷器，每調(diào)用一次生成器，函數(shù)的內(nèi)部狀態(tài)發(fā)生一次改變。
function 與函數(shù)名之間有一個星號 *
函數(shù)體內(nèi)部可以使用 yield 表達式，定義不同的狀態(tài)
在生成器里面有著 next 方法，遍歷下一個狀態(tài)
yield 表達式：相當(dāng)于暫停標(biāo)志，只有調(diào)用 next 方法才會遍歷下一個內(nèi)部狀態(tài)
使用 next 方法時，從函數(shù)一開始或上一次停下來的地方開始執(zhí)行，直到遇到下一個 yield 表達式 (或 return 語句) 為止
（即生成器函數(shù)就相當(dāng)于是一種可以暫停執(zhí)行的函數(shù)，yield 表達式就是暫停標(biāo)志）
讓我們來通過個例子理解一下：
（舉個我們熟悉的 Hello World!!!）
重慶分公司
重慶分公司
function* sayHW(){
yield "Hello";
yield "World";
return "!!!";}let say = sayHW();console.log(say.next());console.log(say.next());console.log(say.next());
這里一共調(diào)用了三次 next 方法：
第一次調(diào)用時，遇到 yield 停下來，next 方法返回一個對象，它的 value 屬性就是當(dāng)前 yield 表達式的值 Hello，done 屬性的值是false，表示遍歷未結(jié)束
第二次調(diào)用時，遇到 yield 停下來，next 方法返回一個對象，它的 value 屬性就是當(dāng)前 yield 表達式的值 World，done 屬性的值是false，表示遍歷未結(jié)束
然后直到第三次調(diào)用，執(zhí)行到 return 語句（如果沒有，就執(zhí)行到函數(shù)結(jié)束）。這個時候，next 返回的 value 屬性的值為 return 語句后面的值， done 的屬性為 true (如果沒有 return，這個時候 done 還是 false)，表示循環(huán)結(jié)束。
接下來，我們再輸出一次 next：
console.log(say.next());
這個時候 next 將會返回這個對象，value 為 undefined，done 為· true（不管之前有沒有 return 語句，這時函數(shù)已經(jīng)運行完畢了，所以 done 都為 true）
通過上文講述，我們可以知道生成器函數(shù)允許我們定義一個包含自有迭代算法的函數(shù)， 同時它可以自動維護自己的狀態(tài)。
由于自定義迭代器需要顯示地維護其內(nèi)部狀態(tài)，因此我們可以用它來自定義迭代器。
（如果對迭代器不了解的可以先看看這篇文章：JavaScript迭代器）
接下來，讓我們來通過一個例子理解一下：
現(xiàn)在有一個 colors 對象，我們想用 for...of 對其遍歷，那么就可以自定義迭代器。
let colors = {
blue : "藍色",
green : "綠色",
yellow : "黃色"}普通寫法：
colors[Symbol.iterator] = function() {
let keys = Object.keys(colors);
// 如果用 let keys = Reflect.ownKeys(colors)，keys 就會包括一些不可枚舉的屬性
// 那么后面的 len 要減一，減去Symbol.iterator這個屬性
// 根據(jù)實際情況選擇使用
let len = keys.length;
let index = 0;
return {
next : function() {
if (index < len) {
return {
value : colors[keys[index++]],
done : false
}
}
return { done : true }
}
}}用生成器函數(shù)寫法：
colors[Symbol.iterator] = function* () {
let keys = Object.keys(colors);
// 如果用 let keys = Reflect.ownKeys(colors)，包括了一些不可枚舉的屬性
// 那么后面的 len 要減一，減去Symbol.iterator這個屬性
// 根據(jù)實際情況選擇使用
let len = keys.length;
let index = 0;
while(index < len) {
yield colors[keys[index++]];
}}
感謝各位的閱讀，以上就是“JavaScript生成器如何使用”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對JavaScript生成器如何使用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！
