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);
    };
};

这么长,容我慢慢看。。。

原文地址:https://www.cnblogs.com/lswit/p/5212427.html