JavaScript迭代器與生成器使用詳解

更新時間：2022年11月08日 11:04:29 作者：亦世凡華、

迭代器是一個統(tǒng)一的接口，它的作用是使各種數(shù)據(jù)結(jié)構(gòu)可以被便捷的訪問，它是通過一個鍵為Symbol.iterator的方法來實現(xiàn)，這篇文章主要介紹了ES6 中的迭代器和生成器,需要的朋友可以參考下

迭代器 (Iterator)

迭代器(Iterator)也叫遍歷器，是一種接口，為各種不同的數(shù)據(jù)結(jié)構(gòu)提供統(tǒng)一的訪問機制。任何數(shù)據(jù)結(jié)構(gòu)只要部署 Iterator 接口，就可以完成遍歷操作；JS中原有表示“集合”的數(shù)據(jù)結(jié)構(gòu)，主要是數(shù)組（Array）和對象（Object），ES6又新增了 Map 和 Set，這樣就有了四種數(shù)據(jù)集合。

如果用戶組合使用四種不同的數(shù)據(jù)結(jié)構(gòu)，比如數(shù)組的成員是對象或者對象的成員是Map，這樣就需要一種統(tǒng)一的接口機制，來處理所有不同的數(shù)據(jù)結(jié)構(gòu)，這里就需要借助 Iterator ，其作用為：為各種數(shù)據(jù)結(jié)構(gòu)提供統(tǒng)一簡便的訪問接口、使數(shù)據(jù)結(jié)構(gòu)的成員能夠按某種次序排列、給ES6新增的遍歷方法 for...of 提供消費。

Iterator工作原理

??‍需要自定義遍歷數(shù)據(jù)的時候，要想到迭代器，以下是使用原理：

創(chuàng)建一個指針對象，指向當前數(shù)據(jù)結(jié)構(gòu)的起始位置

第一次調(diào)用對象的 next 方法，指針自動指向數(shù)據(jù)結(jié)構(gòu)的第一個成員

接下來不斷調(diào)用 next 方法，指針一直往后移動，直到指向最好一個成員

??每調(diào)用 next 方法返回一個包含 value 和 done 屬性的對象

<script>
    // 聲明一個數(shù)組
    const animals = ['大象','獅子','老虎','獵豹','猴子']
    // 創(chuàng)建一個指針對象
    let iterator = animals[Symbol.iterator]()
    // 調(diào)用對象的next方法
    console.log(iterator.next());
    console.log(iterator.next());
    console.log(iterator.next());
    console.log(iterator.next());
    console.log(iterator.next());
    console.log(iterator.next());
</script>

next()方法：返回一個對象，表示當前數(shù)據(jù)成員的信息。這個對象具有 value 和 done 兩個屬性，value屬性返回當前位置的成員，done屬性是一個布爾值，表示遍歷是否結(jié)束，即是否還有必要再一次調(diào)用next()方法。

自定義遍歷數(shù)據(jù)

當我們使用 for...of 循環(huán)遍歷某種數(shù)據(jù)結(jié)構(gòu)時，該循環(huán)會自動去尋找 Iterator 接口，其接口默認部署在 Symbol.iterator 屬性上，Symbol.iterator屬性本身就是一個函數(shù)，就是當前數(shù)據(jù)結(jié)構(gòu)默認遍歷器生成函數(shù)，執(zhí)行這個函數(shù)就會返回一個遍歷器。

<script>
    // 聲明一個對象
    const classroom = {
        name:'終極一班',
        team: [
            '汪大東',
            '金寶三',
            '花靈龍',
            '中萬鈞',
            '雷婷'
        ],
        [Symbol.iterator](){
            // 索引變量
            let index = 0
            // 引入函數(shù)外的this
            let _this = this
            return {
                next:function(){
                    if(index<_this.team.length){
                        const result = {value:_this.team[index],done:false}
                        // 下標自增
                        index++
                        // 返回結(jié)果
                        return result
                    }else{
                        return {value:undefined,done:true}
                    }
                }
                // 對于遍歷器對象來說，done: false和value: undefined屬性都是可以省略的，因此上面的makeIterator函數(shù)可以簡寫成下面的形式
                // next:function(){
                //     return index<_this.team.length ? {value:_this.team[index++]}:{done:true}
                // }
            }
        }
    }
    // 遍歷這個對象
    for(let con of classroom){
        console.log(con);
    }
