当前位置:首页 > JavaScript

js indexof的实现

2026-02-02 17:05:06JavaScript

JavaScript indexOf 的实现原理

JavaScript 的 indexOf 方法用于查找字符串或数组中指定元素的首次出现位置。以下是其核心实现逻辑和注意事项:

字符串的 indexOf 实现

字符串的 indexOf 方法用于查找子字符串的起始位置。以下是简化版的实现思路:

js indexof的实现

function stringIndexOf(str, searchValue, fromIndex = 0) {
  if (fromIndex < 0) fromIndex = 0;
  if (fromIndex >= str.length) return -1;

  for (let i = fromIndex; i < str.length; i++) {
    let match = true;
    for (let j = 0; j < searchValue.length; j++) {
      if (str[i + j] !== searchValue[j]) {
        match = false;
        break;
      }
    }
    if (match) return i;
  }
  return -1;
}

关键点:

js indexof的实现

  • 处理负的 fromIndex,将其视为 0
  • 双循环嵌套:外层遍历主字符串,内层匹配子字符串。
  • 时间复杂度为 O(n*m),其中 n 是主字符串长度,m 是子字符串长度。

数组的 indexOf 实现

数组的 indexOf 方法用于查找元素的首次出现位置。以下是简化实现:

function arrayIndexOf(arr, searchElement, fromIndex = 0) {
  if (fromIndex < 0) fromIndex = Math.max(0, arr.length + fromIndex);

  for (let i = fromIndex; i < arr.length; i++) {
    if (arr[i] === searchElement) return i;
  }
  return -1;
}

关键点:

  • 支持负的 fromIndex,从数组末尾开始计算。
  • 使用严格相等(===)比较元素。
  • 时间复杂度为 O(n),n 为数组长度。

边界情况处理

  1. 未找到时返回 -1:无论是字符串还是数组,未找到目标均返回 -1
  2. 空字符串/数组:若搜索值为空,字符串返回 fromIndex,数组返回 -1
  3. fromIndex 超出范围:字符串和数组均返回 -1

性能优化建议

  • 字符串搜索:现代浏览器通常使用 Boyer-Moore 或 KMP 算法优化字符串搜索。
  • 数组搜索:对大型数组,可考虑使用 SetMap 提前建立索引。

示例用法

// 字符串示例
const str = "Hello World";
console.log(stringIndexOf(str, "World")); // 输出 6

// 数组示例
const arr = [1, 2, 3, 4];
console.log(arrayIndexOf(arr, 3)); // 输出 2

标签: jsindexof
分享给朋友:

相关文章

js实现继承

js实现继承

原型链继承 通过将子类的原型指向父类的实例实现继承。子类实例可以访问父类原型上的属性和方法。 function Parent() { this.name = 'parent'; } Parent…

js类实现

js类实现

使用类实现 JavaScript 功能 在 JavaScript 中,类(Class)是一种语法糖,基于原型继承机制。通过 class 关键字可以更直观地定义对象模板。 基本类定义 class…

js实现游标

js实现游标

使用JavaScript实现游标 在JavaScript中,可以通过操作DOM元素的cursor样式属性来实现自定义游标效果。以下是几种常见的实现方法: 修改默认鼠标指针样式 通过CSS的curso…

js实现 功能

js实现 功能

在 JavaScript 中实现功能通常涉及多个关键步骤,具体取决于功能需求。以下是常见功能的实现方法和示例: 基本功能实现 使用函数封装逻辑是最直接的方式。例如,实现一个计算两数之和的函数: f…

js实现上传文件

js实现上传文件

文件上传的基本实现 使用HTML的<input type="file">元素配合JavaScript的File API可以实现文件上传功能。 <input type="file"…

js计算器的实现

js计算器的实现

实现基础结构 HTML部分需要创建计算器的基本框架,包含显示区域和按钮。使用<div>容器包裹整个计算器,内部设置一个显示屏和多个按钮。 <div class="calculato…