JavaScript生成器如何使用

這篇文章主要講解了“JavaScript生成器如何使用”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“JavaScript生成器如何使用”吧！

10年積累的做網(wǎng)站、成都網(wǎng)站建設(shè)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)制作后付款的網(wǎng)站建設(shè)流程，更有商南免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

1.?什么是生成器 ？

可以理解成一個(gè)函數(shù)的內(nèi)部狀態(tài)的遍歷器，每調(diào)用一次生成器，函數(shù)的內(nèi)部狀態(tài)發(fā)生一次改變。

---

2.?寫法

• function 與函數(shù)名之間有一個(gè)星號(hào) *

• 函數(shù)體內(nèi)部可以使用 yield 表達(dá)式，定義不同的狀態(tài)

---

3.?生成器是怎么是實(shí)現(xiàn)的？

• 在生成器里面有著 next 方法，遍歷下一個(gè)狀態(tài)

• yield 表達(dá)式：相當(dāng)于暫停標(biāo)志，只有調(diào)用 next 方法才會(huì)遍歷下一個(gè)內(nèi)部狀態(tài)

• 使用 next 方法時(shí)，從函數(shù)一開始或上一次停下來(lái)的地方開始執(zhí)行，直到遇到下一個(gè) yield 表達(dá)式 (或 return 語(yǔ)句) 為止
  （即生成器函數(shù)就相當(dāng)于是一種可以暫停執(zhí)行的函數(shù)，yield 表達(dá)式就是暫停標(biāo)志）

讓我們來(lái)通過(guò)個(gè)例子理解一下：
（舉個(gè)我們熟悉的 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)用時(shí)，遇到 yield 停下來(lái)，next 方法返回一個(gè)對(duì)象，它的 value 屬性就是當(dāng)前 yield 表達(dá)式的值 Hello，done 屬性的值是false，表示遍歷未結(jié)束

第二次調(diào)用時(shí)，遇到 yield 停下來(lái)，next 方法返回一個(gè)對(duì)象，它的 value 屬性就是當(dāng)前 yield 表達(dá)式的值 World，done 屬性的值是false，表示遍歷未結(jié)束

然后直到第三次調(diào)用，執(zhí)行到 return 語(yǔ)句（如果沒有，就執(zhí)行到函數(shù)結(jié)束）。這個(gè)時(shí)候，next 返回的 value 屬性的值為 return 語(yǔ)句后面的值， done 的屬性為 true (如果沒有 return，這個(gè)時(shí)候 done 還是 false)，表示循環(huán)結(jié)束。

接下來(lái)，我們?cè)佥敵鲆淮?next：

console.log(say.next());

這個(gè)時(shí)候 next 將會(huì)返回這個(gè)對(duì)象，value 為 undefined，done 為· true（不管之前有沒有 return 語(yǔ)句，這時(shí)函數(shù)已經(jīng)運(yùn)行完畢了，所以 done 都為 true）

---

4.?利用生成器函數(shù)來(lái)自定義迭代器

通過(guò)上文講述，我們可以知道生成器函數(shù)允許我們定義一個(gè)包含自有迭代算法的函數(shù)， 同時(shí)它可以自動(dòng)維護(hù)自己的狀態(tài)。

由于自定義迭代器需要顯示地維護(hù)其內(nèi)部狀態(tài)，因此我們可以用它來(lái)自定義迭代器。
（如果對(duì)迭代器不了解的可以先看看這篇文章：JavaScript迭代器）

接下來(lái)，讓我們來(lái)通過(guò)一個(gè)例子理解一下：

現(xiàn)在有一個(gè) colors 對(duì)象，我們想用 for...of 對(duì)其遍歷，那么就可以自定義迭代器。

let colors = {
    blue : "藍(lán)色",
    green : "綠色",
    yellow : "黃色"}

普通寫法：

colors[Symbol.iterator] = function() {
	let keys = Object.keys(colors);
	// 如果用 let keys = Reflect.ownKeys(colors)，keys 就會(huì)包括一些不可枚舉的屬性
	// 那么后面的 len 要減一，減去Symbol.iterator這個(gè)屬性
	// 根據(jù)實(shí)際情況選擇使用
	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這個(gè)屬性
    // 根據(jù)實(shí)際情況選擇使用
    let len = keys.length;
    let index = 0;
    
    while(index < len) {
        yield colors[keys[index++]];
    }}

感謝各位的閱讀，以上就是“JavaScript生成器如何使用”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)JavaScript生成器如何使用這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

網(wǎng)站名稱：JavaScript生成器如何使用
網(wǎng)頁(yè)路徑：http://bm7419.com/article26/jcsdcg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、域名注冊(cè)、靜態(tài)網(wǎng)站、關(guān)鍵詞優(yōu)化、品牌網(wǎng)站制作、建站公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)