JavaScript实用库:Lodash源码数组函数解析(三) drop、toInteger、toFinite

编程入门 行业动态 更新时间:2024-10-25 20:22:02

JavaScript实用库:Lodash源码<a href=https://www.elefans.com/category/jswz/34/1771288.html style=数组函数解析(三) drop、toInteger、toFinite"/>

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`](.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 直接返回0if (!value) {return value === 0 ? value : 0;}//调用tonumber转换成number类型value = toNumber(value);if (value === INFINITY || value === -INFINITY) {//正无穷或者负无穷 ,设置一个 标记signvar sign = (value < 0 ? -1 : 1);// 返回对应的最大值或者最小值return sign * MAX_INTEGER;}// 过滤掉NaNreturn value === value ? value : 0;
}module.exports = toFinite;

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

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


今天有点事,现在才更新

明天继续

更多推荐

JavaScript实用库:Lodash源码数组函数解析(三) drop、toInteger、toFinite

本文发布于:2023-07-27 22:20:50,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1231622.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:数组   函数   源码   Lodash   JavaScript

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!