SSM+微信小程序剪纸毕设项目实战：从环境搭建到答辩避坑
2026/10/26 7:55:33
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 实现字符串多关键词搜索”），欢迎继续问！