迭代器是一個(gè)框架的重要設(shè)計(jì)。我們經(jīng)常需要提供一種方法順序用來處理聚合對象中各個(gè)元素，而又不暴露該對象的內(nèi)部，這也是設(shè)計(jì)模式中的迭代器模式(Iterator)。

jQuery中的$.each方法就是一個(gè)典型的迭代器，通過each我們可以傳入額外的function，然后來對所有的item項(xiàng)進(jìn)行迭代操作，如下代碼：

$.each([52, 97], function(index, value) {
  alert(index + ': ' + value);
});
$( "li" ).each(function( index ) {
  console.log( index + ": "" + $(this).text() );
});

針對迭代器，這里有幾個(gè)特點(diǎn)：

? 訪問一個(gè)聚合對象的內(nèi)容而無需暴露它的內(nèi)部。

? 為遍歷不同的集合結(jié)構(gòu)提供一個(gè)統(tǒng)一的接口，從而支持同樣的算法在不同的集合結(jié)構(gòu)上進(jìn)行操作。

? 遍歷的同時(shí)更改迭代器所在的集合結(jié)構(gòu)可能會導(dǎo)致問題。

簡單的說：封裝實(shí)現(xiàn)，然后迭代器的聚合對象不用關(guān)心迭代的過程，從而符合SRP原則。

拋開jQuery的each方法，我們自己實(shí)現(xiàn)一個(gè)有簡單的迭代器功能的代碼：

1、簡單回調(diào)

function each(obj, callback) {
    var i = 0;
    var value;
    var length = obj.length;
    for (; i < length; i++) {
        callback(obj[i]);
    }
}
var arr = ['a', 'b', 'c'];
each(arr, function(name) {
    console.log(name); 
})

這樣就滿足了迭代模式的設(shè)計(jì)原則，對于集合內(nèi)部結(jié)果常常變化各異，我們不想暴露其內(nèi)部結(jié)構(gòu)，但又想讓客戶代碼透明地訪問其中的元素，通過回調(diào)把邏輯給解耦出來。但是這樣的處理其實(shí)太簡單了，我們還要考慮至少四種情況：

? 聚合對象，可能是對象，字符串或者數(shù)組等類型

? 支持參數(shù)傳遞

? 支持上下文的傳遞

? 支持循環(huán)中退出

我們簡單的修改一下上面的代碼：

function each(obj, callback, context, arg) {
    var i = 0;
    var value;
    var length = obj.length;
    for (; i < length; i++) {
        callback.call(context || null, obj[i], arg);
    }
}
var arr = ['a', 'b', 'c'];
each(arr, function(name, arg) {
    console.log(name, arg ,this);
}, this, 'aaa')

當(dāng)然根據(jù)回調(diào)的處理，從而判斷是否要立刻中斷這個(gè)循環(huán)，從而節(jié)約性能，也是很簡單的，我們可以通過獲取處理的返回值來處理，如下代碼：

function each(obj, callback, context, arg) {
    var i = 0;
    var value;
    var length = obj.length;
    for (; i < length; i++) {
        value = callback.call(context || null, obj[i], arg);
        if (value === false) {
            break;
        }
    }

可見只要通過回調(diào)函數(shù)callback返回的ture/false的布爾值結(jié)果就可以來判斷當(dāng)前是否要強(qiáng)制退出循環(huán)。