当前位置:首页 > JavaScript

js 实现indexof函数

2026-03-15 20:11:12JavaScript

实现 indexOf 函数

JavaScript 的 indexOf 方法用于返回字符串或数组中指定元素的第一个匹配位置的索引,如果未找到则返回 -1。以下是自定义实现方法。

字符串的 indexOf 实现

自定义字符串的 indexOf 方法,可以遍历字符串并匹配目标子串。

function customIndexOf(str, searchValue, fromIndex = 0) {
  if (fromIndex >= str.length) {
    return -1;
  }
  if (fromIndex < 0) {
    fromIndex = 0;
  }
  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;
}

数组的 indexOf 实现

自定义数组的 indexOf 方法,可以遍历数组并匹配目标元素。

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

使用示例

字符串示例:

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

数组示例:

js 实现indexof函数

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

注意事项

  • 字符串实现需处理子串匹配逻辑,确保每个字符逐一比较。
  • 数组实现直接比较元素是否严格相等(===)。
  • 可选参数 fromIndex 支持从指定位置开始搜索,负数表示从末尾偏移。

以上实现模拟了原生 indexOf 的核心功能,适用于学习和理解其底层逻辑。

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

相关文章

js实现防洪

js实现防洪

防抖(Debounce)实现 防抖的核心思想是在事件触发后延迟执行回调函数,若在延迟时间内再次触发事件,则重新计时。适用于输入框搜索、窗口调整等场景。 function debounce(f…

js手势实现

js手势实现

手势识别实现方法 在JavaScript中实现手势识别通常涉及监听触摸事件(touchstart、touchmove、touchend)或鼠标事件(mousedown、mousemove、mouseu…

js实现 功能

js实现 功能

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

js实现路由

js实现路由

js实现路由的方法 在JavaScript中实现路由功能可以通过多种方式完成,以下是几种常见的方法: 使用原生JavaScript实现路由 通过监听window.onhashchange事件来实现基…

js实现的游戏

js实现的游戏

JavaScript 游戏开发基础 JavaScript 是开发网页游戏的流行选择,因其无需插件即可在浏览器中运行。以下是一些关键技术和资源: HTML5 Canvas Canvas 提供了绘制图形…

js实现 拖动

js实现 拖动

实现拖动的步骤 HTML 结构 创建一个可拖动的元素和一个放置区域: <div id="draggable" draggable="true">拖动我</div> <d…