当前位置:首页 > JavaScript

js 实现indexof函数

2026-04-07 13:35:27JavaScript

实现 JavaScript 的 indexOf 函数

JavaScript 的 indexOf 方法用于返回字符串或数组中指定元素的第一个匹配位置的索引。以下是手动实现该功能的几种方法。

字符串的 indexOf 实现

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

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

使用示例:

const str = "Hello, world!";
console.log(customIndexOf(str, "world")); // 输出: 7
console.log(customIndexOf(str, "x"));    // 输出: -1

数组的 indexOf 实现

function customArrayIndexOf(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;
}

使用示例:

const arr = [1, 2, 3, 4, 5];
console.log(customArrayIndexOf(arr, 3)); // 输出: 2
console.log(customArrayIndexOf(arr, 6)); // 输出: -1

优化版本(支持 Unicode 和边界检查)

对于字符串实现,可以进一步优化以支持 Unicode 字符和更严格的边界检查:

function robustIndexOf(str, searchValue, fromIndex = 0) {
  if (typeof str !== 'string' || typeof searchValue !== 'string') {
    throw new TypeError('Input must be strings');
  }

  if (fromIndex < 0) fromIndex = 0;
  if (fromIndex >= str.length || searchValue.length === 0) return -1;

  const maxIndex = str.length - searchValue.length;
  for (let i = fromIndex; i <= maxIndex; i++) {
    if (str.slice(i, i + searchValue.length) === searchValue) {
      return i;
    }
  }
  return -1;
}

说明:

js 实现indexof函数

  • 字符串实现通过逐字符比较来匹配子串。
  • 数组实现直接遍历数组元素。
  • 优化版本使用 slice 方法简化子串匹配,并增加类型检查。

标签: 函数js
分享给朋友:

相关文章

js实现vue

js实现vue

Vue.js 的基本实现方法 在 JavaScript 中实现 Vue.js 的功能,可以通过直接引入 Vue 库或使用现代构建工具(如 Vite 或 Webpack)。以下是几种常见的实现方式:…

js实现轮播

js实现轮播

实现轮播图的基本思路 轮播图的核心逻辑是通过定时切换展示的图片或内容,通常结合左右滑动按钮和指示器(小圆点)增强交互性。以下是基于原生JavaScript的实现方法。 HTML结构 构建轮播图的HT…

js 进度条的实现

js 进度条的实现

使用 HTML 和 CSS 创建基础进度条 HTML 结构可以简单使用一个 div 元素作为容器,内部嵌套另一个 div 表示进度: <div class="progress-containe…

js树实现

js树实现

树的基本概念 树是一种非线性的数据结构,由节点和边组成。每个节点包含一个值和指向子节点的引用。树的顶部节点称为根节点,没有子节点的节点称为叶节点。 树的实现方式 在JavaScript中,树可以通过…

js实现vue路由

js实现vue路由

Vue 路由的基本实现 在 Vue.js 中实现路由功能通常使用 Vue Router 库。Vue Router 是 Vue.js 官方的路由管理器,用于构建单页面应用(SPA)。 安装 Vue R…

js实现文字滚动

js实现文字滚动

实现文字滚动的几种方法 使用CSS动画实现滚动 通过CSS的@keyframes和transform属性可以实现平滑的文字滚动效果。 <style> .scroll-text { w…