JavaScript 的 indexOf 方法怎么用？

在 JavaScript 编程的世界里，`indexOf` 方法是一个非常实用的工具，它主要用于在数组或字符串中查找特定元素或子字符串的位置，那它具体怎么用呢？下面我们来详细探讨。

数组中的 indexOf

对于数组,`indexOf` 方法的语法是：`array.indexOf(searchElement[, fromIndex])`，`searchElement` 是要查找的元素，`fromIndex` 是可选参数，表示从数组的哪个索引位置开始查找（如果省略，默认从索引 0 开始）。

有一个数组 `let arr = [10, 20, 30, 20];`，如果我们想查找 `20` 在数组中的位置，就可以这样用：`let index = arr.indexOf(20);`，`index` 的值为 `1`，因为它找到了第一个出现的 `20`，如果我们想从索引 `2` 开始查找，`let index2 = arr.indexOf(20, 2);`，这时 `index2` 的值就是 `3`，找到了第二个 `20`。

如果数组中不存在要查找的元素,`indexOf` 方法会返回 `-1`，`let notExistIndex = arr.indexOf(40);`，`notExistIndex` `-1`。

字符串中的 indexOf

字符串的 `indexOf` 方法语法是：`string.indexOf(searchValue[, fromIndex])`，`searchValue` 是要查找的子字符串，`fromIndex` 同样是可选的起始查找位置。

举个例子,`let str = "hello world";`，`let subStrIndex = str.indexOf("o");`，这里会返回 `4`，因为第一个 `o` 在索引 `4` 的位置，要是我们从索引 `5` 开始找 `o`，`let subStrIndex2 = str.indexOf("o", 5);`，结果就是 `7`。

当字符串中没有目标子字符串时,也返回 `-1`，像 `let noSubStrIndex = str.indexOf("java");`，`noSubStrIndex` `-1`。

indexOf 的注意事项

（一）数据类型的严格匹配

在数组中使用 `indexOf` 时，它对数据类型是严格匹配的，`let numArr = [1, "1"];`，`numArr.indexOf(1)` 返回 `0`，`numArr.indexOf("1")` 返回 `1`，因为 `1` 是数字类型，`"1"` 是字符串类型，它们被当作不同的元素。

### （二）与 includes 方法的区别

`includes` 方法和 `indexOf` 方法都能用于查找元素是否存在，但 `includes` 方法返回的是布尔值（`true` 或 `false`），而 `indexOf` 返回的是索引（存在时）或 `-1`（不存在时），对于数组 `let arrTest = [10, 20];`，`arrTest.includes(10)` 返回 `true`，`arrTest.indexOf(10)` 返回 `0`。

### （三）在稀疏数组中的表现

稀疏数组是指数组中存在空洞（即某些索引位置没有值），`indexOf` 方法在稀疏数组中查找时，会跳过这些空洞，`let sparseArr = [, 10,, 20];`，`sparseArr.indexOf(10)` 返回 `1`，它不会去检查那些空洞的索引位置。

indexOf 的应用场景

（一）数据验证

在表单验证等场景中,如果我们有一个数组存储了合法的选项值，就可以用 `indexOf` 来判断用户输入的值是否合法，`let validOptions = ["option1", "option2", "option3"];`，用户输入 `userInput`，`if (validOptions.indexOf(userInput)!== -1) { // 合法，进行下一步操作 } else { // 提示用户输入不合法 }`。

### （二）字符串处理

在文本处理中,比如检查某个关键词是否在一段文字中出现，`let text = "这是一段关于 JavaScript 的介绍";`，`let keyword = "JavaScript";`，`if (text.indexOf(keyword)!== -1) { // 执行相关操作，如高亮显示关键词 }`。

### （三）数组去重（辅助方法）

虽然 `indexOf` 本身不能直接实现数组去重，但可以辅助实现，思路是创建一个新数组，遍历原数组，用 `indexOf` 检查新数组中是否已存在当前元素，不存在就添加。

```javascript let arrToDeduplicate = [1, 2, 1, 3, 2]; let newArr = []; for (let i = 0; i < arrToDeduplicate.length; i++) { if (newArr.indexOf(arrToDeduplicate[i]) === -1) { newArr.push(arrToDeduplicate[i]); } } console.log(newArr); // [1, 2, 3] ```

`indexOf` 方法在 JavaScript 中是一个基础又重要的方法，无论是操作数组还是字符串，都能发挥很大的作用，我们要清楚它的语法、注意事项以及各种应用场景，这样在编程过程中就能灵活运用它来解决实际问题，通过不断练习和实践，我们能更熟练地掌握 `indexOf` 方法，让我们的代码更加高效和简洁。