news 2026/5/1 8:54:49

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进行投诉反馈,一经查实,立即删除!
网站建设 2026/4/24 12:01:47

PyTorch-CUDA-v2.8镜像SSH连接教程:远程开发更高效

PyTorch-CUDA-v2.8镜像SSH连接教程&#xff1a;远程开发更高效 在深度学习项目中&#xff0c;最让人头疼的往往不是模型调参&#xff0c;而是“环境配置”——明明代码没问题&#xff0c;却因为CUDA版本不匹配、cuDNN缺失或Python依赖冲突导致torch.cuda.is_available()返回Fal…

作者头像 李华
网站建设 2026/5/1 7:24:21

PyTorch-CUDA-v2.8镜像助力自然语言处理任务快速迭代

PyTorch-CUDA-v2.8镜像助力自然语言处理任务快速迭代 在当今AI研发一线&#xff0c;一个常见的场景是&#xff1a;团队拿到新项目&#xff0c;信心满满地准备训练BERT或微调LLM&#xff0c;结果第一天就卡在了环境配置上——CUDA版本不匹配、cuDNN缺失、PyTorch编译报错……三…

作者头像 李华
网站建设 2026/5/1 7:22:08

Markdown生成目录:提升长篇技术文档可读性

PyTorch-CUDA-v2.8 镜像与 Markdown 文档实践&#xff1a;构建高效可读的技术体系 在深度学习项目日益复杂的今天&#xff0c;开发者面临两大核心挑战&#xff1a;一是如何快速搭建稳定、高性能的开发环境&#xff1b;二是如何让技术文档不被淹没在代码和配置的海洋中。一个训练…

作者头像 李华
网站建设 2026/4/29 1:51:33

Turfjs+ECharts:空间分析结果的图表化展示

在 WebGIS 开发中&#xff0c;空间分析与数据可视化是密不可分的 ——Turf.js 能高效完成面积计算、长度统计、空间分布等核心分析&#xff0c;但分析结果需要直观的图表展示才能发挥价值。ECharts 作为国内最主流的数据可视化库&#xff0c;支持柱状图、热力图、折线图等多种图…

作者头像 李华
网站建设 2026/4/29 20:50:02

Jupyter Notebook单元测试:验证PyTorch函数正确性

Jupyter Notebook单元测试&#xff1a;验证PyTorch函数正确性 在深度学习项目开发中&#xff0c;一个看似微小的函数错误——比如损失函数梯度计算偏差或张量维度处理不当——就可能让模型训练数天后才暴露出问题。等到那时&#xff0c;排查成本极高&#xff0c;甚至可能导致整…

作者头像 李华
网站建设 2026/5/1 5:25:07

CNN特征可视化方法:理解PyTorch模型决策过程

CNN特征可视化方法&#xff1a;理解PyTorch模型决策过程 在医疗影像诊断系统中&#xff0c;一个深度学习模型能够以98%的准确率识别肺部CT中的肿瘤病灶。但当医生追问“你是根据哪些区域做出判断的&#xff1f;”时&#xff0c;多数工程师只能沉默——这正是当前AI落地高风险场…

作者头像 李华