underscore.js源码解析（三）

最近工作比较忙，做不到每周两篇了，周末赶着写吧，上篇我针对一些方法进行了分析，今天继续。

没看过前两篇的可以猛戳这里：

underscore.js源码解析（一）

underscore.js源码解析（二）

underscore.js源码GitHub地址： https://github.com/jashkenas/underscore/blob/master/underscore.js

本文解析的underscore.js版本是1.8.3

_.map/_.collect

  _.map = _.collect = function(obj, iteratee, context) {
    iteratee = cb(iteratee, context);
    //判断是否是数组，是的话就将里面的属性取出
    var keys = !isArrayLike(obj) && _.keys(obj),
        length = (keys || obj).length,
        results = Array(length);
    for (var index = 0; index < length; index++) {
      var currentKey = keys ? keys[index] : index;
      results[index] = iteratee(obj[currentKey], currentKey, obj);
    }
    return results;
  };

map和each的区别就是map是将最后的结果以数组的形式返回

createReduce

  var createReduce = function(dir) {
    var reducer = function(obj, iteratee, memo, initial) {
      //判断是否是数组
      var keys = !isArrayLike(obj) && _.keys(obj),
          length = (keys || obj).length,
          //判断迭代方向，dir为1是从左向右迭代，dir为-1是从右向左迭代（从_.reduce和_.reduceRight里就可以清晰的看出来）
          index = dir > 0 ? 0 : length - 1;
      //判断是否存在初始值
      if (!initial) {
        //如果没有初始值，则将第一个设置为初始值，前面判断了是否是数组，是数组返回数组否则返回对象
        memo = obj[keys ? keys[index] : index];
        //根据方向将初始位置赋给index，为了下边遍历使用
        index += dir;
      }
      //进行遍历
      for (; index >= 0 && index < length; index += dir) {
        var currentKey = keys ? keys[index] : index;
        //进行迭代运算
        memo = iteratee(memo, obj[currentKey], currentKey, obj);
      }
      return memo;
    };

    return function(obj, iteratee, memo, context) {
      //通过参数数量判断是否有初始值
      var initial = arguments.length >= 3;
      //调用reducer()
      return reducer(obj, optimizeCb(iteratee, context, 4), memo, initial);
    };
  };

 

 看了上面的注释你可以清晰的发现createReduce的结构已经很清晰了，内部调用reducer函数，先判断有没有初始值，如果没有则根据迭代方向给初始值赋值，然后进行循环的迭代。

createPredicateIndexFinder

var createPredicateIndexFinder = function(dir) {
    return function(array, predicate, context) {
      //迭代函数
      predicate = cb(predicate, context);
      var length = getLength(array);
      //判断遍历方向，dir为1是从左向右，dir为-1是从右向左
      var index = dir > 0 ? 0 : length - 1;
      for (; index >= 0 && index < length; index += dir) {
        //遍历返回符合条件的是第几个
        if (predicate(array[index], index, array)) return index;
      }
      //否则返回-1
      return -1;
    };
  };

 _.findIndex/_.findLastIndex

  _.findIndex = createPredicateIndexFinder(1);
  _.findLastIndex = createPredicateIndexFinder(-1);

调用上面的createPredicateIndexFinder内部函数，两者只是遍历的方向不同，最终返回相应的索引

_.findKey

  _.findKey = function(obj, predicate, context) {
    //迭代函数
    predicate = cb(predicate, context);
    var keys = _.keys(obj), key;
    for (var i = 0, length = keys.length; i < length; i++) {
      //获取对象属性
      key = keys[i];
      if (predicate(obj[key], key, obj)) return key;
    }
  };

返回满足条件的属性

_.find / _.detect

  _.find = _.detect = function(obj, predicate, context) {
    var key;
    if (isArrayLike(obj)) {
      //如果是数组通过findIndex获取满足条件的索引
      key = _.findIndex(obj, predicate, context);
    } else {
      //如果是对象则通过findKey获取满足条件的属性
      key = _.findKey(obj, predicate, context);
    }
    //根据上面取到的索引或属性，返回相应的值
    if (key !== void 0 && key !== -1) return obj[key];
  };

_.filter/_.select

_.filter = _.select = function(obj, predicate, context) {
    var results = [];
    predicate = cb(predicate, context);
    //遍历数据，将符合条件的存入results数组当中，并返回
    _.each(obj, function(value, index, list) {
      if (predicate(value, index, list)) results.push(value);
    });
    return results;
  };

_.negate

_.negate = function(predicate) {
    return function() {
      return !predicate.apply(this, arguments);
    };
  };

_.negate就是一个取反的函数

_.reject

_.reject = function(obj, predicate, context) {
    return _.filter(obj, _.negate(cb(predicate)), context);
  };

_.reject调用了filter，只是做了一个判断条件的取反操作，说明_.reject就是讲不符合条件的存入数组并返回

