Lodash源码阅读-baseIndexOf

Lodash 源码阅读-baseIndexOf

功能概述

baseIndexOf 是 Lodash 中的一个基础工具函数,它的主要作用是在数组中查找一个值的位置。这个函数特别之处在于它能够处理普通值和 NaN 值两种情况,是 Lodash 中 indexOf 方法的核心实现。

前置学习

在深入理解 baseIndexOf 函数之前,建议先了解以下相关概念:

  • strictIndexOf

  • baseFindIndex

二、源码实现

js 复制代码
function baseIndexOf(array, value, fromIndex) {
  return value === value
    ? strictIndexOf(array, value, fromIndex)
    : baseFindIndex(array, baseIsNaN, fromIndex);
}

相关依赖函数:

js 复制代码
// 判断是否为 NaN
function baseIsNaN(value) {
  return value !== value;
}

三、实现原理

1. 整体思路

说人话就是:这个函数主要解决了两个问题:

  1. 普通值的查找:就是简单地用 === 严格相等来比较,通过调用 strictIndexOf 实现
  2. NaN 值的查找:因为 NaN === NaNfalse,所以需要特殊处理,通过调用 baseFindIndex 实现

具体实现思路:

  1. 先判断要查找的值是不是 NaN(用 value === value 判断)
  2. 如果不是 NaN,就用 strictIndexOf 函数进行查找
  3. 如果是 NaN,就用 baseFindIndex 配合 baseIsNaN 进行查找

2. 参数说明

  • array:要搜索的数组
  • value:要查找的值
  • fromIndex:从哪个位置开始找

3. 逐行解析

js 复制代码
return value === value;
  • 这行代码是在判断要查找的值是不是 NaN
  • 因为只有 NaN 跟自己比较会返回 false
  • 所以 value === value 为 true 时表示是普通值,为 false 时表示是 NaN
js 复制代码
? strictIndexOf(array, value, fromIndex)
  • 如果是普通值,就用 strictIndexOf 函数查找
js 复制代码
: baseFindIndex(array, baseIsNaN, fromIndex)
  • 如果是 NaN 值,就用 baseFindIndex 配合 baseIsNaN 来查找

四、使用示例

js 复制代码
// 1. 查找普通数值
const arr1 = [1, 2, 3, 4, 5];
baseIndexOf(arr1, 3, 0); // => 2

// 2. 从指定位置开始查找
const arr2 = [1, 2, 3, 2, 1];
baseIndexOf(arr2, 2, 3); // => 3 (从索引3开始找2)

// 3. 查找 NaN 值
const arr3 = [1, NaN, 2, NaN, 3];
baseIndexOf(arr3, NaN, 0); // => 1 (找到第一个 NaN)
baseIndexOf(arr3, NaN, 2); // => 3 (从索引2开始找 NaN)

// 4. 找不到的情况
baseIndexOf(arr1, 10, 0); // => -1 (数组中没有10)
baseIndexOf(arr1, 2, 5); // => -1 (从索引5开始找,但数组长度只有5)

// 5. 查找字符串
const arr4 = ["a", "b", "c", "b", "a"];
baseIndexOf(arr4, "b", 0); // => 1

五、总结

  1. 巧妙的 NaN 检测

    js 复制代码
    value === value;

    用一个简单的相等比较就能判断值是否为 NaN,代码简洁优雅

  2. 函数职责分离

    js 复制代码
    ? strictIndexOf(array, value, fromIndex)
    : baseFindIndex(array, baseIsNaN, fromIndex)

    根据不同情况使用不同的查找函数,每个函数职责单一

  3. 性能优化

    • 普通值使用 strictIndexOf,避免了不必要的函数调用
    • NaN 值使用专门的查找方法,确保正确性
相关推荐
塞尔维亚大汉几秒前
鸿蒙内核源码分析(用户态锁篇) | 如何使用快锁Futex(上)
harmonyos·源码阅读
用户9272472502191 分钟前
新闻自动采集并通过API发布到博客
前端·后端
清风92004 分钟前
Logback——日志技术(基础)
java·前端·logback
EndingCoder5 分钟前
排序算法与前端交互优化
开发语言·前端·javascript·算法·排序算法·交互
晓13136 分钟前
JavaScript加强篇——第五章 DOM节点(加强)与BOM
java·开发语言·javascript
三月的一天30 分钟前
在 React Three Fiber 中实现 3D 模型点击扩散波效果
前端·react.js·前端框架
爱敲代码的小冰30 分钟前
npm 切换 node 版本 和npm的源
前端·npm·node.js
DoraBigHead35 分钟前
🧠【彻底读懂 reduce】acc 是谁?我是谁?我们要干嘛?
前端·javascript·面试
future14121 小时前
项目开发日记
前端·学习·c#·游戏开发
汪子熙1 小时前
CSS 中 td:last-child a 选择器详解
前端·javascript