</script>

生成器 (Generator)

生成器函數(shù)是ES6提供的一種異步操作編程方案，語法行為與傳統(tǒng)函數(shù)完全不同。以前我們進行異步編程的方法就是純回調(diào)函數(shù)，Generator函數(shù)與普通函數(shù)的區(qū)別在于：function關(guān)鍵字與函數(shù)名之間有一個星號，函數(shù)體內(nèi)部使用yield表達式，具體案例如下：

<script>
    // 生成器其實就是一個特殊的函數(shù)，在function與函數(shù)名中間補上一個星號
    // yield就是一個函數(shù)分隔符，使生成器函數(shù)執(zhí)行暫停，,yield關(guān)鍵字后面的表達式的值返回給生成器的調(diào)用者
    function * person() {
        console.log('hello world');
        yield '第一分隔線' 
        console.log('hello world 1');
        yield '第二分隔線'
        console.log('hello world 2');
        yield '第三分隔線'
    }
    let iterator = person()
    // console.log(iterator); 打印的就是一個迭代器對象，里面有一個 next() 方法，我們借助next方法讓它運行
    iterator.next()
    iterator.next()
    iterator.next()
</script>

既然上文代碼是一個迭代器對象，我們可以用 for...of 進行一個遍歷。

<script>
    function * person() {
        yield '第一分隔線' 
        yield '第二分隔線'
        yield '第三分隔線'
    }
    for(let v of person()){
        console.log(v);//打印是yield后面字符串的內(nèi)容
    }
    console.log('-----------------');
    // 方法補充：yield* 后面跟的是一個可遍歷的結(jié)構(gòu)，它會調(diào)用該結(jié)構(gòu)的遍歷器接口。
    let generator = function* () {
        yield 1;
        yield* [2,3,4];
        yield 5;
    };
    var iterator = generator();
    console.log(iterator.next());// { value: 1, done: false }
    console.log(iterator.next()); // { value: 2, done: false }
    console.log(iterator.next()); // { value: 3, done: false }
    console.log(iterator.next()); // { value: 4, done: false }
    console.log(iterator.next()); // { value: 5, done: false }
    console.log(iterator.next()); // { value: undefined, done: true }
</script>

生成器參數(shù)傳遞

生成器是可以進行參數(shù)傳遞的，傳遞的參數(shù)還是需要借助next方法才可以，next方法也是可以傳遞參數(shù)的，傳遞的參數(shù)是作為上一個 yield 的返回結(jié)果，說白了就是將原來的值給覆蓋了。

<script>
    function * person(arg) {
        console.log(arg);
        let one = yield 111
        console.log(one);
        let two = yield 222
        console.log(two);
        let three = yield 333
        console.log(three);
    }
    // 執(zhí)行獲取迭代器對象
    let iterator = person('AAA')
    console.log(iterator.next());
    // next方法傳入實參
    console.log(iterator.next('BBB'));
    console.log(iterator.next('CCC'));
    console.log(iterator.next('DDD'));
</script>

Genterator 函數(shù)從暫停狀態(tài)到恢復(fù)運行，它的上下文狀態(tài)（context）是不變的。通過next方法的參數(shù)，就有辦法在 Generator 函數(shù)開始運行之后，繼續(xù)向函數(shù)體內(nèi)部注入值。也就是說，可以在 Generator 函數(shù)運行的不同階段，從外部向內(nèi)部注入不同的值，從而調(diào)整函數(shù)行為。

使用生成器實現(xiàn)回調(diào)地獄功能

ES6誕生之前，異步編程大致有四種：回調(diào)函數(shù)、事件監(jiān)聽、發(fā)布/訂閱、Promise對象，如下案例講解回調(diào)地獄的實現(xiàn)：

<script>
    // 案例： 1s打印111，2s打印222，3s打印333
    // 回調(diào)地獄
    setTimeout(()=>{
        console.log(111);
        setTimeout(()=>{
            console.log(222);
            setTimeout(()=>{
                console.log(333);
            },3000)
        },2000)
    },1000)
    // 生成器
    function one(){
        setTimeout(()=>{
            console.log(111);
            iterator.next()
        },1000)
    }
    function two(){
        setTimeout(()=>{
            console.log(222);
            iterator.next()
        },2000)
    }
    function three(){
        setTimeout(()=>{
            console.log(333);
            iterator.next()
        },3000)
    }
    function * gen(){
        yield one()
        yield two()
        yield three()
    }
    let iterator = gen()
    iterator.next()