_.every/_.all

_.every = _.all = function(obj, predicate, context) {
    predicate = cb(predicate, context);
    //判断数组还是对象
    var keys = !isArrayLike(obj) && _.keys(obj),
        length = (keys || obj).length;
    for (var index = 0; index < length; index++) {
      //数组获取索引，对象获取属性
      var currentKey = keys ? keys[index] : index;
      //如果有不满足条件的就返回false
      if (!predicate(obj[currentKey], currentKey, obj)) return false;
    }
    return true;
  };

_.every就是判断是否所有的数据都满足条件

_.some

_.some = _.any = function(obj, predicate, context) {
    predicate = cb(predicate, context);
    var keys = !isArrayLike(obj) && _.keys(obj),
        length = (keys || obj).length;
    for (var index = 0; index < length; index++) {
      var currentKey = keys ? keys[index] : index;
      if (predicate(obj[currentKey], currentKey, obj)) return true;
    }
    return false;
  };

跟every的判断结构差不多，只不过最后的判断条件不同，some是判断时候有满足条件的，有的话就返回true

_.values

_.values = function(obj) {
    var keys = _.keys(obj);
    var length = keys.length;
    var values = Array(length);
    for (var i = 0; i < length; i++) {
      values[i] = obj[keys[i]];
    }
    return values;
  };

_.values就是讲obj的所有值拷贝到数组当中

_.sortedIndex

_.sortedIndex = function(array, obj, iteratee, context) {
    iteratee = cb(iteratee, context, 1);
    var value = iteratee(obj);
    var low = 0, high = getLength(array);
    while (low < high) {
      var mid = Math.floor((low + high) / 2);
      if (iteratee(array[mid]) < value) low = mid + 1; else high = mid;
    }
    return low;
  };

_.sortedIndex看过源码就可以看出是二分法查找

createIndexFinder

  var createIndexFinder = function(dir, predicateFind, sortedIndex) {
    return function(array, item, idx) {
      var i = 0, length = getLength(array);
      if (typeof idx == 'number') {
        //判断方向，1是从前到后，-1则为从后到前
        if (dir > 0) {
          i = idx >= 0 ? idx : Math.max(idx + length, i);
        } else {
          length = idx >= 0 ? Math.min(idx + 1, length) : idx + length + 1;
        }
      //如果是排序好的就使用二分法
      } else if (sortedIndex && idx && length) {
        idx = sortedIndex(array, item);
        //判断找出的值是否一样，是就返回这个值，否则返回-1
        return array[idx] === item ? idx : -1;
      }
      if (item !== item) {
        //对item为NaN的处理
        idx = predicateFind(slice.call(array, i, length), _.isNaN);
        return idx >= 0 ? idx + i : -1;
      }
      for (idx = dir > 0 ? i : length - 1; idx >= 0 && idx < length; idx += dir) {
        //通过遍历的方法找出item对应的索引
        if (array[idx] === item) return idx;
      }
      //找不到则返回-1
      return -1;
    };
  };

_.indexOf/_.lastIndexOf

  _.indexOf = createIndexFinder(1, _.findIndex, _.sortedIndex);
  _.lastIndexOf = createIndexFinder(-1, _.findLastIndex);

_.contains/_.includes/_.include

//判断是否包含对应的值
_.contains = _.includes = _.include = function(obj, item, fromIndex, guard) {
    //如果是对象，则将obj的所有值拷贝到数组当中
    if (!isArrayLike(obj)) obj = _.values(obj);
    if (typeof fromIndex != 'number' || guard) fromIndex = 0;
    //查找是否存在这个值，如果存在，indexOf 返回相应的索引，则为true，如果不存在，indexOf 返回-1，则为false
    return _.indexOf(obj, item, fromIndex) >= 0;
  };

_.invoke

//对每一个元素都执行一次方法，最后把结果存入数组返回
_.invoke = restArgs(function(obj, method, args) {
    var isFunc = _.isFunction(method);
    return _.map(obj, function(value) {
      //如果是函数则每个元素都执行一遍方法，如果不是，则返回所有的值，最后结果以数组的形式返回
      var func = isFunc ? method : value[method];
      return func == null ? func : func.apply(value, args);
    });
  });

小结

今天分析的几个内部函数理解起来有点难度，理解要多看几遍分析不同的情况，也许结合调用的例子理解起来会容易一点，分析我都写在了代码间的注释里，这样读起源码会容易一点，今天就写到这里吧，有点累了，明天还要上班，剩下的方法在之后的文章里都会分析到。

感谢大家的观看，也希望能够和大家互相交流学习，有什么分析的不对的地方欢迎大家批评指出

参考资料

https://segmentfault.com/a/1190000000531871

http://www.w3cfuns.com/house/17398/note/class/id/bb6dc3cabae6651b94f69bbd562ff370