当前位置:首页 > JavaScript

js实现indexof功能

2026-02-03 08:30:50JavaScript

实现 JavaScript 的 indexOf 功能

JavaScript 的 indexOf 方法用于返回字符串或数组中指定元素的首次出现位置。以下是手动实现该功能的几种方式:

字符串的 indexOf 实现

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

  for (let i = fromIndex; i < str.length; i++) {
    if (str[i] === searchValue[0]) {
      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;
}

数组的 indexOf 实现

function arrayIndexOf(arr, searchElement, fromIndex = 0) {
  if (fromIndex >= arr.length) return -1;
  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;
}

使用递归实现

function recursiveIndexOf(str, searchValue, fromIndex = 0) {
  if (fromIndex >= str.length) return -1;
  if (str.slice(fromIndex, fromIndex + searchValue.length) === searchValue) {
    return fromIndex;
  }
  return recursiveIndexOf(str, searchValue, fromIndex + 1);
}

性能优化版本

对于大型字符串,可以使用更高效的算法如 KMP 算法:

js实现indexof功能

function kmpIndexOf(str, pattern) {
  const lps = computeLPSArray(pattern);
  let i = 0, j = 0;

  while (i < str.length) {
    if (str[i] === pattern[j]) {
      i++;
      j++;
      if (j === pattern.length) return i - j;
    } else {
      if (j !== 0) j = lps[j - 1];
      else i++;
    }
  }
  return -1;
}

function computeLPSArray(pattern) {
  const lps = new Array(pattern.length).fill(0);
  let len = 0, i = 1;

  while (i < pattern.length) {
    if (pattern[i] === pattern[len]) {
      len++;
      lps[i] = len;
      i++;
    } else {
      if (len !== 0) len = lps[len - 1];
      else {
        lps[i] = 0;
        i++;
      }
    }
  }
  return lps;
}

这些实现涵盖了基本功能到高级优化方案,可以根据具体需求选择合适的版本。原生 indexOf 经过高度优化,手动实现主要用于理解原理或特殊场景定制。

标签: 功能js
分享给朋友:

相关文章

前端实现拖拽功能vue

前端实现拖拽功能vue

使用 HTML5 拖放 API 在 Vue 中可以通过 HTML5 的原生拖放 API 实现拖拽功能。需要监听 dragstart、dragover 和 drop 事件。 <template&…

js实现动画

js实现动画

使用 CSS 动画与 JavaScript 控制 通过 JavaScript 动态添加或移除 CSS 类来触发动画。CSS 定义关键帧(@keyframes),JavaScript 通过 classL…

js实现选项卡

js实现选项卡

实现选项卡的基本思路 选项卡通常由一组标签和对应的内容面板组成。点击标签时,显示对应的内容面板,隐藏其他面板。实现这一效果需要结合HTML结构、CSS样式和JavaScript交互逻辑。 HTML结…

uniapp实现选项卡功能

uniapp实现选项卡功能

实现选项卡功能的基本方法 在uniapp中实现选项卡功能通常需要使用uni-segmented-control组件或自定义样式结合swiper组件。以下是两种常见实现方式: 使用uni-se…

js实现游标

js实现游标

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

js实现图

js实现图

JavaScript 实现图的常用方法 在 JavaScript 中,图(Graph)可以通过多种方式实现,常见的包括邻接表(Adjacency List)和邻接矩阵(Adjacency Matrix…