源码学习——lodash(十)

前言

上节介绍了三种方法,有些方法lodash会直接用原生的,本节我们来学习一下take系列方法的源码。

take与takeRight

take从数组中的起始位置开始提取n个元素,返回提取元素组成的数组,该方法不会修改原数组。

js 复制代码
_.take(array,n)
//n为提取的个数,默认为1
console.log(_.take([1,2])) //[1]

该方法也很简单,我们先自己实现一下:

思路很简单判断下array与n,然后获取提取个数count,最后用while循环赋值。接下来我们来看下lodash的处理:

  • array进行非空判断。
  • 通过slice方法进行提取,这里对n小于0的情况了判断。
    slice方法上节我们也提到了,当时熟悉了一下源码,本节我们不再赘述。slice截取数组数据的方法用的很广,相关源码我们还是要熟悉的。
    takeRight从数组的最后位置开始提取n个元素,该方法就是从右开始上面我们自己写的方法,把下标换一下就可以了。
js 复制代码
_.takeRight(array,n)
console.log(_.takeRight([1,2])) //[2]

slice方法中没有right相关参数,不过start可以为负数能达到从右开始的效果。下面我们来看下lodash的实现方法:

  • 非空判断,将n赋值为数组长度减n
  • 利用slice方法提取,start为n,end为length。
    该方法比预测的更加简便,这样提取出来的数据顺序跟原数组是一样的。
js 复制代码
console.log(_.takeRight([1,2,3],2)) //[2,3]

如果较真一点,上面案例结果应该是[3,2],我们可以在此结果的基础上加上个reverse。

takeWhile与takeRightWhile

takeWhile跟take效果一样,不过第二个参数从n变为了函数,当元素值不满足迭代函数时停止提取。

js 复制代码
_.takeRWhile(array,predicate)
// predicate 迭代的函数 value index array三个参数
console.log(_.takeWhile([1,2,3],(item)=>item<3)) //[1,2]

该方法肯定不会再用slice方法了,具体的源码如下:

  • 利用三目运算对array进行非空判断,为true时执行baseWhile 获取结果。
    takeRightWhile从未位开始提取,返回提取的数组。该方法参数跟takeWhile一样:
js 复制代码
console.log(_.takeRightWhile([1,2,3],(item)=>item>1)) //[2,3]

源码就是baseWhile多了两个参数,false与true。接下来我们就来研究下baseWhile的代码。

首先我们先来看下baseWhile的四个参数:

array:数组,必传参数。

predicate:迭代函数。

isDrop:是否丢弃,与提取相反。如果为true会将符合条件的元素去掉。

fromRight:布尔值,为true时从右边开始提取。

上述参数中需要注意isDrop参数,要想达到take效果该参数必须为false,这就是takeRightWhile第三个为false的原因。下面我们进入代码分析:

  • 获取数组length,声明下标index,fromRight为true从右开始index的值为length;为false就为-1。
  • 利用while循环数组,得到数组中predicate为true的元素。该条件利用&&,兼容了从右开始的情况而且简化了写法,比if简便的多。
  • 最终通过slice得到结果,此步重点是start与end的取值,这里源码显得复杂点,我们从方法角度进行分解就清晰了:
js 复制代码
slice(array,0,index) // takeWhile
slice(array,index+1,length) // takeRightWhile

slice(array,0,index+1) // !takeRihgtWhile
slice(array,index,length) // !takeWhile

把上面四个用方法合到一起就得到了源码。只要我们知道方法效果化繁为简,源码还是很好理解的。

总结

以上就是take系列方法的源码,都是基于slice方法实现的,这节我们又学到一个基础方法basewhile。

相关推荐
清灵xmf1 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨1 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL1 小时前
npm入门教程1:npm简介
前端·npm·node.js
小白白一枚1112 小时前
css实现div被图片撑开
前端·css
薛一半2 小时前
PC端查看历史消息,鼠标向上滚动加载数据时页面停留在上次查看的位置
前端·javascript·vue.js
@蒙面大虾2 小时前
CSS综合练习——懒羊羊网页设计
前端·css
过期的H2O23 小时前
【H2O2|全栈】JS进阶知识(四)Ajax
开发语言·javascript·ajax
MarcoPage3 小时前
第十九课 Vue组件中的方法
前端·javascript·vue.js
.net开发3 小时前
WPF怎么通过RestSharp向后端发请求
前端·c#·.net·wpf
**之火3 小时前
Web Components 是什么
前端·web components