news 2026/1/14 11:32:32

JS中indexOf()方法的使用

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
JS中indexOf()方法的使用

JavaScript 中indexOf()方法详解

indexOf()是 JavaScript 中数组(Array)字符串(String)原型对象上都内置的一个重要方法,用于查找指定元素或子字符串在原对象中首次出现的位置(索引)。如果找不到,则返回-1

1. 基本语法

字符串版

string.indexOf(searchValue[,fromIndex])

数组版

array.indexOf(searchElement[,fromIndex])
  • searchValue / searchElement:要查找的值(字符串或数组元素)。必填
  • fromIndex(可选):从哪个索引开始查找。默认是0
    • 如果fromIndex >= 长度,直接返回-1(不搜索)。
    • 如果fromIndex < 0,则从max(长度 + fromIndex, 0)开始(支持负数索引,类似 Python)。

返回:首次匹配的索引(从 0 开始),找不到返回-1

2. 字符串中使用 indexOf()
conststr="Hello World, welcome to the World!";// 基本用法str.indexOf("World");// 返回 6(第一次出现的位置)str.indexOf("world");// 返回 -1(区分大小写!)str.indexOf("o");// 返回 4(第一个 'o' 的位置)// 指定起始位置str.indexOf("o",5);// 返回 8(从索引5开始找下一个 'o')str.indexOf("World",10);// 返回 29(第二次出现)// 负数 fromIndex(从右往左计算)str.indexOf("o",-5);// 等价于从 length-5 开始找,返回 31// 不存在str.indexOf("JavaScript");// 返回 -1

注意事项

  • 区分大小写'A' !== 'a'
  • 类型转换:会自动将参数转为字符串(但不推荐依赖)
  • 常用于判断字符串是否包含某子串:
    if(str.indexOf("World")!==-1){console.log("包含 World");}// 现代推荐用 includes()if(str.includes("World")){...}
3. 数组中使用 indexOf()
constfruits=["apple","banana","orange","apple","grape"];// 基本查找fruits.indexOf("banana");// 返回 1fruits.indexOf("apple");// 返回 0(只返回第一次出现的位置)fruits.indexOf("pear");// 返回 -1// 指定起始位置fruits.indexOf("apple",1);// 返回 3(从索引1开始找下一个 apple)// 查找对象(注意:严格相等 ===)constobjs=[{id:1},{id:2}];constobj={id:1};objs.indexOf(obj);// 返回 -1(对象是引用类型,地址不同)// 正确方式查找对象constusers=[{name:"Tom"},{name:"Jerry"}];consttarget=users[0];users.indexOf(target);// 返回 0(同一个引用)

关键点

  • 使用严格相等(===)比较元素。
  • 基本类型(字符串、数字、布尔)可以正常查找。
  • 对象、数组等引用类型必须是同一个引用才能找到。
  • NaN 无法通过 indexOf 找到(因为 NaN !== NaN):
    [NaN].indexOf(NaN);// 返回 -1
