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

相关推荐
小希爸爸7 分钟前
3、中医基础入门和养生
前端·javascript·后端
摆烂工程师24 分钟前
ChatGPT免费用户可以使用Deep Research啦!并且o3、o4-mini的可使用次数翻倍!
前端·后端·程序员
狂炫一碗大米饭25 分钟前
作为前端你不得不知道的浏览器相关知识1🚀
前端
天天扭码32 分钟前
🔥 别再用 class 了!JS 原型链才是 YYDS
前端·javascript·面试
GISer_Jinger37 分钟前
📢《告别手动抓狂!Trae国际版+BrowserTools MCP 实现前端错误调试自动化》🚀
前端
前端大白话38 分钟前
震惊!90%前端工程师都踩过的坑!computed属性vs methods到底该怎么选?一文揭秘高效开发密码
前端·vue.js·设计模式
一天睡25小时38 分钟前
React与Vue表单的对比差异
前端·javascript
作曲家种太阳38 分钟前
第七章 响应式的 watch 实现【手摸手带你实现一个vue3】
前端
在澳门喝茶的芦竹40 分钟前
React高阶组件——React.momo
javascript·react.js
前端小巷子41 分钟前
深入解析 iframe
前端