JavaScript实用库：Lodash源码数组函数解析（三） drop、toInteger、toFinite

本章内容主要是：drop、toInteger、toFinite

Lodash是一个非常好用方便的JavaScript的工具库，使得我们对数据处理能够更加得心应手

接下来我要对Lodash的源码进行剖析学习
每天几个小方法，跟着我一起来学lodash吧

  

---

1、_.drop(array, [n=1])
根据中文文档介绍，该方法主要就是对数组进行切片，去除数组的前n个元素，n没有传入值时默认为1
例如：

看到例子里面第一个实例，传入一个[1, 2, 3]数组，没有n的值，直接默认去除第一个元素，接下来的我就不说啦，下面直接来上源码：

/**
 * Creates a slice of `array` with `n` elements dropped from the beginning.
 *
 * @static
 * @memberOf _
 * @since 0.5.0
 * @category Array
 * @param {Array} array The array to query.
 * @param {number} [n=1] The number of elements to drop.
 * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`.
 * @returns {Array} Returns the slice of `array`.
 * @example
 *
 * _.drop([1, 2, 3]);
 * // => [2, 3]
 *
 * _.drop([1, 2, 3], 2);
 * // => [3]
 *
 * _.drop([1, 2, 3], 5);
 * // => []
 *
 * _.drop([1, 2, 3], 0);
 * // => [1, 2, 3]
 */
function drop(array, n, guard) {
  //获取数组长度
  var length = array == null ? 0 : array.length;
  //长度为0时输出空数组
  if (!length) {
    return [];
  }
  //确认n的值，如果n是undefined那么值为1，否则获取n的传入值
  n = (guard || n === undefined) ? 1 : toInteger(n);
  
  return baseSlice(array, n < 0 ? 0 : n, length);
}

module.exports = drop;

可以看到第一步就是熟悉的获取长度操作，然后是确定n的值，其中 toInteger方法是取出n的整数部分，最后用上我们的核心函数 baseSlice对数组进行切片，如果n < 0,则n的值为0，n为切片的起始位置，那么数组的长度length自然就是我们的结束位置啦。

这里顺便说一下toInteger方法源码

---

2、_.toInteger(value)
中文文档的介绍就是：转换 value 为一个整数。

我们接下来看例子：
是不是很容易理解
接下来我们看源码：

/**
 * Converts `value` to an integer.
 *
 * **Note:** This method is loosely based on
 * [`ToInteger`](http://www.ecma-international.org/ecma-262/7.0/#sec-tointeger).
 *
 * @static
 * @memberOf _
 * @since 4.0.0
 * @category Lang
 * @param {*} value The value to convert.
 * @returns {number} Returns the converted integer.
 * @example
 *
 * _.toInteger(3.2);
 * // => 3
 *
 * _.toInteger(Number.MIN_VALUE);
 * // => 0
 *
 * _.toInteger(Infinity);
 * // => 1.7976931348623157e+308
 *
 * _.toInteger('3.2');
 * // => 3
 */
function toInteger(value) {
  //获取到一个有限的数字
  var result = toFinite(value),
      //去除小数部分
      remainder = result % 1;

  return result === result ? (remainder ? result - remainder : result) : 0;
}

module.exports = toInteger;

  于是我们又看到了一个新的方法：toFinite，这个方法是用来获取一个有限的数字的，等会来介绍它，现在只要知道它的功能就好啦。
  remainder就是判断result是否有小数位。
  最后就是输出部分，这是一个三元判断，判断条件为 result的值是否等于result，这个话虽然听起来别扭，做这个处理是为了过滤掉NaN，最后我们基本输出：(remainder ? result - remainder : result)。
  我们仔细研究一下这个表达式，如果remainder的值为0，那么输出的值就是result了，因为表示没有小数部分，可以直接输出。那么我们来看一下remainder的值不为0的时候，用result减去小数部分自然就是一个整数啦。

---

3、_.toFinite(value)
根据中文文档介绍，该方法就是转换 value 为一个有限数字

接下来看例子：

可以看到，该方法可以无穷的数变为一个有限的

接下来看源码：

/** Used as references for various `Number` constants. */
var INFINITY = 1 / 0,
    MAX_INTEGER = 1.7976931348623157e+308;

/**
 * Converts `value` to a finite number.
 *
 * @static
 * @memberOf _
 * @since 4.12.0
 * @category Lang
 * @param {*} value The value to convert.
 * @returns {number} Returns the converted number.
 * @example
 *
 * _.toFinite(3.2);
 * // => 3.2
 *
 * _.toFinite(Number.MIN_VALUE);
 * // => 5e-324
 *
 * _.toFinite(Infinity);
 * // => 1.7976931348623157e+308
 *
 * _.toFinite('3.2');
 * // => 3.2
 */
function toFinite(value) {
   // 不传value 直接返回0
  if (!value) {
    return value === 0 ? value : 0;
  }
  //调用tonumber转换成number类型
  value = toNumber(value);
  if (value === INFINITY || value === -INFINITY) {
    //正无穷或者负无穷 ，设置一个 标记sign
    var sign = (value < 0 ? -1 : 1);
    // 返回对应的最大值或者最小值
    return sign * MAX_INTEGER;
  }
  // 过滤掉NaN
  return value === value ? value : 0;
}

module.exports = toFinite;

最开始定义了INFINITY 和 MAX_INTEGER
MAX_INTEGER这个值可以通过Number.MAX_VALUE获取到，大于MAX_INTEGER代表Infinity

value的值经过化为number类型的处理后进行了判断，是否等于正无穷或者负无穷，输出对应的最大值或最小值。当然，这都是特殊情况。最后的过滤NaN则是一般的情况，经过number类型化处理后自然得到了我们的要求了。

---

今天有点事，现在才更新

明天继续