源码学习——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。

相关推荐
2501_9159184121 分钟前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂1 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技1 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip1 小时前
JavaScript二叉树相关概念
前端
一朵梨花压海棠go2 小时前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript
attitude.x2 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java2 小时前
CSS3核心技术
前端·css·css3
空山新雨(大队长)2 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5
猫头虎-前端技术3 小时前
浏览器兼容性问题全解:CSS 前缀、Grid/Flex 布局兼容方案与跨浏览器调试技巧
前端·css·node.js·bootstrap·ecmascript·css3·媒体