JavaScript实用库:Lodash源码数组函数解析(八)initial、join、last、nth、baseNth、(isIndex)

本章的内容主要是:initial、join、last、nth、baseNth、(isIndex)


在这里插入图片描述

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

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


1、_.initial(array)

根据中文文档介绍,该方法的功能是去除掉数组中的最后一个元素。

是不是有种似曾相识的感觉,对,这个功能就像是简化版的dropRightdropRight的相关介绍请看:JavaScript实用库:Lodash源码数组函数解析(四)dropRight、dropWhile、dropRightWhile、baseWhile

我们来看官方给出的例子:
在这里插入图片描述例子就不说了,挺容易懂的
我们接下来看源码:

function initial(array) {
  //获取到数组的长度
  var length = array == null ? 0 : array.length;
  //数组不为0则输出切片的数组
  //切片的位置是从索引0到倒数第一个索引也就是-1
  return length ? baseSlice(array, 0, -1) : [];
}

module.exports = initial;

源码也和我们的dropRight相似,区别就是切片的位置已经定死了,就是去除最后一个元素

需要注意的一点是,它似乎不会改变原数组,只会返回一个新的数组


2、_.join(array, [separator=’,’])

这个方法用官方的解释是:将 array 中的所有元素转换为由 separator 分隔的字符串。
下面来看官方给出的例子:
在这里插入图片描述

例子中第二个参数是“~”,于是输出的数据是三个元素用该符号分隔的字符串

接下来我们看源码:

/** Used for built-in method references. */
var arrayProto = Array.prototype;

/* Built-in method references for those with the same name as other `lodash` methods. */
//避免名称冲突
var nativeJoin = arrayProto.join;

function join(array, separator) {
  return array == null ? '' : nativeJoin.call(array, separator);
}

module.exports = join;

可以看到,该方法就是基于JavaScript的内置方法实现的,知道内置方法join的就看得懂源码了,这里就不多说了


3、_.last(array)

根据中文文档介绍,该方法就是可以取出数组中的最后一个元素
这个有和刚刚的initial相似,只不过initial是取出除最后一个元素外的所有元素,是相反的

我们来看官方给出的例子:
在这里插入图片描述

ok,就是取出最后一个元素

接下来直接看源码:

function last(array) {
  //获取数组长度
  var length = array == null ? 0 : array.length;
  //输出最后一个元素
  return length ? array[length - 1] : undefined;
}

module.exports = last;

我的猜测错了,预先以为要使用切片函数baseSlice,但是看到源码后恍然大悟,我只需要一个元素,可以直接输出呀


4、_.nth(array, [n=0])

根据文档介绍,就是获取数组第n个元素,不过从n的初始值看来,应该是输入取出元素的索引
下面来看例子:
在这里插入图片描述

果然要n的值为索引
接下来看源码:

function nth(array, n) {
  //数组不为空则输出第一个表达式
  //数组为空则输出undefined
  return (array && array.length) ? baseNth(array, toInteger(n)) : undefined;
}

module.exports = nth;

这个方法是基于核心函数baseNth实现的
我们接下来看它的源码


5**_.baseNth**

老样子,核心函数没有文档介绍,我们看源码:

function baseNth(array, n) {
  //获取数组长度
  var length = array.length;
  //数组为空跳出函数
  if (!length) {
    return;
  }
  //n如果小于0进行索引的正值转化
  n += n < 0 ? length : 0;
  //isIndex函数的功能是检测是不是一个有效的索引,是则输出true,反之false
  //按照常理应该都是真值,所以输出array[n]
  return isIndex(n, length) ? array[n] : undefined;
}

module.exports = baseNth;

有人就会说,这么麻烦?怎么不直接输出array[n]?
但是看到了,在这个过程中处理了很多事,排除掉数组为空,排除掉n没有传入值,n的值小于0,这些都是要考虑进来的,这就是一个库的严谨性


今天就到这里了,今天源码还好,明天继续

  • 4
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
`_.nth` 函数Lodash 中的一个工具函数,用于获取数组 `array` 中第 `num` 个元素。它的源码实现如下: ```javascript function nth(array, n) { var length = array == null ? 0 : array.length if (!length) { return } n += n < 0 ? length : 0 return isIndex(n, length) ? array[n] : undefined } ``` 该函数首先判断传入的数组是否为空,如果为空则直接返回 `undefined`。然后对传入的 `num` 进行一些处理,如果 `num` 是负数,则将其转化为正数。最后,通过 `isIndex` 函数判断 `num` 是否为有效的下标,如果是,则返回对应元素,否则返回 `undefined`。 其中,`isIndex` 函数的实现如下: ```javascript function isIndex(value, length) { var type = typeof value length = length == null ? MAX_SAFE_INTEGER : length return !!length && (type === 'number' || (type !== 'symbol' && reIsUint.test(value))) && (value > -1 && value % 1 == 0 && value < length) } ``` 该函数用于判断一个值是否为有效的数组下标。它首先判断传入的 `length` 是否为有效的数字,然后判断 `value` 是否为有效的数字或字符串,并且在范围内。如果满足以上条件,则返回 `true`,否则返回 `false`。 需要注意的是,`reIsUint` 是一个正则表达式,用于判断一个字符串是否表示一个非负整数: ```javascript var reIsUint = /^(?:0|[1-9]\d*)$/ ``` 综上所述,`_.nth` 函数是一个简单实用的工具函数,用于获取数组中指定位置的元素,并且具有较好的健壮性和可读性。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

弓长于水

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值