本篇文章給大家分享的是有關(guān)Es6 中Generator函數(shù)有什么用，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

公司主營業(yè)務：網(wǎng)站建設、成都網(wǎng)站制作、移動網(wǎng)站開發(fā)等業(yè)務。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)推出乳山免費做網(wǎng)站回饋大家。

ECMAScript 6 （簡稱 ES6 ）作為下一代 JavaScript 語言，將 JavaScript 異步編程帶入了一個全新的階段。

Generator函數(shù)跟普通函數(shù)的寫法有非常大的區(qū)別：

一是，function關(guān)鍵字與函數(shù)名之間有一個星號；

二是，函數(shù)體內(nèi)部使用yield語句，定義不同的內(nèi)部狀態(tài)（yield在英語里的意思就是“產(chǎn)出”）。

本文重點給大家介紹Es6 Generator函數(shù)，具體內(nèi)容如下所示：

/*    一、generator函數(shù)的定義

    1.Generator 函數(shù)是 ES6 提供的一種異步編程解決方案，語法行為與傳統(tǒng)函數(shù)完全不同
    2.形式上，Generator 函數(shù)是一個普通函數(shù)，但是有兩個特征。一是，function關(guān)鍵字與函數(shù)名之間有一個星號；二是，函數(shù)體內(nèi)部使用yield表達式，定義不同的內(nèi)部狀態(tài)
   */
  //定義一個generator函數(shù) 其內(nèi)部有3種狀態(tài)
  var helloGenerator = function *() {
    var next1 = yield 'hello';
    yield 'world' + next1;
    return 'ending';
  }
  //調(diào)用generator 函數(shù)和普通函數(shù)一樣，直接加上雙括號 () 但是跟普通函數(shù)的區(qū)別是generator不會立即執(zhí)行， 返回的也不是函數(shù)的結(jié)果，而是內(nèi)部的一個指針。
  var newGenerator = helloGenerator();
  //generator 函數(shù)是分段執(zhí)行的 會從頭部直到遇到下一個yield 表達式的時候停止下來。
  console.log(newGenerator.next('hahh')); //Object {value: "hello", done: false}
  console.log(newGenerator.next()); // {value: "worldhahh", done: false}
  console.log(newGenerator.next()); //{value: "ending", done: true}  done true| false true代表的意思內(nèi)部yield 表達式已經(jīng)執(zhí)行完畢 false則相反
  console.log(newGenerator.next()); //{value: "undefined", done: true}
  /*
    總結(jié)一下，調(diào)用 Generator 函數(shù)，返回一個遍歷器對象，代表 Generator 函數(shù)的內(nèi)部指針。以后，每次調(diào)用遍歷器對象的next方法，就會返回一個有著value和done兩個屬性的對象。value屬性表示當前的內(nèi)部狀態(tài)的值，是yield表達式后面那個表達式的值；done屬性是一個布爾值，表示是否遍歷結(jié)束。
   */
  /*
    二、yield 表達式
    1.由于 Generator 函數(shù)返回的遍歷器對象，只有調(diào)用next方法才會遍歷下一個內(nèi)部狀態(tài)，所以其實提供了一種可以暫停執(zhí)行的函數(shù)。yield表達式就是暫停標志。
    遍歷器對象的next方法的運行邏輯如下。
    （1）遇到y(tǒng)ield表達式，就暫停執(zhí)行后面的操作，并將緊跟在yield后面的那個表達式的值，作為返回的對象的value屬性值。
    （2）下一次調(diào)用next方法時，再繼續(xù)往下執(zhí)行，直到遇到下一個yield表達式。
    （3）如果沒有再遇到新的yield表達式，就一直運行到函數(shù)結(jié)束，直到return語句為止，并將return語句后面的表達式的值，作為返回的對象的value屬性值。
    （4）如果該函數(shù)沒有return語句，則返回的對象的value屬性值為undefined。
    2.yield 表達式和 return 語句的區(qū)別： return 不具有記憶功能， yield 具有記憶功能，下次調(diào)用next()方法的時候會接著往下執(zhí)行。
    一個函數(shù)里面只能執(zhí)行一個return 語句 可以執(zhí)行多個yield 表達式。 yield 函數(shù)只能用在generator 函數(shù)里面不能用在其他函數(shù)里面,不然會報錯。
   */
  /*
    三、與 Iterator 接口的關(guān)系
    任意一個對象的Symbol.iterator方法，等于該對象的遍歷器生成函數(shù)，調(diào)用該函數(shù)會返回該對象的一個遍歷器對象。由于 Generator 函數(shù)就是遍歷器生成函數(shù)，因此可以把 Generator 賦值給對象的Symbol.iterator屬性，從而使得該對象具有 Iterator 接口。
   */
  var myIterable = {};
  myIterable[Symbol.iterator] = function* () {
    yield 1;
    yield 2;
    yield 3;
  };
  console.log([...myIterable]) // [1, 2, 3]
  /*
    四、next 方法的參數(shù)
    yield表達式本身沒有返回值，或者說總是返回undefined。next方法可以帶一個參數(shù)，該參數(shù)就會被當作上一個yield表達式的返回值。
    意義:可以在 Generator 函數(shù)運行的不同階段，從外部向內(nèi)部注入不同的值，從而調(diào)整函數(shù)行為。
   */
  function* foo(x) {
    var y = 2 * (yield (x + 1));
    var z = yield (y / 3);
    return (x + y + z);
  }
  var a = foo(5);
  a.next() // Object{value:6, done:false}
  a.next() // Object{value:NaN, done:false}
  a.next() // Object{value:NaN, done:true}
  var b = foo(5);
  b.next() // { value:6, done:false }
  b.next(12) // { value:8, done:false }
  b.next(13) // { value:42, done:true }
  /*
    五、for...of 循環(huán)
    for...of循環(huán)可以自動遍歷 Generator 函數(shù)時生成的Iterator對象，且此時不再需要調(diào)用next方法。(有點類似于 ... 對象的擴展運算符)
   */
  function* foo() {
    yield 1;
    yield 2;
    yield 3;
    yield 4;
    yield 5;
    return 6;
  }
  for (let v of foo()) {
    console.log(v);
  }
  // 1 2 3 4 5
  //上面代碼使用for...of循環(huán)，依次顯示 5 個yield表達式的值。這里需要注意，一旦next方法的返回對象的done屬性為true，for...of循環(huán)就會中止，且不包含該返回對象，所以上面代碼的return語句返回的6，不包括在for...of循環(huán)之中。
  //除了for...of循環(huán)以外，擴展運算符（...）、解構(gòu)賦值和Array.from方法內(nèi)部調(diào)用的，都是遍歷器接口。這意味著，它們都可以將 Generator 函數(shù)返回的 Iterator 對象，作為參數(shù)。
  function* numbers () {
    yield 1
    yield 2
    return 3
    yield 4
  }
  // 擴展運算符
  [...numbers()] // [1, 2]
  // Array.from 方法
  Array.from(numbers()) // [1, 2]
  // 解構(gòu)賦值
  let [x, y] = numbers();
  x // 1
  y // 2
  // for...of 循環(huán)
  for (let n of numbers()) {
    console.log(n)
  }
  // 1
  // 2
  /*
  六、Generator.prototype.throw()
   */
  function *testError(){
    try{
      yield ;
    }catch (e){
      console.log(e)
    }
  }
  var testE = testError();
  testE.throw(new Error('會出錯嗎？'));// 會出錯嗎？ 這個錯誤是由generator 函數(shù)的內(nèi)部捕獲的。
  /*
    七、Generator.prototype.return()
    Generator 函數(shù)返回的遍歷器對象，還有一個return方法，可以返回給定的值，并且終結(jié)遍歷 Generator 函數(shù)。
   */
  function* gen() {
    yield 1;
    yield 2;
    yield 3;
  }
  var g = gen();
  g.next()    // { value: 1, done: false }
  g.return('foo') // { value: "foo", done: true }
  g.next()    // { value: undefined, done: true }

以上就是Es6 中Generator函數(shù)有什么用，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降摹ＯＭ隳芡ㄟ^這篇文章學到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。