探讨underscore源码（二）

2019年8月31日 146次阅读来源: 望舒

一、`_.each`

一开始我并没有认为_.each这个要领会有多大的用途，不就是一个遍历嘛~

但当我应用本身测试这个函数的时刻，发明了一件“大事”

underscore的初始化时怎样做的？你是不是是跟我一样都认为underscore的初始化就是在_这个对象上面加上一堆属性？

Naive!

underscore的真是做法是经由过程一系列的函数编程完成初始化的“自动化”

看下面的代码：

// Add some isType methods: isArguments, isFunction, isString, isNumber, isDate, isRegExp, isError, isMap, isWeakMap, isSet, isWeakSet.
  _.each(['Arguments', 'Function', 'String', 'Number', 'Date', 'RegExp', 'Error', 'Symbol', 'Map', 'WeakMap', 'Set', 'WeakSet'], function(name) {
    _['is' + name] = function(obj) {
      return toString.call(obj) === '[object ' + name + ']';
    };
  });

underscore经由过程如上的代码完成数据类型的推断

相似的，作者经由过程挪用_.each要领来完成

本身拓展的函数跟库供应函数的兼并（详见_.mixin）
Array要领的自动初始化（line1588+line1599）

二、`_.map`

_.map源码的英华的处所在于将Array以及Object合在一起处置惩罚。

源码以下：

_.map = _.collect = function(obj, iteratee, context) {
    debugger
    iteratee = cb(iteratee, context);
    var keys = !isArrayLike(obj) && _.keys(obj),
        length = (keys || obj).length,
        results = Array(length);
    for (var index = 0; index < length; index++) {
      // 经由过程key来推断究竟
      var currentKey = keys ? keys[index] : index;
      results[index] = iteratee(obj[currentKey], currentKey, obj);
    }
    return results;
};

经由过程var keys = !isArrayLike(obj) && _.keys(obj)来辨别对象以及数组。假如为对象，则keys为true，否则为false。传入回调函数的参数分别为：

对象键值对中的值或许数组中的序号值
对象键值对中的键或许数组中的响应序号

举个例子，{one:1, two:2, three:3}:
传入回调的参数依次为:

1, one
2, two
3, three

假如是数组[1, 2, 3]，则传入参数依次为:

1, 0
2, 1
3, 2

三、`_.reduce` `_.foldl` `_.inject` `_.reduceRight` `_.foldr`

这几个要领都是应用一个中心函数createReduce。

createReduce应用了高阶函数的体式格局举行封装，经由过程传入的参数来肯定是正序遍历照样倒叙遍历。下面来看源码：

  // 建立一个遍历函数，从左到右或许从右向左
  // param: dir  >0(从左向右遍历)，dir < 0(从右向左遍历)
  var createReduce = function(dir) {
    // 包装代码，在一个零丁的函数中分派参数变量，而不是接见`arguments.length'，以防止发作issue #1991
    var reducer = function(obj, iteratee, memo, initial) {
      var keys = !isArrayLike(obj) && _.keys(obj),
          length = (keys || obj).length,
          index = dir > 0 ? 0 : length - 1;
      if (!initial) {
        // 未初始化memo参数的状况下，设置memo值为传入参数的第一个值（有多是倒序的第一个值也有多是正序的第一个值）
        memo = obj[keys ? keys[index] : index];
        index += dir;
      }
      // 应用 for 轮回 迭代用户传入的参数
      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;
      return reducer(obj, optimizeCb(iteratee, context, 4), memo, initial);
    };
  };

看来这个重要函数，来看看这个函数的挪用体式格局：

  _.reduce = _.foldl = _.inject = createReduce(1);

  _.reduceRight = _.foldr = createReduce(-1);

重如果在初始化时，先运转createReduce构成一个闭包，从而能够在运转时能够很好的辨别是从左向右遍历照样从右向左遍历。

四、`_.findIndex`|`_.findKey`|`_.find`|`_.findLastIndex`

_.find基于_.findIndex以及_.findKey，所以我们先来看后二者。

