JavaScript实用库:Lodash源码数组函数解析(九)remove、reverse、slice
本章的内容主要是:remove、reverse、slice
Lodash是一个非常好用方便的JavaScript的工具库,使得我们对数据处理能够更加得心应手
接下来我要对Lodash的源码进行剖析学习
每天几个小方法,跟着我一起来学lodash吧
1、.remove(array, [predicate=.identity])
这个我就直接引用中文文档的介绍吧
移除数组中predicate(断言)返回为真值的所有元素,并返回移除元素组成的数组。predicate(断言) 会传入3个参数: (value, index, array)。
Note: 和 .filter不同, 这个方法会改变数组 array。使用.pull来根据提供的value值从数组中移除元素。
下面来看中文文档给的例子:
原数组中依然保留1,3
新数组中元素含有2,4
这个相信都没有什么问题
下面来看源码;
function remove(array, predicate) {
var result = [];
//数组为空则输出空数组
if (!(array && array.length)) {
return result;
}
var index = -1,
indexes = [],
length = array.length;
//设置三个参数
predicate = baseIteratee(predicate, 3);
while (++index < length) {
//取出数组中的元素
var value = array[index];
//在循环中如果符合函数条件,则在result数组中增加该值,并在indexes中记录索引
if (predicate(value, index, array)) {
result.push(value);
indexes.push(index);
}
}
//该基本函数我没有说过,但是如果想符合原数组只除去符合的值
//那么我们可以猜测,该函数的功能应该是去除array数组中的indexes索引值的元素
basePullAt(array, indexes);
return result;
}
module.exports = remove;
这个应该问题不大,那么接下来看下一个函数
2、_.reverse(array)
根据中文文档的介绍呢,该方法的功能是将数组元素进行翻转,在我们的JavaScript的内置对象里面也有怎么一个函数
Note: 这个方法会改变原数组 array,基于 Array#reverse,看来还真的是基于JavaScript的内置对象实现的
下面我们来看看官方给出的例子和源码:
/** 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 nativeReverse = arrayProto.reverse;
function reverse(array) {
//若数组为空,则输出空数组,否则调用内置对象reverse进行处理
return array == null ? array : nativeReverse.call(array);
}
module.exports = reverse;
因为我现在只看lodash源码,所以这个内置对象怎么实现的就算了
3、_.slice(array, [start=0], [end=array.length])
这个又是一个JavaScript的内置对象相似的,看了中文文档的介绍,是用来代替array#slice的
裁剪数组array,从 start 位置开始到end结束,但不包括 end 本身的位置
想到裁剪就一定想起了drop这一系列相关的功能类似的函数
JavaScript实用库:Lodash源码数组函数解析(三) drop、toInteger、toFinite
JavaScript实用库:Lodash源码数组函数解析(四)dropRight、dropWhile、dropRightWhile、baseWhile
这个官方有介绍,但是没有例子啊
所以直接来看源码吧
function slice(array, start, end) {
//获取数组长度
var length = array == null ? 0 : array.length;
if (!length) {
return [];
}
//确定开始索引与结束索引的值
//如果没有值则默认开始索引值为0,结束索引值为数组长度
if (end && typeof end != 'number' && isIterateeCall(array, start, end)) {
start = 0;
end = length;
}
else {
start = start == null ? 0 : toInteger(start);
end = end === undefined ? length : toInteger(end);
}
//最后使用切片函数进行切片
return baseSlice(array, start, end);
}
module.exports = slice;
有不少见过的函数了,包括toInteger,baseSlice,isIterateeCall这些在前面的文章都已经讲过了,大家可以去看看
昨天回来有点晚,也有点累,所以没有更新,放松了一下
还是得每天坚持吧
推荐阅读
-
JavaScript实用库:Lodash源码数组函数解析(五)fill、baseFill、findIndex、baseFindIndex、baseIteratee、findLastIndex
-
JavaScript实用库:Lodash源码数组函数解析(四)dropRight、dropWhile、dropRightWhile、baseWhile
-
JavaScript实用库:Lodash源码数组函数解析(六)first、flatten、flattenDeep、flattenDepth、baseFlatten、isFlattenable
-
JavaScript实用库:Lodash源码数组函数解析(八)initial、join、last、nth、baseNth、(isIndex)
-
JavaScript实用库:Lodash源码数组函数解析(十一)without以及很多我没详戏记细过的
-
JavaScript实用库:Lodash源码数组函数解析(二)
-
JavaScript实用库:Lodash源码数组函数解析(九)remove、reverse、slice
-
JavaScript实用库:Lodash源码数组函数解析(七)fromPairs、toPairs、indexOf、baseIndexOf、strictIndexOf