</script>

生成器函數(shù)實例

生成函數(shù)在異步任務(wù)這一方面的表現(xiàn)

<script>
    // 案例：用戶信息 商品信息 商品價格
    function getUsers (){
        setTimeout(()=>{
            let data = '用戶信息'
            iterator.next(data)
        },1000)
    }
    function getGoods (){
        setTimeout(()=>{
            let data = '商品信息'
            iterator.next(data)
        },1000)
    }
    function getPrice (){
        setTimeout(()=>{
            let data = '商品價格'
            iterator.next(data)
        },1000)
    }
    // 生成器
    function * gen(){
        let users = yield getUsers()
        console.log(users);
        let goods = yield getGoods()
        console.log(goods);
        let price = yield getPrice()
        console.log(price);
    }
    // 調(diào)用生產(chǎn)器函數(shù)
    let iterator = gen()
    iterator.next()
</script>

生成器—throw()

Generator 函數(shù)返回的遍歷器對象，都有一個throw方法，可以在函數(shù)體外拋出錯誤，然后在 Generator 函數(shù)體內(nèi)捕獲。如果生產(chǎn)器函數(shù)內(nèi)部沒有部署try...catch代碼塊，那么拋出的錯誤會直接被外部的catch代碼塊捕獲。如果 Generator 函數(shù)內(nèi)部和外部，都沒有部署try...catch代碼塊，那么程序?qū)箦e，直接中斷執(zhí)行。

<script>
    var g = function* () {
    try {
        yield;
    } catch (e) {
        console.log('內(nèi)部捕獲', e);//a
    }
    };
    var i = g();
    i.next();
    try {
        i.throw('a');
        i.throw('b');
    } catch (e) {
        console.log('外部捕獲', e);//b
    }
</script>

生成器—return()

生成器的return方法，可以返回給定的值，并且終結(jié)遍歷 Generator 函數(shù)。

<script>
    function* gen() {
        yield 1;
        yield 2;
        yield 3;
    }
    var g = gen();
    console.log(g.next())        // { value: 1, done: false }
    // 遍歷器對象g調(diào)用return()方法后，返回值的value屬性就是return()方法的參數(shù)foo。并且，Generator 函數(shù)的遍歷就終止了
    console.log(g.return('foo')) // { value: "foo", done: true }
    console.log(g.next())        // { value: undefined, done: true }
    // 如果return()方法調(diào)用時，不提供參數(shù)，則返回值的value屬性為undefined。
    function* gen1() {
        yield 1;
        yield 2;
        yield 3;
    }   
    var g1 = gen1();
    console.log(g1.next()) // { value: 1, done: false }
    console.log(g1.return()) // { value: undefined, done: true }
</script>

如果 Generator 函數(shù)內(nèi)部有try...finally代碼塊，且正在執(zhí)行try代碼塊，那么return()方法會導致立刻進入finally代碼塊，執(zhí)行完以后，整個函數(shù)才會結(jié)束，調(diào)用return()方法后，就開始執(zhí)行finally代碼塊，不執(zhí)行try里面剩下的代碼了，然后等到finally代碼塊執(zhí)行完，再返回return()方法指定的返回值

<script>
    function* numbers () {
        yield 1;
        try {
            yield 2;
            yield 3;
        } finally {
            yield 4;
            yield 5;
        }
        yield 6;
    }
    var g = numbers();
    console.log(g.next()) // { value: 1, done: false }
    console.log(g.next()) // { value: 2, done: false }
    console.log(g.return(7)) // { value: 4, done: false }
    console.log(g.next()) // { value: 5, done: false }
    console.log(g.next()) // { value: 7, done: true }
</script>

生成器簡寫

如果一個對象的屬性是 Generator 函數(shù)，可以用如下形式進行簡寫：

<script>
    let obj = {
        // myGeneratorMethod: function * (){}
        // 上面代碼可以簡寫成如下形式，在屬性前加一個 Generator 函數(shù)即可。
        * myGeneratorMethod(){}
    }
</script>

到此這篇關(guān)于JavaScript迭代器與生成器使用詳解的文章就介紹到這了,更多相關(guān)JS迭代器與生成器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: