Underscore.js學習

each_.each(list, iteratee, [context]) 別名： forEach 
遍歷list中的全部元素，按順序用遍歷輸出每一個元素。若是傳遞了context參數，則把iteratee綁定到context對象上。每次調用iteratee都會傳遞三個參數：(element, index, list)。若是list是個JavaScript對象，iteratee的參數是 (value, key, list))。返回list以方便鏈式調用。（注：若是存在原生的forEach方法，Underscore就使用它代替。）

剛開始看到的時候不太理解裏面的參數的意思，因而寫了段代碼測試一下:

_ = require('underscore'); 
var a = [1, 2, 3];
function test(element, index, list) {
    if(list[index] == 2) {
            console.log(element);
            console.log(index);
            console.log(list);
        };
};
_.each(a,test(element, index, list));

/* 輸出
2
1
[ 1, 2, 3 ]
第一行是數組中當前迭代到的值，第二行是該值的代碼，第三行是這個數組
*/

可是最後的那個[context]仍是不理解是什麼意思，又改了一下：

_ = require('underscore'); 
var a = [1, 2, 3];
_.each(a,console.log);

/* 輸出
1 0 [ 1, 2, 3 ]
2 1 [ 1, 2, 3 ]
3 2 [ 1, 2, 3 ]
*/

看不懂的輸出，看到有提到源碼，去看源碼：

// _.each的源碼部分
_.each = _.forEach = function(obj, iteratee, context) {
    if (obj == null) return obj;
    // 涉及到context的地方
    iteratee = createCallback(iteratee, context); var i, length = obj.length;
    if (length === +length) {
        for (i = 0; i < length; i++) {
            iteratee(obj[i], i, obj);
        }
    } else {
        var keys = _.keys(obj);
        for (i = 0, length = keys.length; i < length; i++) {
            iteratee(obj[keys[i]], keys[i], obj);
        }
    }
    return obj;
};

因而去看createCallback是什麼鬼：

 

var createCallback = function(func, context, argCount) {
    if (context === void 0) return func;
    switch (argCount == null ? 3 : argCount) {
        case 1:
            return function(value) {
                return func.call(context, value);
            };
        case 2:
            return function(value, other) {
                return func.call(context, value, other);
            };
        case 3:
            return function(value, index, collection) {
                return func.call(context, value, index, collection);
            };
        case 4:
            return function(accumulator, value, index, collection) {
                return func.call(context, accumulator, value, index, collection);
            };
    }
    return function() {
        return func.apply(context, arguments);
    };
};

這麼長，容我慢慢看。。。