当前位置:首页 > JavaScript

js indexof 实现

2026-02-01 01:39:42JavaScript

实现 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;
}

数组版本的 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;
}

优化版本(支持严格相等)

function strictIndexOf(array, value, fromIndex) {
  let index = fromIndex - 1;
  const length = array.length;

  while (++index < length) {
    if (array[index] === value) {
      return index;
    }
  }
  return -1;
}

使用示例

const str = "Hello World";
console.log(customIndexOf(str, "World"));  // 输出: 6

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

这些实现方式模拟了原生 indexOf 方法的核心功能,包括:

  • 从指定位置开始搜索
  • 返回首次匹配的索引
  • 未找到时返回 -1
  • 支持负数索引(数组版本)

注意这些实现没有完全复制原生方法的所有边界情况处理,但提供了基本功能的实现思路。

js indexof 实现

标签: jsindexof
分享给朋友:

相关文章

js实现轮播图

js实现轮播图

轮播图实现方法 基础HTML结构 <div class="slider"> <div class="slides"> <img src="image1.jpg…

js实现日历

js实现日历

实现日历的基本思路 使用JavaScript实现日历的核心是动态生成日期表格,并处理月份切换逻辑。需要计算当前月的天数、起始星期几,并动态渲染到页面上。 获取当前日期信息 通过Date对象获取当前年…

js 实现vue

js 实现vue

Vue.js 的基本实现 在 JavaScript 中实现 Vue.js 的核心功能,可以通过数据绑定、响应式系统和虚拟 DOM 来实现。以下是实现 Vue.js 核心功能的简化版本。 数据响应式…

js实现图表

js实现图表

在JavaScript中实现图表通常使用流行的图表库,以下是几种常见的方法和工具: 使用Chart.js Chart.js是一个简单灵活的库,适合快速生成响应式图表。安装方式包括CDN引入或npm…

jquery js

jquery js

jQuery 简介 jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。它兼容多种浏览器,提供易于使用的 API,使开发者能够更高…

js实现百叶窗

js实现百叶窗

使用CSS和JavaScript实现百叶窗效果 通过CSS动画和JavaScript事件监听可以实现百叶窗效果。核心思路是将内容区域分割为多个条状元素,通过控制它们的展开/折叠状态来模拟百叶窗。…