先来看_.findIndex。检察findIndex源码会发明，它与findLastIndex道理一向，都是挪用一个名为createPredicateIndexFinder

// 应用此函数来天生findIndex以及findLastIndex
  var createPredicateIndexFinder = function(dir) {
    // 推断 dir 参数的正负来确认是findIndex照样findLastIndex
    return function(array, predicate, context) {
      predicate = cb(predicate, context);
      var length = getLength(array);
      var index = dir > 0 ? 0 : length - 1;
      // 遍向来寻觅相符要求的index
      for (; index >= 0 && index < length; index += dir) {
        // 传入参数给回调函数
        if (predicate(array[index], index, array)) return index;
      }
      // 假如未找到相符要求的index则返回 -1
      return -1;
    };
  };

看懂上面的函数，则findIndex以及findLatIndex就浅易了：

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

看懂findIndex以后，来相识_.findKey，这个函数又牵涉到了另一个函数_.keys了（别那样的脸色，函数式编程就是如许。。。）

  _.keys = function(obj) {
    // 容错处置惩罚，推断是不是为对象
    if (!_.isObject(obj)) return [];
    // 假如能挪用 ES5 的要领，则挪用 Object.keys 要领
    if (nativeKeys) return nativeKeys(obj);
    var keys = [];
    // 遍历key值
    for (var key in obj) if (_.has(obj, key)) keys.push(key);
    // Ahem, IE < 9.（IE9以下的处置惩罚没太看懂。。。）
    if (hasEnumBug) collectNonEnumProps(obj, keys);
    return keys;
  };

上面源码的处置惩罚有几个点值得我们注重以下：

  _.isObject = function(obj) {
    var type = typeof obj;
    // function 属于 object，typeof null = 'object'，须要经由过程!!obj消除null这类状况
    return type === 'function' || type === 'object' && !!obj;
  };

  _.has = function(obj, key) {
    // 经由过程原生的hasOwnProperty举行属性的推断
    return obj != null && hasOwnProperty.call(obj, key);
  };

  // IE < 9 ，有些key值不会被遍历，致使key的遍历缺失bug
  // hasEnumBug 用来辨识是不是在IE < 9 的环境下
  var hasEnumBug = !{toString: null}.propertyIsEnumerable('toString');
  var nonEnumerableProps = ['valueOf', 'isPrototypeOf', 'toString',
                      'propertyIsEnumerable', 'hasOwnProperty', 'toLocaleString'];

  var collectNonEnumProps = function(obj, keys) {
    var nonEnumIdx = nonEnumerableProps.length;
    var constructor = obj.constructor;
    var proto = _.isFunction(constructor) && constructor.prototype || ObjProto;

    // Constructor is a special case.
    var prop = 'constructor';
    if (_.has(obj, prop) && !_.contains(keys, prop)) keys.push(prop);

    while (nonEnumIdx--) {
      prop = nonEnumerableProps[nonEnumIdx];
      if (prop in obj && obj[prop] !== proto[prop] && !_.contains(keys, prop)) {
        keys.push(prop);
      }
    }
  };

五、`_.filter`

上源码：

  // 返回一切经由过程测试的元素
  // 别名为`select`
  _.filter = _.select = function(obj, predicate, context) {
    var results = [];
    // 转变predicate的函数指向
    predicate = cb(predicate, context);
    // 遍历每一个值，假如经由过程测试则放入要返回的数组中
    _.each(obj, function(value, index, list) {
      if (predicate(value, index, list)) results.push(value);
    });
    return results;
  };

重要采用了内部函数_.each，这个函数没有什么好说的~

六、`_.reject` | `_.negate`

_.reject这个函数内部运用了_.negate，所以，我们先从_.negate看起.

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

这个函数的意义就是运转传入进来的cb函数以后，对其运转的效果取反。

下面来看_.reject

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

不难明白，_.reject就是经由过程_.filter来完成的。

七、`_.every` | `_.some`

