当前位置:首页 > JavaScript

js indexof的实现

2026-02-02 17:05:06JavaScript

JavaScript indexOf 的实现原理

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

字符串的 indexOf 实现

字符串的 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;
}

关键点:

  • 处理负的 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;
}

关键点:

js indexof的实现

  • 支持负的 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
分享给朋友:

相关文章

css3结合js制作

css3结合js制作

CSS3 结合 JavaScript 制作动态效果 CSS3 和 JavaScript 结合可以实现丰富的动态效果,包括动画、交互和响应式设计。以下是几种常见的实现方式: CSS3 动画与 Java…

js实现vue

js实现vue

Vue.js 简介 Vue.js 是一个渐进式 JavaScript 框架,用于构建用户界面。其核心库专注于视图层,易于与其他库或现有项目整合。 实现 Vue.js 的基本步骤 安装 Vue.j…

js实现图片轮播

js实现图片轮播

实现基础图片轮播 使用HTML、CSS和JavaScript创建一个简单的图片轮播。HTML部分定义轮播容器和图片,CSS设置样式和动画效果,JavaScript处理轮播逻辑。 <div cl…

js实现pdf在线预览

js实现pdf在线预览

使用PDF.js实现PDF在线预览 PDF.js是由Mozilla开发的一个开源JavaScript库,可以在网页中直接渲染PDF文件。以下是实现PDF在线预览的步骤: 引入PDF.js库 在HT…

js实现投球

js实现投球

实现投球动画的基本思路 使用JavaScript和CSS动画结合的方式模拟投球效果。核心是通过改变元素的位置、旋转和缩放属性,配合定时器或CSS过渡实现平滑动画。 创建基础HTML结构 <di…

js实现菜单

js实现菜单

实现基本HTML结构 使用HTML创建菜单的基本框架,通常包含<ul>和<li>元素。示例结构如下: <ul id="menu"> <li><…