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

相关推荐
小J听不清15 小时前
CSS 外边距(margin)全解析:取值规则 + 实战用法
前端·javascript·css·html·css3
还是大剑师兰特16 小时前
Stats.js 插件详解及示例(完全攻略)
前端·大剑师·stats
前端小超超16 小时前
Vue计算属性computed:可写与只读的区别
前端·javascript·vue.js
IT_陈寒16 小时前
SpringBoot实战:3个隐藏技巧让你的应用性能飙升50%
前端·人工智能·后端
weixin1997010801616 小时前
唯品会商品详情页前端性能优化实战
前端·性能优化
爱学习的程序媛17 小时前
【Web前端】Pinia状态管理详解
前端·vue.js·typescript
爱学习的程序媛17 小时前
“数字孪生”详解与前端技术栈
前端·人工智能·计算机视觉·智慧城市·信息与通信
海石17 小时前
微信小程序开发02:原始人也能看懂的着色器与视频处理
前端·微信小程序·视频编码
程序员Sunday17 小时前
Claude Code 生态爆发:5个必知的新工具
前端·人工智能·后端
ChoSeitaku17 小时前
NO.2|proto3语法|消息类型|通讯录|文件读取|enum类型
java·服务器·前端