這篇文章給大家分享的是有關(guān)JavaScript中Generator函數(shù)有什么用的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過來看看吧。

10年積累的網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站制作后付款的網(wǎng)站建設(shè)流程，更有鶴山免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

Generator函數(shù)的定義

在阮一峰老師的書中的說法是:  
Generator 函數(shù)有多種理解角度。語法上，首先可以把它理解成，Generator 函數(shù)是一個(gè)狀態(tài)機(jī)，封裝了多個(gè)內(nèi)部狀態(tài)。執(zhí)行 Generator 函數(shù)會(huì)返回一個(gè)遍歷器對(duì)象,也就是說，Generator 函數(shù)除了狀態(tài)機(jī)，還是一個(gè)遍歷器對(duì)象生成函數(shù)。返回的遍歷器對(duì)象，可以依次遍歷 Generator 函數(shù)內(nèi)部的每一個(gè)狀態(tài)。

我的理解:  
生成器函數(shù)可以理解為: 函數(shù)內(nèi)部是由多個(gè)小函數(shù)組成的, 使用yield關(guān)鍵字將函數(shù)內(nèi)部 分割成多個(gè)塊區(qū)域; 并且當(dāng)函數(shù)執(zhí)行時(shí), 遇到y(tǒng)ield就會(huì)停止, 并且將yield 后面的表達(dá)式結(jié)果輸出(當(dāng)然外部要調(diào)用next()方法); 下次再調(diào)用next()方法時(shí), 就從上一個(gè)停止的地方開始執(zhí)行(這意味著函數(shù)有有記憶功能); 如果下面沒有再遇到y(tǒng)ield的話 就像普通函數(shù)執(zhí)行完. 函數(shù)的返回值是一個(gè)可迭代對(duì)象(遍歷器對(duì)象); 我喜歡叫可迭代對(duì)象, 或者說可遍歷對(duì)象...

說一說可迭代對(duì)象(iterator)的next()方法

function CreateIterator(iterator) {
    // 定義一個(gè)初始下標(biāo)用來判斷
    let nextIndex = 0;

    // 返回對(duì)象: 包含的next方法, 
    return {
        next: function () {
            // 返回一個(gè)對(duì)象: value是當(dāng)前對(duì)象下標(biāo)對(duì)應(yīng)的值, done是是否遍歷完成
            return nextIndex < iterator.length ?
                // i++ 先參數(shù)運(yùn)算在 自增1 
                {value: iterator[nextIndex++], done: false} :
                {value: undefined, done: true};
        }
    }
}
// 實(shí)例化一個(gè)遍歷器
let iter1 = CreateIterator([1,2,3,4,5]);
console.log(iter1); // 一個(gè)具有next方法的對(duì)象
console.log(iter1.next().value); // 1
console.log(iter1.next().value); // 2
console.log(iter1.next().value); // 3
console.log(iter1.next().value); // 4
console.log(iter1.next().value); // 5
console.log(iter1.next().value); // undefined

生成器函數(shù)的使用

generator生成器函數(shù)的使用:
function *fn() {
    代碼1; 
    yield; 
    代碼2;
}
普通函數(shù): 執(zhí)行到底
生成器函數(shù): 遇到y(tǒng)ield會(huì)暫停,交出執(zhí)行權(quán),下次執(zhí)行從上次的停止的位置繼續(xù)
生成器函數(shù)返回值為: 生成器對(duì)象
生成器對(duì)象.next()方法才能執(zhí)行 函數(shù)體中的代碼
// 可以解決函數(shù)回調(diào)嵌套的問題; 解決耗時(shí)操作
function *func() {
    // 請(qǐng)求數(shù)據(jù).
    // yield ajax() 
    // 處理數(shù)據(jù)
} 
// generator函數(shù)本質(zhì)上 分割成多個(gè)小函數(shù)來執(zhí)行... yield關(guān)鍵字前后
// 遇到y(tǒng)ield就暫停; 沒有就往下執(zhí)行...
// yield 起到了 暫停函數(shù)執(zhí)行的作用

關(guān)于yield關(guān)鍵字的理解

yield傳值

yield輸出值

舉個(gè)栗子:

     function *g2(x, y) {        
    let sum = x+y;
    yield sum; // sum是第一個(gè)輸出結(jié)果
        
    let agv = sum / 2;
    yield agv; // agv 是第二個(gè)輸出的結(jié)果
    
    return {"和": sum, "平均數(shù)": agv}; // 最后一個(gè)結(jié)果
}
    
let gg2 = g2(100, 20);        
console.log(gg2.next().value);  // 120
console.log(gg2.next().value);  // 60
console.log(gg2.next().value);  // { '和': 120, '平均數(shù)': 60 }

Generator的應(yīng)用

這里只做一個(gè)簡單舉例, 像我們平時(shí)使用的ES7中的 async 函數(shù); 他就是生成器函數(shù)的一種應(yīng)用; 它其實(shí)是 Generator 函數(shù)的語法糖。

借用ES6入門中的一個(gè)例子: 兩種方式去讀取文件

const fs = require('fs');

const readFile = function (fileName) {
  return new Promise(function (resolve, reject) {
    fs.readFile(fileName, function(error, data) {
      if (error) return reject(error);
      resolve(data);
    });
  });
};

// 1.使用生成器函數(shù) 讀取文件
const gen = function* () {
  const f1 = yield readFile(__dirname + '/first.json');
  const f2 = yield readFile(__dirname + '/second.json');

  console.log(f1.toString());  // 沒有輸出; 因?yàn)?f1 拿到是一個(gè) Iterator 對(duì)象 
  console.log(f2.toString());
};

// 使用 async + await 讀取; 注意兩種需配合使用
const asyncReadFile = async function () {
    const f1 = await readFile(__dirname + '/first.json');
    const f2 = await readFile(__dirname + '/second.json');

    console.log(f1.toString());  //async函數(shù)的返回值是 Promise 對(duì)象
    console.log(f2.toString());
};

gen(); // 沒有值, 需要用 next()方法去取值
asyncReadFile() // 返回值 {"hello": "first"} {"hello": "second"}

所以; 我們這里對(duì)比一下; async函數(shù)是將 Generator 函數(shù)的星號(hào)（*）替換成async，將yield替換成await，大大方便了我們的使用。

平時(shí)的異步代碼 我們就可以使用 async + await的形式來實(shí)現(xiàn)...
比如vue中的一個(gè)ajax請(qǐng)求去獲取數(shù)據(jù)

methods: {
    async getApi() {
        let res = await axios.get('url')
        // 這里的執(zhí)行順序是同步的...
        console.log(res)
    }
}

感謝各位的閱讀！關(guān)于JavaScript中Generator函數(shù)有什么用就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

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

當(dāng)前標(biāo)題：JavaScript中Generator函數(shù)有什么用-創(chuàng)新互聯(lián)
標(biāo)題路徑：http://chinadenli.net/article12/ecodc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、用戶體驗(yàn)、品牌網(wǎng)站制作、動(dòng)態(tài)網(wǎng)站、搜索引擎優(yōu)化、小程序開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)