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

相关推荐
fishmemory7sec4 分钟前
Electron 主进程与渲染进程、预加载preload.js
前端·javascript·electron
fishmemory7sec7 分钟前
Electron 使⽤ electron-builder 打包应用
前端·javascript·electron
豆豆1 小时前
为什么用PageAdmin CMS建设网站?
服务器·开发语言·前端·php·软件构建
JUNAI_Strive_ving1 小时前
番茄小说逆向爬取
javascript·python
看到请催我学习1 小时前
如何实现两个标签页之间的通信
javascript·css·typescript·node.js·html5
twins35202 小时前
解决Vue应用中遇到路由刷新后出现 404 错误
前端·javascript·vue.js
qiyi.sky2 小时前
JavaWeb——Vue组件库Element(3/6):常见组件:Dialog对话框、Form表单(介绍、使用、实际效果)
前端·javascript·vue.js
煸橙干儿~~2 小时前
分析JS Crash(进程崩溃)
java·前端·javascript
哪 吒2 小时前
华为OD机试 - 几何平均值最大子数(Python/JS/C/C++ 2024 E卷 200分)
javascript·python·华为od
安冬的码畜日常2 小时前
【D3.js in Action 3 精译_027】3.4 让 D3 数据适应屏幕(下)—— D3 分段比例尺的用法
前端·javascript·信息可视化·数据可视化·d3.js·d3比例尺·分段比例尺