欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JavaScript实用库:Lodash源码数组函数解析(九)remove、reverse、slice

程序员文章站 2024-01-02 23:16:10
...

本章的内容主要是:remove、reverse、slice


JavaScript实用库:Lodash源码数组函数解析(九)remove、reverse、slice

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

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


1、.remove(array, [predicate=.identity])

这个我就直接引用中文文档的介绍吧

移除数组中predicate(断言)返回为真值的所有元素,并返回移除元素组成的数组。predicate(断言) 会传入3个参数: (value, index, array)。
Note: 和 .filter不同, 这个方法会改变数组 array。使用.pull来根据提供的value值从数组中移除元素。

下面来看中文文档给的例子:
JavaScript实用库:Lodash源码数组函数解析(九)remove、reverse、slice
原数组中依然保留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的内置对象实现的

下面我们来看看官方给出的例子和源码:
JavaScript实用库:Lodash源码数组函数解析(九)remove、reverse、slice

/** 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;

有不少见过的函数了,包括toIntegerbaseSliceisIterateeCall这些在前面的文章都已经讲过了,大家可以去看看


昨天回来有点晚,也有点累,所以没有更新,放松了一下
还是得每天坚持吧

相关标签: 前端

上一篇:

下一篇: