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