indexOf 是 JavaScript 字符串对象以及数组对象自带的原生方法,核心作用是查找指定元素在字符串或者数组里面第一次出现的下标位置,如果成功找到目标内容,就返回对应的索引数字,如果没有找到目标内容,统一返回负 1,这是前端开发最基础高频方法,笔试面试和日常业务代码都会大量使用。这个方法默认是从序列的开头位置开始检索,索引从 0 开始计数,很多初学者最容易踩坑的地方就是混淆返回值,把负 1 当成有效下标,判断是否存在目标内容的时候,一定要记住判断结果不等于负 1 才代表查找成功。同时字符串版 indexOf 和数组版 indexOf 逻辑一致,但是二者底层类型不一样,字符串版本检索的是子串,数组版本检索的是数组元素,检索规则严格区分大小写,并且是严格相等匹配,也就是全等判断,不会自动做类型转换,这个特性是 indexOf 最重要的考点,需要重点掌握。
基础语法结构
字符串写法 字符串.indexOf (查找目标,可选起始位置)
数组写法 数组.indexOf (查找元素,可选起始位置)
参数说明
第一个参数 必填,想要查找的子串或者数组元素
第二个参数 可选,数字类型,代表从这个下标位置开始向后查找,默认值是 0,也就是从头开始查找
返回值 找到返回首次匹配的索引,未找到返回 -1
字符串 indexOf 示例
const str = hello world
const res = str.indexOf (world)
返回值是 6
const res2 = str.indexOf (abc)
返回值是 - 1
如果添加第二个参数
str.indexOf (o,5) 代表从下标 5 开始向后查找字母 o,返回对应的下标
数组 indexOf 示例
const arr = [1,2,3,4,2]
const result = arr.indexOf (2)
返回值是 1,只返回第一次出现的位置,后面第二个 2 的下标不会返回
arr.indexOf (99) 返回 -1
核心规则要点清单
第一 索引从 0 开始,第一个字符或者第一个数组元素下标是 0,不是 1
第二 只返回第一次匹配的位置,重复出现的目标只返回首个下标
第三 严格全等匹配,区分大小写,数字和字符串不会自动转换,比如数组里面数字 2 和字符串 2,indexOf 会判定为不匹配
第四 第二个起始参数如果是负数,会自动当成 0 处理,如果起始位置大于序列最大下标,直接返回负 1
第五 indexOf 只做正向查找,从左往右,不是从右往左,从右往左查找对应的方法是 lastIndexOf
indexOf 和 lastIndexOf 对比表格
| 方法 | 查找方向 | 返回值 | 适用对象 |
|---|---|---|---|
| indexOf | 从左向右查找 | 首次匹配下标,找不到负 1 | 字符串 数组 |
| lastIndexOf | 从右向左查找 | 最后一次匹配下标,找不到负 1 | 字符串 数组 |
高频业务使用场景
第一 判断字符串是否包含子串,写法 if (str.indexOf (key) !== -1)
第二 判断数组里面是否存在某个元素,老版本浏览器不支持 includes 的时候,普遍使用 indexOf 做兼容判断
第三 截取字符串,配合 indexOf 定位分隔符位置,再搭配 slice 或者 substring 完成切割
第四 查找重复元素,循环调用 indexOf,检测重复值
常见错误
错误写法 if (str.indexOf (key)) 这种写法错误,因为下标 0 的时候,if 判断会当成 false,也就是第一个字符匹配成功的时候,代码会判定不存在,正确写法必须写!== -1
错误认知 indexOf 可以自动忽略大小写,实际它是严格区分大小写,想要忽略大小写,需要提前把字符串统一转大写或者转小写之后再调用 indexOf
【常见问题】
问题 1 indexOf 找不到目标的时候返回什么
回答 1 indexOf 用法里面明确,查找失败统一返回负 1,业务判断目标是否存在,必须判断 indexOf 返回值不等于负 1,这是 indexOf 用法最基础考点。
问题 2 indexOf 区分大小写吗
回答 1 indexOf 用法采用严格全等匹配,区分大小写,大写和小写内容会判定为不同目标,调用 indexOf 之前可以统一转换大小写实现不区分查找。
问题 3 indexOf 和 lastIndexOf 有什么差别
回答 3 indexOf 用法是从左往右查找,返回第一次出现的下标,lastIndexOf 是从右往左查找,返回最后一次出现的下标,两个方法返回规则一致,只是检索方向不同。
问题 4 indexOf 第二个参数是什么作用
回答 4 indexOf 用法里面第二个可选参数是起始查找下标,代表从指定位置开始向后检索,默认从下标 0 开始查找,这个参数是 indexOf 进阶考点。
【免责申明】
本文为 JavaScript 编程学习参考,不同浏览器环境存在少量兼容差异,正式考试或者项目开发请以官方文档为准,本文不替代专业编程教师讲解。
