亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

ES6 生成器簡單運(yùn)用

JaysonWang / 1127人閱讀

摘要：概念生成器是由生成器函數(shù)運(yùn)行后得到的，是可迭代的。關(guān)鍵字使生成器函數(shù)執(zhí)行暫停，關(guān)鍵字后面的表達(dá)式的值返回給生成器的調(diào)用者。模擬異步請求返回一個(gè)隨機(jī)數(shù)演示地址不過，自從出了和之后，更多的是用這個(gè)組合，其使用也更簡單，范圍也更廣。

概念

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

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

let g = gen(); 
// "Generator { }"
原理及簡單運(yùn)用

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

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

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

一個(gè)簡單的計(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)嵌套，代碼的可讀性會(huì)降低，并且調(diào)試起來也不方便。有了生成器之后，我們就可以用同步的方式寫異步的代碼。這聽上去非常的有意思。我們的代碼將會(huì)是這樣的

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

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

它能暫停，向外部返回值

能繼續(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......這兩個(gè)詞就是 yield、next.

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

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

var next, gn;

function asyncFun(next){
    // 模擬異步請求
    setTimeout(function(){
        // 返回一個(gè)隨機(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)行看上去有些繁重?？梢詫懸粋€(gè)包裝函數(shù)運(yùn)行含有異步代碼的生成器函數(shù)。

function asyncFun(next){
  // 模擬異步請求
  setTimeout(function(){
    // 返回一個(gè)隨機(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 之后，更多的是用這個(gè)組合，其使用也更簡單，范圍也更廣。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/102619.html

相關(guān)文章

  • Javascript 打包工具

    摘要：所以，打包工具就出現(xiàn)了，它可以幫助做這些繁瑣的工作。打包工具介紹僅介紹款主流的打包工具，，，，以發(fā)布時(shí)間為順序。它定位是模塊打包器，而屬于構(gòu)建工具。而且在其他的打包工具在處理非網(wǎng)頁文件比如等基本還是需要借助它來實(shí)現(xiàn)。 本文當(dāng)時(shí)寫在本地，發(fā)現(xiàn)換電腦很不是方便，在這里記錄下。 前端的打包工具 打包工具可以更好的管理html，css，javascript，使用可以錦上添花，不使用也沒關(guān)系...

    Sleepy 評(píng)論0 收藏0

  • ES6——生成器

    摘要：我們還能如何使用生成器作為迭代器的能力使對象可迭代。一些重要的事件值得了解生成器是由布倫丹艾希首次在上實(shí)現(xiàn)的。布倫丹艾希的設(shè)計(jì)是緊緊跟隨由啟發(fā)的生成器。 什么是生成器？ 我們先從下面的這里例子開始。 function* quips(name) { yield hello + name + !; yield i hope you are enjoying the blog po...

    cgh1999520 評(píng)論0 收藏0

  • webpack配置 babel

    摘要：三集成所需要的依賴和在或加載模塊時(shí)，對代碼進(jìn)行預(yù)處理，語法轉(zhuǎn)化為語法。到目前位置，用于開發(fā)應(yīng)用的環(huán)境已經(jīng)配置好了。 本系列主要學(xué)習(xí)webpack的配置。webpack自己間接的用過不少次，但是自己配置卻沒多少次，所以特地寫寫文章，學(xué)習(xí)webpack的配置，有不恰當(dāng)?shù)牡胤剑瑲g迎指正。這次配置 babel 。 若你對webpack的概念還不了解，先查看相應(yīng)文檔webpack中文文檔 一、初...

    Songlcy 評(píng)論0 收藏0

  • ES6簡單了解

    摘要：報(bào)錯(cuò)塊級(jí)作用域明確允許在塊級(jí)作用域中聲明函數(shù)。但其值是固定的，不可更改，只讀。一旦聲明變量，就必須立即初始化，不能留到以后賦值。調(diào)用函數(shù)會(huì)返回一個(gè)內(nèi)部指針，執(zhí)行它不會(huì)返回結(jié)果返回的是指針對象。 ES6初步學(xué)習(xí) let和const let 用來聲明變量，但是所聲明的變量只在let命令所在的代碼塊內(nèi)有效 let不像var那樣會(huì)發(fā)生變量提升，所以一定要先聲明后使用。 console.log...

    K_B_Z 評(píng)論0 收藏0

  • 你需要了解的ES6的新特性（前沿技術(shù)）

    摘要：年月，的創(chuàng)造者公司，決定將提交給國際標(biāo)準(zhǔn)化組織，希望這種語言能夠成為國際標(biāo)準(zhǔn)。這表示外層代碼塊不受內(nèi)層代碼塊的影響。也可以運(yùn)用于函數(shù)及其他文中就簡單介紹這么多，想更加了解新特性的可以自尋查看一下阮一峰的一本入門 ES6新特性 最近在項(xiàng)目中遇到了很多ES6的語法，遇到了不少坑坑洼洼，因此，在這里就簡單介紹一下ES6中的一些新特性 如果想真正的了解ES6和ES5有什么不同，這里推薦看一下...

    Nino 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<