小編給大家分享一下ES6生成器怎么使用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)公司專注于汝南企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站,成都做商城網(wǎng)站。汝南網(wǎng)站建設(shè)公司,為汝南等地區(qū)提供建站服務(wù)。全流程按需開發(fā)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)

概念

生成器是由生成器函數(shù)（ generator function ）運(yùn)行后得到的，是可迭代的。

function* gen() { 
  yield 'a';
  yield 'b';
  yield 'c';
}

let g = gen(); 
// "Generator { }"

原理及簡單運(yùn)用

生成器有一個很大的特點(diǎn)，它可以暫停內(nèi)部代碼運(yùn)行，返回一個值給外部函數(shù)。（暫停后不會阻止其他代碼運(yùn)行）當(dāng)外部調(diào)用其 next 方法后，會繼續(xù)執(zhí)行剩下的代碼，并接受外部傳來的一個參數(shù)。這個實(shí)現(xiàn)主要依賴于關(guān)鍵字 yield 。

yield 關(guān)鍵字使生成器函數(shù)執(zhí)行暫停，yield 關(guān)鍵字后面的表達(dá)式的值返回給生成器的調(diào)用者。它可以被認(rèn)為是一個基于生成器的版本的 return 關(guān)鍵字。

function* g(){
    var a = yield 2;
    console.log(a);
}

var it = g(); // 返回一個可迭代的生成器對象
console.log(it.next()); // 執(zhí)行生成器函數(shù)內(nèi)部代碼，第一次返回 {done: false, value: 2}
it.next(3); // 繼續(xù)執(zhí)行生成器函數(shù)內(nèi)部代碼，同時向生成器傳遞參數(shù)3，最后返回 {done: true, value: undefined}

一個簡單的計(jì)數(shù)器

function* count(){
    var n = 1;
   while(true){
        yield n++;
    }
}

var it = count();
it.next(); // 1
it.next(); // 2
it.next(); // 3

用同步方式寫異步代碼

以前處理異步 ajax 請求結(jié)果，一般采用傳遞回調(diào)函數(shù)的方式。一旦遇到多層回調(diào)嵌套，代碼的可讀性會降低，并且調(diào)試起來也不方便。有了生成器之后，我們就可以用同步的方式寫異步的代碼。這聽上去非常的有意思。我們的代碼將會是這樣的

function foo(){
    var result = asyncFun(); // asyncFun 是異步函數(shù)，result 是異步返回的結(jié)果
    console.log(result);
}

當(dāng)然，上面的代碼并不能得到正確的結(jié)果，它只是一個設(shè)想。我們正打算用生成器來實(shí)現(xiàn)，而且這是可行的。想想生成器有哪些特點(diǎn):

1. 它能暫停，向外部返回值
2. 能繼續(xù)執(zhí)行剩下的代碼，并接受外部傳來的參數(shù)

這就足夠了。有了生成器函數(shù)，現(xiàn)在我們重新來設(shè)計(jì)代碼：

function* foo(){
    // 這里遇到了異步方法，必須停下來。
    // 等待異步方法執(zhí)行完畢，并返回結(jié)果，繼續(xù)運(yùn)行代碼。當(dāng)然，同步 ajax 不能算，它不是異步
    // 輸出結(jié)果
}

靜下來想一想有哪些關(guān)鍵字，與暫停、繼續(xù)有關(guān)。停下來...繼續(xù)...停下來...繼續(xù)...停下來...繼續(xù)...Don't...Stop...Don't...Stop...Don't...Stop......這兩個詞就是 yield、next.

function *foo(){
    var result = yield asyncFun(next);
    console.log(result);
}

當(dāng)代碼遇到 yield 會暫停，這個時候 asyncFun 函數(shù)是不會暫停的，會執(zhí)行，等執(zhí)行完畢，再調(diào)用生成器的 next 方法，并將返回結(jié)果作為參數(shù)傳給 next。由于在生成器函數(shù)內(nèi)部我們拿不到 next，必須借助于全局變量來傳遞 next。

var next, gn;

function asyncFun(next){
    // 模擬異步請求
    setTimeout(function(){
        // 返回一個隨機(jī)數(shù)
        next(Math.random())
    }, 1000)
}

function* foo(){
    var result = yield asyncFun(next);
    console.log(result);
}

gn = foo();
next = gn.next.bind(gn);
next(); // 打印隨機(jī)數(shù)

這樣寫，運(yùn)行看上去有些繁重?？梢詫懸粋€包裝函數(shù)運(yùn)行含有異步代碼的生成器函數(shù)。

function asyncFun(next){
  // 模擬異步請求
  setTimeout(function(){
    // 返回一個隨機(jī)數(shù)
    next(Math.random())
  }, 1000)
}

function* foo(){
  var result = yield function(next){asyncFun(next)};
  console.log(result);
}



function wrapFun (gFn){
  var gn = foo(),
      next = gn.next.bind(gn);
  next().value(next);
}

wrapFun(foo);

演示地址

不過，自從出了 Promise 和 await 之后，更多的是用這個組合，其使用也更簡單，范圍也更廣。

以上是ES6生成器怎么使用的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

標(biāo)題名稱：ES6生成器怎么使用-創(chuàng)新互聯(lián)
文章位置：http://weahome.cn/article/jedej.html