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 === NaN 是 false,所以需要特殊处理,通过调用 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 值使用专门的查找方法,确保正确性
相关推荐
IMPYLH3 小时前
HTML 的 <video> 元素
前端·html
溪语流沙3 小时前
【每天一个CSS | Day19】流光文字与一笔写成的手写签名
前端·javascript·css
逐光者9334 小时前
STM32——SPI 屏 · Flash · 高速
java·前端·stm32
To_OC4 小时前
同样是让 AI 写全栈,为什么别人一句话就够了
前端·前端框架·next.js
CDwenhuohuo4 小时前
electron pc项目打包成桌面端
前端·javascript·electron
前端大斗师4 小时前
「大于 1000」把 1000 元那单也算进去了:我在 Vue3 订单页对了 10 句话
前端·人工智能·typescript·大模型·原力计划
Jmyd01235 小时前
用 Web VR 引擎搭建 3D 虚拟展厅:从素材上云到多端实时渲染的完整数据链路
前端·3d·vr·三维数字化
刘天远5 小时前
Agent成本核算实现:事件表、状态分布与Python归集
前端·数据库·人工智能·python
欣欣之王来了5 小时前
开发环境准备:Node.js、npm、VS Code安装配置
前端·学习·架构·项目·vue3教程
xiaolinudao1236 小时前
将多个 Excel 表格中的数据合并到单个表中|6 种实现方案全解析
java·前端·excel