源码学习——lodash(四)

前言

本节我们继续学习lodash的源码,在介绍每个方法源码之前我们可以思考一下如何自己实现。

fill

fill用来填充数组,该方法能够修改原数组,接收四个参数:

  • array:原数组。
  • value:填充值。
  • start:开始下标,默认为0。
  • end:结束下标,默认为数组长度。
js 复制代码
_.fill(array, value, start, end=array.length)

_.fill([2,3], 1);//[1,1]

正如开头所写,我们先自己实现一下:

对比刚开始的,这次加了很多判断,注意fill是填充,不是插入,对于原元素会直接替换,接下来我们来看下fill的源码:

开始也是进行了各种判断,除了类型判断,还采用了isIterateeCall方法进行了判断,该方法用来检查参数是否为iteratee(迭代)调用 ,这点自己完全没考虑到。接着就是核心方法baseFill,我们看下baseFill的源码:

start、end参数都用了toIntefer处理,跟我上面想的一致,然后就是下标的判断:

  • start:处理负数的情况,最后与end进行比较。
  • end:判断是否大于length,再处理负数情况。
    源码中各种判断归根结底就是保证下标在数组里面。最后while循环将start与end之间的元素进行填充。

findIndex与findLastIndex

findIndex返回查找元素的第一个下标,findLatIndex返回最后一个也就是从右到左查找,当查找不到时返回-1。跟数组方法中indexOf效果类似,两者接受三个参数:

  • array:查找数组。
  • predicate:查找方法,不仅仅是函数,还可以是字符串、对象等某个元素。
  • index:查找下标,findIndex默认从0开始,而findLastIndex默认为末位下标。
js 复制代码
_.findIndex(array, predicate, fromIndex=0)

_.findIndex([2,3], 2);//0
_.findLastIndex([2,3,2], 2);//2

这两个看起来很容易,大概思路就是循环比较,返回下标,我们直接看源码,源码中findIndex.ts文件没找到,只有findeLastIndex.ts,我们就直接看findLastIndex代码:

代码中着重判断了fromIndex:

  1. 使用toInteger确保index为整数。
  2. 利用三目运算兼顾了小于0的情况以及大于数组长度的情况,确保index在数组下标中。 然后就是核心方法baseFindIndex,注意第四个参数为true,结合之前我们解读的代码,我们可以得出该参数就是区分检查方向的,findIndex方法对应的该参数就是false。

直接利用while循环,然后执行查找方法,为true返回当前下标,逻辑很清晰。麻烦的点就在于两个方法的兼容,也就是根据fromRight进行判断。

first与head

first与head返回数组中的第一个元素,其中first方法是head的别名,我们直接看head的源码就行:

利用三目运算为空时返回undefined,非空时返回第一个元素。

总结

以上就是lodash四个方法的源码,本节四个方法还是很简单的。

相关推荐
jserTang10 分钟前
手撕 Claude Code-4: TodoWrite 与任务系统
前端·javascript·后端
腹黑天蝎座11 分钟前
大屏开发必读:Scale/VW/Rem/流式/断点/混合方案全解析(附完整demo)
前端·javascript
jserTang12 分钟前
手撕 Claude Code-5:Subagent 与 Agent Teams
前端·javascript·后端
于慨41 分钟前
mac安装flutter
javascript·flutter·macos
踩着两条虫1 小时前
VTJ.PRO的平台介绍与特性
前端·架构·ai编程
光影少年1 小时前
前端工程化升级
前端·javascript·react.js·前端框架
Hello--_--World1 小时前
节流 VS 防抖 相关知识点与面试题
前端·javascript
We་ct1 小时前
AI辅助开发术语体系深度剖析
开发语言·前端·人工智能·ai·ai编程
去伪存真2 小时前
Superpowers 从“调教提示词”转向“构建工程规范”
前端·agent
发现一只大呆瓜2 小时前
深度起底 Vite:从打包流程到插件钩子执行时序的全链路解析
前端·vite