Es6 中Generator函數有什么用

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

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

Generator函數跟普通函數的寫法有非常大的區別：

一是，function關鍵字與函數名之間有一個星號；

二是，函數體內部使用yield語句，定義不同的內部狀態（yield在英語里的意思就是“產出”）。

本文重點給大家介紹Es6 Generator函數，具體內容如下所示：

/*    一、generator函數的定義

    1.Generator 函數是 ES6 提供的一種異步編程解決方案，語法行為與傳統函數完全不同
    2.形式上，Generator 函數是一個普通函數，但是有兩個特征。一是，function關鍵字與函數名之間有一個星號；二是，函數體內部使用yield表達式，定義不同的內部狀態
   */
  //定義一個generator函數 其內部有3種狀態
  var helloGenerator = function *() {
    var next1 = yield 'hello';
    yield 'world' + next1;
    return 'ending';
  }
  //調用generator 函數和普通函數一樣，直接加上雙括號 () 但是跟普通函數的區別是generator不會立即執行， 返回的也不是函數的結果，而是內部的一個指針。
  var newGenerator = helloGenerator();
  //generator 函數是分段執行的 會從頭部直到遇到下一個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代表的意思內部yield 表達式已經執行完畢 false則相反
  console.log(newGenerator.next()); //{value: "undefined", done: true}
  /*
    總結一下，調用 Generator 函數，返回一個遍歷器對象，代表 Generator 函數的內部指針。以后，每次調用遍歷器對象的next方法，就會返回一個有著value和done兩個屬性的對象。value屬性表示當前的內部狀態的值，是yield表達式后面那個表達式的值；done屬性是一個布爾值，表示是否遍歷結束。
   */
  /*
    二、yield 表達式
    1.由于 Generator 函數返回的遍歷器對象，只有調用next方法才會遍歷下一個內部狀態，所以其實提供了一種可以暫停執行的函數。yield表達式就是暫停標志。
    遍歷器對象的next方法的運行邏輯如下。
    （1）遇到yield表達式，就暫停執行后面的操作，并將緊跟在yield后面的那個表達式的值，作為返回的對象的value屬性值。
    （2）下一次調用next方法時，再繼續往下執行，直到遇到下一個yield表達式。
    （3）如果沒有再遇到新的yield表達式，就一直運行到函數結束，直到return語句為止，并將return語句后面的表達式的值，作為返回的對象的value屬性值。
    （4）如果該函數沒有return語句，則返回的對象的value屬性值為undefined。
    2.yield 表達式和 return 語句的區別： return 不具有記憶功能， yield 具有記憶功能，下次調用next()方法的時候會接著往下執行。
    一個函數里面只能執行一個return 語句 可以執行多個yield 表達式。 yield 函數只能用在generator 函數里面不能用在其他函數里面,不然會報錯。
   */
  /*
    三、與 Iterator 接口的關系
    任意一個對象的Symbol.iterator方法，等于該對象的遍歷器生成函數，調用該函數會返回該對象的一個遍歷器對象。由于 Generator 函數就是遍歷器生成函數，因此可以把 Generator 賦值給對象的Symbol.iterator屬性，從而使得該對象具有 Iterator 接口。
   */
  var myIterable = {};
  myIterable[Symbol.iterator] = function* () {
    yield 1;
    yield 2;
    yield 3;
  };
  console.log([...myIterable]) // [1, 2, 3]
  /*
    四、next 方法的參數
    yield表達式本身沒有返回值，或者說總是返回undefined。next方法可以帶一個參數，該參數就會被當作上一個yield表達式的返回值。
    意義:可以在 Generator 函數運行的不同階段，從外部向內部注入不同的值，從而調整函數行為。
   */
  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 循環
    for...of循環可以自動遍歷 Generator 函數時生成的Iterator對象，且此時不再需要調用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循環，依次顯示 5 個yield表達式的值。這里需要注意，一旦next方法的返回對象的done屬性為true，for...of循環就會中止，且不包含該返回對象，所以上面代碼的return語句返回的6，不包括在for...of循環之中。
  //除了for...of循環以外，擴展運算符（...）、解構賦值和Array.from方法內部調用的，都是遍歷器接口。這意味著，它們都可以將 Generator 函數返回的 Iterator 對象，作為參數。
  function* numbers () {
    yield 1
    yield 2
    return 3
    yield 4
  }
  // 擴展運算符
  [...numbers()] // [1, 2]
  // Array.from 方法
  Array.from(numbers()) // [1, 2]
  // 解構賦值
  let [x, y] = numbers();
  x // 1
  y // 2
  // for...of 循環
  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 函數的內部捕獲的。
  /*
    七、Generator.prototype.return()
    Generator 函數返回的遍歷器對象，還有一個return方法，可以返回給定的值，并且終結遍歷 Generator 函數。
   */
  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函數有什么用，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。