Lodash系列——drop函数源码解析

drop用法

先了解drop函数的用法,从用法找出解决方案。

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]

从用法中,看出实现了一个需求:将 array 中的前 n 个元素去掉,然后返回剩余的部分。

drop源码实现

围绕着上面的一个需求,思考用什么方法去实现。

我的思路

尝试用一种和lodash不同的思路来实现,将数组转换成字符串,然后根据输入的n来截取字符串,接着转换回数组,通过map将每个元素转成数字类型。

function drop(array, n) {
  //深入贯彻函数式编程
  return array.join('').substring(n,).split('').map(v => Number(v))
}
drop([1,2,3], 1) // [2,3]

这样写会有很大的问题,就是假设数组只为数字元素的情况,如果元素包含各种类型,那就需要for循环判断所有元素的类型,保存到局部变量中。所以,这样做不是个好办法。

虽然这个办法很不完善,但我仍旧写的目的是学会从不同的角度去思考一个问题的解法,不要局限于唯一的答案。

lodash的思路

1、源码

function drop(array, n=1) {
  //array为null,设置为length0,存在获取实际length长度
  const length = array == null ? 0 : array.length
  //如果length存在,则使用slice方法截取数组,否则返回[]
  return length
    ? slice(array, n < 0 ? 0 : n, length)
    : []
}
export default drop

2、源码中的slice方法是lodash开发者自己写的实现,并不是原生Array中的slice,关于slice的实现,后续在介绍。

3、我们还可以将slice替换成原生写法

function drop(array, n=1) {
  const length = array == null ? 0 : array.length
  return length
    ? array.slice(n < 0 ? 0 : n, length)
    : []
}

总结

lodash内部模拟实现了很多原生方法,这样虽然让人觉得开发者很牛逼,但是会造成很多额外的运行代码,所以,我的建议是当你用到了lodash的某个方法时,先尝试修改一下它的源码,避免引用那些多余的代码,替换成原生已有的方法来实现。

相关文章
相关标签/搜索