ES6 中Generator 函數(shù)如何使用，針對這個(gè)問題，這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡單易行的方法。

我們提供的服務(wù)有：做網(wǎng)站、成都網(wǎng)站制作、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、梅縣ssl等。為數(shù)千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的梅縣網(wǎng)站制作公司

Generator 函數(shù)組成

Generator 有兩個(gè)區(qū)分于普通函數(shù)的部分：

1. 一是在 function 后面，函數(shù)名之前有個(gè) * ；




2. 函數(shù)內(nèi)部有 yield 表達(dá)式。

其中 * 用來表示函數(shù)為 Generator 函數(shù)，yield 用來定義函數(shù)內(nèi)部的狀態(tài)。

function* func(){
 console.log("one");
 yield '1';
 console.log("two");
 yield '2'; 
 console.log("three");
 return '3';
}

執(zhí)行機(jī)制

調(diào)用 Generator 函數(shù)和調(diào)用普通函數(shù)一樣，在函數(shù)名后面加上()即可，但是 Generator 函數(shù)不會(huì)像普通函數(shù)一樣立即執(zhí)行，而是返回一個(gè)指向內(nèi)部狀態(tài)對象的指針，所以要調(diào)用遍歷器對象Iterator 的 next 方法，指針就會(huì)從函數(shù)頭部或者上一次停下來的地方開始執(zhí)行。

f.next();
// one
// {value: "1", done: false}
 
f.next();
// two
// {value: "2", done: false}
 
f.next();
// three
// {value: "3", done: true}
 
f.next();
// {value: undefined, done: true}

第一次調(diào)用 next 方法時(shí)，從 Generator 函數(shù)的頭部開始執(zhí)行，先是打印了 one ,執(zhí)行到 yield 就停下來，并將yield 后邊表達(dá)式的值 '1'，作為返回對象的 value 屬性值，此時(shí)函數(shù)還沒有執(zhí)行完， 返回對象的 done 屬性值是 false。

第二次調(diào)用 next 方法時(shí)，同上步 。

第三次調(diào)用 next 方法時(shí)，先是打印了 three ，然后執(zhí)行了函數(shù)的返回操作，并將 return 后面的表達(dá)式的值，作為返回對象的 value 屬性值，此時(shí)函數(shù)已經(jīng)結(jié)束，多以 done 屬性值為true 。

第四次調(diào)用 next 方法時(shí)， 此時(shí)函數(shù)已經(jīng)執(zhí)行完了，所以返回 value 屬性值是 undefined ，done 屬性值是 true 。如果執(zhí)行第三步時(shí)，沒有 return 語句的話，就直接返回 {value: undefined, done: true}。

函數(shù)返回的遍歷器對象的方法

next 方法

一般情況下，next 方法不傳入?yún)?shù)的時(shí)候，yield 表達(dá)式的返回值是 undefined 。當(dāng) next 傳入?yún)?shù)的時(shí)候，該參數(shù)會(huì)作為上一步y(tǒng)ield的返回值。

function* sendParameter(){
    console.log("strat");
    var x = yield '2';
    console.log("one:" + x);
    var y = yield '3';
    console.log("two:" + y);
    console.log("total:" + (x + y));
}

next不傳參

var sendp1 = sendParameter();
sendp1.next();
// strat
// {value: "2", done: false}
sendp1.next();
// one:undefined
// {value: "3", done: false}
sendp1.next();
// two:undefined
// total:NaN
// {value: undefined, done: true}

ext傳參

var sendp2 = sendParameter();
sendp2.next(10);
// strat
// {value: "2", done: false}
sendp2.next(20);
// one:20
// {value: "3", done: false}
sendp2.next(30);
// two:30
// total:50
// {value: undefined, done: true}

除了使用 next ，還可以使用 for... of 循環(huán)遍歷 Generator 函數(shù)生產(chǎn)的 Iterator 對象。

return 方法

return 方法返回給定值，并結(jié)束遍歷 Generator 函數(shù)。

return 方法提供參數(shù)時(shí)，返回該參數(shù)；不提供參數(shù)時(shí)，返回 undefined 。

function* foo(){
    yield 1;
    yield 2;
    yield 3;
}
var f = foo();
f.next();
// {value: 1, done: false}
f.return("foo");
// {value: "foo", done: true}
f.next();
// {value: undefined, done: true}
throw 方法
throw 方法可以再 Generator 函數(shù)體外面拋出異常，再函數(shù)體內(nèi)部捕獲。
var g = function* () {
  try {
    yield;
  } catch (e) {
    console.log('catch inner', e);
  }
};
 
var i = g();
i.next();
 
try {
  i.throw('a');
  i.throw('b');
} catch (e) {
  console.log('catch outside', e);
}
// catch inner a
// catch outside b

遍歷器對象拋出了兩個(gè)錯(cuò)誤，第一個(gè)被 Generator 函數(shù)內(nèi)部捕獲，第二個(gè)因?yàn)楹瘮?shù)體內(nèi)部的catch 函數(shù)已經(jīng)執(zhí)行過了，不會(huì)再捕獲這個(gè)錯(cuò)誤，所以這個(gè)錯(cuò)誤就拋出 Generator 函數(shù)體，被函數(shù)體外的 catch 捕獲。

yield* 表達(dá)式

yield* 表達(dá)式表示 yield 返回一個(gè)遍歷器對象，用于在 Generator 函數(shù)內(nèi)部，調(diào)用另一個(gè) Generator 函數(shù)。

function* callee() {
    console.log('callee: ' + (yield));
}
function* caller() {
    while (true) {
        yield* callee();
    }
}
const callerObj = caller();
callerObj.next();
// {value: undefined, done: false}
callerObj.next("a");
// callee: a
// {value: undefined, done: false}
callerObj.next("b");
// callee: b
// {value: undefined, done: false}
 
// 等同于
function* caller() {
    while (true) {
        for (var value of callee) {
          yield value;
        }
    }
}

使用場景

實(shí)現(xiàn) Iterator

為不具備 Iterator 接口的對象提供遍歷方法。

function* objectEntries(obj) {
    const propKeys = Reflect.ownKeys(obj);
    for (const propKey of propKeys) {
        yield [propKey, obj[propKey]];
    }
}
 
const jane = { first: 'Jane', last: 'Doe' };
for (const [key,value] of objectEntries(jane)) {
    console.log(`${key}: ${value}`);
}
// first: Jane
// last: Doe

Reflect.ownKeys() 返回對象所有的屬性，不管屬性是否可枚舉，包括 Symbol。

jane 原生是不具備 Iterator 接口無法通過 for... of遍歷。這邊用了 Generator 函數(shù)加上了 Iterator 接口，所以就可以遍歷 jane 對象了。

關(guān)于ES6 中Generator 函數(shù)如何使用問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識(shí)。