成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JavaScript iterator 設計模式

CocoaChina / 1501人閱讀

摘要：迭代器模式就是按照順序訪問一個對象中元素，而不用暴露該對象的內(nèi)部組成。迭代器模式就是將這個迭代實現(xiàn)從業(yè)務中分離出來。外部迭代器外部迭代器必須顯式地請求才會迭代下一個元素。

迭代器模式就是按照順序訪問一個對象中元素，而不用暴露該對象的內(nèi)部組成。迭代器模式就是將這個迭代實現(xiàn)從業(yè)務中分離出來。

但實際開發(fā)中我們并不將他當成一個設計模式。

前瞻后顧

說起迭代器，想必對ES6有了解的同學應該不會陌生。我們知道，for ... of 遍歷的對象必須是迭代器對象，而普通對象則不能，因為普通對象內(nèi)部沒有實現(xiàn)迭代器，而像數(shù)組則內(nèi)部實現(xiàn)了迭代器，所以可以用for ... of 的語法，而對于一般對象在ES5中有專門的處理方法，for ... in 和
Object.keys() ，而 for ... in 可遍歷所有的的對象，但是它遍歷特殊對象，如數(shù)組，也會遍歷它的length，這并不是我們需要的，有時還會出現(xiàn)不按順序的遍歷。

在我們?nèi)粘Ｊ褂弥幸话闶菍⑵胀▽ο筠D(zhuǎn)化為特殊對象然后處理的。

仿jQuery迭代器

這里我只簡單的實現(xiàn)數(shù)組的遍歷，至于如何迭代普通對象，我們下面再做介紹。

var $ = {
    each: function (arr, fn) {
        for (var i = 0, len = arr.length; i < len; i++) {
            fn.call(arr[i], i, arr[i])
        }
    }
};

$.each([1, 2, 3, 4, 5, 6], function(i, val) {
    console.log([i, val]);
});
迭代器的分類

迭代器根據(jù)實現(xiàn)的位置，我們將它分為內(nèi)部迭代器和外部迭代器兩種。

內(nèi)部迭代器

內(nèi)部迭代器對于使用者來說他不用關(guān)心迭代器的內(nèi)部實現(xiàn)，只用關(guān)注使用的效果，我們上面仿jQuery的each就是個內(nèi)部迭代器的實現(xiàn)。

內(nèi)部迭代器有它的好處但是也有它的不足，比如我們要比較兩個數(shù)組是否相等，上面的方法就不滿足我們的需要，我們就需要寫一個新的方法來實現(xiàn)。

var $ = {
    each: function (arr, fn) {
        for (var i = 0, len = arr.length; i < len; i++) {
            fn.call(arr[i], i, arr[i])
        }
    }
};

var compareArray = function(arr, arr2) {
    if( arr.length !== arr2.length) {
        return false;
    }
 
    $.each(arr, function(i, val) {
        if( val !== arr2[i]) {
            return false;
        }
    });
    return true;
};

compareArray([1, 2], [1, 2, 3]); // false
外部迭代器

外部迭代器必須顯式地請求才會迭代下一個元素。

外部迭代器雖然增加了使用上的一些麻煩，但是它的靈活性卻正是我們需要的。我們可以人為的控制迭代的過程和順序。

// 迭代器實現(xiàn)
var Iterator = function(obj) {
    var current = 0;
 
    var next = function() {
        current += 1;
    };
 
    var isDone = function() {
        return current >= obj.length;
    };
 
    var getCurrItem = function() {
        return obj[current];
    };

    var len = function() {
        return obj.length;
    }
 
    return {
        next: next,
        isDone: isDone,
        getCurrItem: getCurrItem,
        length: len,
    }
};
// 比較數(shù)組
var compareArray = function (iteratorObj, iteratorObj2) {
    if(iteratorObj.length !== iteratorObj2.length) {
        return false;
    }
    while (!iteratorObj.isDone() && !iteratorObj2.isDone()){
        if (iteratorObj.getCurrItem() !== iteratorObj2.getCurrItem()){
            return false;
        }
        iteratorObj.next();
        iteratorObj2.next();
    }
 
    return true;
};

var arr = Iterator([1, 2, 3]); 
var arr2 = Iterator([1, 2, 3]); 
 
compareArray(arr, arr2); // true

這樣我們就用ES5實現(xiàn)了迭代器的功能，ES6的實現(xiàn)迭代器相對簡單，如果不熟悉的可以參考一下阮一峰老師的 ES6 使用手冊

