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 值使用专门的查找方法,确保正确性
相关推荐
Anlici1 小时前
跨域解决方案还有优劣!?
前端·面试
苹果电脑的鑫鑫1 小时前
在使用element-ui时表单的表头在切换页面时第一次进入页面容易是白色字体解决方法
javascript·vue.js·ui
庸俗今天不摸鱼1 小时前
【万字总结】构建现代Web应用的全方位性能优化体系学习指南(二)
前端·性能优化·webp
忧郁的蛋~1 小时前
JavaScript性能优化的12种方式
开发语言·javascript·性能优化
海盗强1 小时前
prototype和proto的区别
开发语言·javascript·原型模式
潜龙在渊灬1 小时前
杂谈:前端 UI 框架和 UI 组件库的区别
javascript·vue.js·react.js
追寻光1 小时前
Java 绘制图形验证码
java·前端
前端snow1 小时前
爬取数据利用node也行,你知道吗?
前端·javascript·后端
村头一颗草1 小时前
高德爬取瓦片和vue2使用
前端·javascript·vue.js
远山无期1 小时前
vue3+vite项目接入qiankun微前端关键点
前端·vue.js