4. 常见应用场景
场景示例代码
判断是否存在if (arr.indexOf(item) > -1) { ... }(旧写法,现在推荐includes()
查找并删除元素```js
字符串替换(简单版)js let pos = str.indexOf("old"); if (pos !== -1) str = str.slice(0,pos) + "new" + str.slice(pos+"old".length);
校验输入格式(如邮箱@符号)if (email.indexOf("@") === -1) { error }
实现简单去重(配合 filter)js const unique = arr.filter((item, index) => arr.indexOf(item) === index);
5. 与现代方法的对比(推荐使用新API)
方法返回值是否推荐说明
indexOf()索引或 -1一般老方法,兼容性最好
includes()true / false强烈推荐语义更清晰:arr.includes(item)
findIndex()索引或 -1推荐支持回调函数,可查找复杂条件(如对象属性)
find()找到的元素或 undefined推荐返回元素本身
lastIndexOf()从右往左查找的索引偶尔用查找最后一次出现的位置

示例对比

// 旧写法if(arr.indexOf("banana")!==-1){...}// 新写法(推荐)if(arr.includes("banana")){...}// 查找对象constidx=users.findIndex(user=>user.name==="Tom");
6. 小技巧总结
  • 负数 fromIndex 非常实用:str.indexOf("x", -10)从倒数第10个字符开始找。
  • 性能:在大数组中频繁调用 indexOf 可能较慢,可考虑 Map/Set 优化。
  • 兼容性:indexOf 从 ES5(2009年)开始支持,所有现代浏览器和 Node.js 都支持。

掌握indexOf()是 JS 基础中的基础,虽然现在有更优雅的替代方法,但理解它有助于阅读旧代码和深入理解数组/字符串操作。

如果你有具体场景(如“如何用 indexOf 实现字符串多关键词搜索”),欢迎继续问!

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2025/12/29 21:30:51

PyTorch JIT编译加速:将模型转换为TorchScript格式

PyTorch JIT 编译加速&#xff1a;从模型到部署的高效路径 在深度学习模型日益复杂的今天&#xff0c;一个常见但棘手的问题摆在工程团队面前&#xff1a;为什么在实验室里跑得飞快的 PyTorch 模型&#xff0c;一到生产环境就变得迟缓、依赖繁重、部署困难&#xff1f;这背后的…

作者头像 李华
网站建设 2025/12/29 21:30:40

如何将自定义数据集导入PyTorch-CUDA-v2.8镜像进行训练?

如何将自定义数据集导入 PyTorch-CUDA-v2.8 镜像进行训练 在深度学习项目中&#xff0c;最让人头疼的往往不是模型设计本身&#xff0c;而是环境搭建——CUDA 版本不匹配、cuDNN 缺失、PyTorch 与显卡驱动冲突……这些问题足以让一个原本高效的开发流程停滞数小时。更别提团队协…

作者头像 李华
网站建设 2025/12/31 18:49:21

Git Remote远程仓库管理:关联多个PyTorch代码库

Git Remote远程仓库管理&#xff1a;关联多个PyTorch代码库 在深度学习项目开发中&#xff0c;一个常见的场景是&#xff1a;你正在使用预配置的 PyTorch-CUDA 环境快速搭建实验平台&#xff0c;同时需要基于官方开源仓库&#xff08;如 pytorch/pytorch&#xff09;进行二次开…

作者头像 李华
网站建设 2026/1/4 1:35:35

YOLOv11 Head解耦头设计:分离分类与回归分支

YOLOv11 解耦头设计&#xff1a;为何分离分类与回归能显著提升检测精度&#xff1f; 在当前智能视觉系统对实时性与准确率双重要求的背景下&#xff0c;目标检测模型正面临前所未有的挑战。以自动驾驶中的行人识别为例&#xff0c;不仅要在毫秒级响应内完成推理&#xff0c;还必…

作者头像 李华
网站建设 2025/12/29 21:25:57

【物理】模拟粒子在电场和磁场中的轨迹研究附Matlab代码

✅作者简介&#xff1a;热爱科研的Matlab仿真开发者&#xff0c;擅长数据处理、建模仿真、程序设计、完整代码获取、论文复现及科研仿真。&#x1f34e; 往期回顾关注个人主页&#xff1a;Matlab科研工作室&#x1f34a;个人信条&#xff1a;格物致知,完整Matlab代码及仿真咨询…

作者头像 李华
网站建设 2026/1/12 12:47:07

深度学习入门必看:PyTorch-CUDA-v2.8镜像使用指南与实战案例

深度学习环境的终极解法&#xff1a;PyTorch-CUDA-v2.8镜像实战指南 在深度学习项目中&#xff0c;你是否经历过这样的场景&#xff1f;好不容易写完模型代码&#xff0c;满怀期待地运行 python train.py&#xff0c;结果第一行就报错&#xff1a; ImportError: libcudart.so.1…

作者头像 李华