源码学习——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四个方法的源码,本节四个方法还是很简单的。

相关推荐
码上成长几秒前
Mapbox 上用 Turf 裁多边形:屏幕贴边了,接口却说越界
前端·前端框架
计算机魔术师6 分钟前
纽约时报告了OpenAI和微软:820万条聊天记录背后,是AI时代最大的版权保卫战
前端
码事漫谈12 分钟前
在 Kubernetes 上管好数据库:金仓 KES-Operator 正式落地
前端·后端
用户18806874935219 分钟前
手上全是油,我怎么让rokid眼镜在厨房里教我炒菜
前端
gnip21 分钟前
uni-app 原生插件
前端·javascript·uni-app
gnip29 分钟前
跨域常用解决方案
前端·javascript
用户2986985301436 分钟前
前端如何把 TXT 文本文件转成 Word 文档:React 实践
前端·javascript·react.js
FEF前端团队36 分钟前
03# Claude Code实战:终端里的逻辑引擎
前端·ai编程·claude
FEF前端团队40 分钟前
04# Codex CLI实战:OpenAI的编程代理
前端·chatgpt·ai编程
掘金挖土42 分钟前
前端手摸手跑路之 AI 应用开发(七)
前端·后端