假如你有兴致检察代码的话，你会发明这两个函数除了推断部份，别的处所基础如出一辙。也不难明白，两个函数只是逻辑轻微差别罢了。

  // 推断是不是一切元素都相符前提
  // 别名为 `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;
      if (!predicate(obj[currentKey], currentKey, obj)) return false;
    }
    return true;
  };

  // 推断最少又一个元素相符前提
  // 别名为 `any`.
  _.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;
  };

八、`_.indexOf` | `_.lastIndexOf`

这两个函数与findIndex以及findLastIndex在写法上面有殊途同归的处所。

_.indexOf以及_.lastIndexOf都援用的一个大众函数，参数中都传入标识符，用来示意是从头至尾寻觅照样从尾到头寻觅。

我们先来看这个大众函数createIndexFinder：

  /**
   * dir           Number    1示意正序查找，-1示意倒叙查找
   * predicateFind Function  _.findIndex 或许 _.findLastIndex
   * sortedIndex   Function  _.sortedIndex
   */
  var createIndexFinder = function(dir, predicateFind, sortedIndex) {
    return function(array, item, idx) {
      var i = 0, length = getLength(array);
      if (typeof idx == 'number') {
        // 正序查找，重置i
        if (dir > 0) {
          i = idx >= 0 ? idx : Math.max(idx + length, i);
        } else {
        // 倒叙查找，重置length
          length = idx >= 0 ? Math.min(idx + 1, length) : idx + length + 1;
        }
      } else if (sortedIndex && idx && length) {
      // 二分法查找
        idx = sortedIndex(array, item);
        return array[idx] === item ? idx : -1;
      }
      // item为NaN的状况处置惩罚
      if (item !== item) {
        idx = predicateFind(slice.call(array, i, length), _.isNaN);
        return idx >= 0 ? idx + i : -1;
      }
      // NaN处置惩罚以后，能够宁神的运用for轮回迭代了
      for (idx = dir > 0 ? i : length - 1; idx >= 0 && idx < length; idx += dir) {
        if (array[idx] === item) return idx;
      }
      // 假如上面的都不存在，则返回 -1
      return -1;
    };
  };

基础上看懂上面的谁人函数，_.findIndex和_.findLastIndex就能够明白啦

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

九、`_.sortedIndex`

这个要领咋眼一看对我而言照样有点难明白的。所以我先看它的api形貌。

运用二分查找肯定value在list中的位置序号，value按此序号插进去能坚持list原有的排序。假如供应iterator函数，iterator将作为list排序的根据，包含你通报的value 。iterator也能够是字符串的属性名用来排序(比方length)

看源码以下：

_.sortedIndex = function(array, obj, iteratee, context) {
    // 假如是一个数组元素为数字，则直接以数组元素大小为查找前提
    // 假如是数组元素为对象，则以 iteratee 为查找前提
    // 经由过程 cb 来查找出 数组元素中的 iterate 属性值 （应用 _.property ） 
    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;
  };

整体而言，明白二分法以及其对数组元素为对象这类状况的处置惩罚体式格局即能够很好的明白这个要领了。

十、`_.range`

/**
 * start: 返回数组的起始值
 * stop: 返回数组的停止值
 * step: 返回数组中心的距离
 */
_.range = function(start, stop, step) {
    // 假如不存在stop，则默认设置stop为0，start也为0
    if (stop == null) {
      stop = start || 0;
      start = 0;
    }
    // 假如不存在 step 值，则默认设置为 1 或许 -1
    if (!step) {
      step = stop < start ? -1 : 1;
    }
    
    var length = Math.max(Math.ceil((stop - start) / step), 0);
    var range = Array(length);
    
    // 遍历天生数组
    for (var idx = 0; idx < length; idx++, start += step) {
      range[idx] = start;
    }

    return range;
};

    原文作者：望舒
    原文地址: https://segmentfault.com/a/1190000007514386
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。

一、_.each

二、_.map

三、_.reduce _.foldl _.inject _.reduceRight _.foldr

四、_.findIndex|_.findKey|_.find|_.findLastIndex

五、_.filter

六、_.reject | _.negate

七、_.every | _.some

八、_.indexOf | _.lastIndexOf

九、_.sortedIndex

十、_.range