Lodash源码阅读-strictIndexOf

Lodash 源码阅读-strictIndexOf

一、介绍

strictIndexOf 是 Lodash 内部使用的一个工具函数,用于在数组中查找某个值的索引位置。与 JavaScript 原生的 indexOf 方法类似,但实现更加简单直接,只进行严格相等(===)比较。

二、源码实现

js 复制代码
function strictIndexOf(array, value, fromIndex) {
  var index = fromIndex - 1,
    length = array.length;

  while (++index < length) {
    if (array[index] === value) {
      return index;
    }
  }
  return -1;
}

三、实现原理

1. 整体思路

这个函数的实现非常直观,采用了最基础的循环遍历方式:

  • 从指定的起始位置开始向后遍历数组
  • 使用严格相等(===)比较每个元素
  • 找到匹配项就返回索引,否则返回 -1

2. 参数说明

  • array:要搜索的数组
  • value:要查找的值
  • fromIndex:开始搜索的位置(索引)

3. 逐行解析

js 复制代码
var index = fromIndex - 1,
  length = array.length;
  • 将起始索引减 1,因为后面会使用前置递增运算符(++)
  • 缓存数组长度,避免重复获取
js 复制代码
while (++index < length) {
  • 使用 while 循环遍历数组
  • 使用前置递增运算符,确保从 fromIndex 位置开始比较
js 复制代码
if (array[index] === value) {
  return index;
}
  • 使用严格相等运算符比较当前元素和目标值
  • 如果找到匹配项,立即返回当前索引
js 复制代码
return -1;
  • 循环结束后仍未找到匹配项,返回 -1

四、使用示例

js 复制代码
const arr = [1, 2, 3, 4, 5];

// 基本使用
console.log(strictIndexOf(arr, 3, 0)); // 输出:2
console.log(strictIndexOf(arr, 6, 0)); // 输出:-1

// 从指定位置开始搜索
console.log(strictIndexOf(arr, 3, 3)); // 输出:-1
console.log(strictIndexOf(arr, 4, 3)); // 输出:3

// 严格相等比较
console.log(strictIndexOf([1, "2", 3], "2", 0)); // 输出:1
console.log(strictIndexOf([1, 2, 3], "2", 0)); // 输出:-1

五、与原生 indexOf 的区别

兼容性考虑 :Lodash 作为一个跨浏览器兼容性库,自己实现 strictIndexOf 而不是使用原生 indexOf 主要是出于以下兼容性原因:早期 JavaScript 环境(如 IE8 及以下)不支持 Array.prototype.indexOf

六、实际应用场景

  1. 数组去重:可以用于检查元素是否已存在
  2. 数组查找:在需要严格相等比较的场景中查找元素位置
  3. 数组分割:结合其他操作,可用于数组的分割和处理

七、总结

strictIndexOf 是一个简单但高效的数组查找工具函数,通过严格相等比较来查找数组元素。它的实现简单直接,没有太多额外的边界条件处理,这使得它在特定场景下性能表现优异。

相关推荐
IT、木易20 分钟前
大白话阐述react和vue高阶组件的概念、优势及应用场景,以及区别,给出简单高阶组件的实现代码
前端·vue.js·react.js
HaanLen21 分钟前
React19源码系列之FiberRoot节点和Fiber节点
前端·javascript·react.js
冴羽32 分钟前
SvelteKit 最新中文文档教程(3)—— 数据加载
前端·javascript·svelte
百万蹄蹄向前冲1 小时前
组建百万前端梦之队-计算机大学生竞赛发展蓝图
前端·vue.js·掘金社区
云隙阳光i1 小时前
实现手机手势签字功能
前端·javascript·vue.js
imkaifan1 小时前
vue2升级Vue3--native、对inheritAttrs作用做以解释、声明的prop属性和未声明prop的属性
前端·vue.js·native修饰符·inheritattrs作用·声明的prop属性·未声明prop的属性
觉醒法师1 小时前
HarmonyOS NEXT - 电商App实例三( 网络请求axios)
前端·华为·typescript·axios·harmonyos·ark-ts
Danta2 小时前
HTTP协议版本演进:从HTTP/0.9到HTTP/3的高分面试回答
前端·网络协议·面试
柠檬树^-^2 小时前
app.config.globalProperties
前端·javascript·vue.js
太阳花ˉ2 小时前
react(一):特点-基本使用-JSX语法
前端·react.js