迭代對象

使用ES6迭代器后發(fā)現(xiàn)，for ... of 能夠遍歷的迭代器對象，如: 數(shù)組，類數(shù)組，Set，Map，arguments等對象它們有一個共同的特性，就是它們都有一個length數(shù)組，可以實現(xiàn)對對象用下標進行訪問。

因此，要實現(xiàn)對普通對象的的迭代，我們可以參考jQuery的實現(xiàn)如下做：

var isArraylike = function(obj) {
    return Object.prototype.toString.call(obj) === [object Array];
}
$ = {
    each: function(obj, fn) {
        var isArray = isArraylike(obj); // 判斷對象是否為數(shù)組

        if (isArray) {
            for (var i = 0, len = obj.length ; i < len; i++ ) {
                if (fn.call(obj[i], i, obj[i]) === false) {
                    break;
                }
            }
        } else {
            for (i in obj) {
                if (fn.call(obj[i], i, obj[i]) === false) {
                    break;
                }
            }
        }
    }
};

我們再使用ES6處理一般對象時一般使用兩種方法，一種是將普通對象轉(zhuǎn)化為迭代器對象，另一種就是上面這種寫法。

設計模式周周講

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

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

相關(guān)文章

  • JavaScript 設計模式（五）：迭代器模式

    摘要：文章內(nèi)容分兩部分前半部分為迭代器模式概念后半部分為中迭代器上半部分開始迭代器模式提供一種方法順序訪問一個聚合對象中的各個元素，而又不需要暴露該對象的內(nèi)部表示。下半部分開始的迭代器迭代器等同于遍歷器。執(zhí)行該函數(shù)，會返回一個遍歷器對象。 showImg(https://segmentfault.com/img/bVbuyaZ?w=800&h=600); 文章內(nèi)容分兩部分： 前半部分為 迭...

    zhou_you 評論0 收藏0

  • JavaScript中常用的設計模式

    摘要：本文已同步到中常見的設計模式如果感覺寫的還可以，就給個小星星吧，歡迎和收藏。本文中關(guān)于各種設計模式定義都是引用書中的，部分引用自百度百科已標出。下面把我整理出的常用設計模式按類型做個表格整理。 本文已同步到Github JavaScript中常見的設計模式,如果感覺寫的還可以，就給個小星星吧，歡迎star和收藏。 最近拜讀了曾探大神的《JavaScript設計模式與開發(fā)實踐》，真是醍醐...

    NSFish 評論0 收藏0

  • 用ES6重寫《JavaScript Patterns》中的設計模式

    摘要：所以自己動手用重新實現(xiàn)了一遍里面的設計模式，算是對其的鞏固，也算是與大家一起來研究探討語法的一些最佳實踐。 前言 最近在回顧設計模式方式的知識，重新翻閱了《JavaScript模式》（個人感覺也算是一本小有名氣的書了哈）一書，讀時總有感觸：在即將到來的ES6的大潮下，書中的許多模式的代碼可用ES6的語法更為優(yōu)雅簡潔的實現(xiàn)，而另一些模式，則已經(jīng)被ES6原生支持，如模塊模式（99頁）。所...

    taohonghui 評論0 收藏0

  • 常見設計模式的定義，應用場景和方法

    摘要：命令模式的由來，其實是回調(diào)函數(shù)的一個面向?qū)ο蟮奶娲?，命令模式早已融入到了語言之中。 模式是對某情景下，針對某種問題的某種解決方案。而一個設計模式是用來解決一個經(jīng)常出現(xiàn)的設計問題的經(jīng)驗方法。這么說來，每個模式都可能有著自己的意圖，應用場景，使用方法和使用后果。本文的行文思路和目的皆在于了解各個模式的定義，應用場景和用實例說明如何在前端開發(fā)中使用。 本文所設計到的概念和實例大多來自《H...

    xuxueli 評論0 收藏0

  • 每個JavaScript開發(fā)人員都應該知道的新ES2018功能（譯文）

    摘要：為了使程序員能夠一次一個地處理集合中的元素，引入了迭代器接口。迭代器使用該方法獲取對象屬性名稱的數(shù)組，然后將其分配給常量。迭代器的缺點是它們不適合表示異步數(shù)據(jù)源。每次循環(huán)時，都會調(diào)用迭代器的方法，它返回一個。 前言 原文地址：https://css-tricks.com/new-es2018-features-every-javascript-developer-should-kno...

    leonardofed 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<