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

相关推荐
augenstern41612 分钟前
webpack重构优化
前端·webpack·重构
海拥✘15 分钟前
CodeBuddy终极测评:中国版Cursor的开发革命(含安装指南+HTML游戏实战)
前端·游戏·html
寧笙(Lycode)1 小时前
React系列——HOC高阶组件的封装与使用
前端·react.js·前端框架
asqq81 小时前
CSS 中的 ::before 和 ::after 伪元素
前端·css
拖孩1 小时前
【Nova UI】十五、打造组件库之滚动条组件(上):滚动条组件的起步与进阶
前端·javascript·css·vue.js·ui组件库
苹果电脑的鑫鑫1 小时前
element中表格文字剧中可以使用的属性
javascript·vue.js·elementui
Hejjon1 小时前
Vue2 elementUI 二次封装命令式表单弹框组件
前端·vue.js
一丝晨光2 小时前
数值溢出保护?数值溢出应该是多少?Swift如何让整数计算溢出不抛出异常?类型最大值和最小值?
java·javascript·c++·rust·go·c·swift
小堃学编程2 小时前
前端学习(3)—— CSS实现热搜榜
前端·学习
Wannaer2 小时前
从 Vue3 回望 Vue2:响应式的内核革命
前端·javascript·vue.js