### 认识 indexOf()：帮你快速定位元素的“位置探测器” 在编程中，我们经常需要在一个序列（比如一串文字、一组数据中）找到某个特定元素的位置。这时候，`indexOf()` 就是一个实用的工具。它像一把“位置探测器”，能告诉你目标元素在序列中的索引（即位置编号），如果找不到，还会明确告诉你“没找到”。 #### 先理解“索引”：位置编号的规则 在讲解 `indexOf()` 前，需先明确“索引”的概念。索引是序列中元素的位置编号，**从 0 开始计数**。例如： - 字符串 "hello" 中，'h' 的索引是 0，'e' 是 1，'l' 是 2（第二个 'l' 是 3），'o' 是 4； - 数组 [10, 20, 30] 中，10 的索引是 0，20 是 1，30 是 2。 记住这个规则：`indexOf()` 返回的正是这样的索引值。 ### 一、字符串的 indexOf()：在文字中找片段的位置 `indexOf()` 最初用于字符串（一段文字），语法为： ```javascript 字符串.indexOf(要查找的内容, [起始查找位置]); ``` - **要查找的内容**：可以是单个字符（如 'a'），也可以是多个字符组成的子串（如 "苹果"）； - **起始查找位置**（可选）：从哪个索引开始找，默认从 0 开始（即从第一个字符查起）。 #### 例子 1：基本用法（找子串位置） 假设有字符串 `str = "我爱吃苹果和香蕉"`，想找“苹果”在哪里： ```javascript let str = "我爱吃苹果和香蕉"; let position = str.indexOf("苹果"); console.log(position); // 输出：3 ``` 拆解字符串的字符索引：“我”(0)、“爱”(1)、“吃”(2)、“苹”(3)……所以“苹果”的起始位置（“苹”的索引）是 3。 #### 例子 2：没找到目标，返回 -1 如果找的子串不存在，`indexOf()` 会返回 `-1`（表示“未找到”）： ```javascript let str = "我爱吃苹果和香蕉"; let position = str.indexOf("橘子"); console.log(position); // 输出：-1 ``` #### 例子 3：指定起始查找位置 从某个位置之后开始找，可加第二个参数。例如在 "ababa" 中从索引 1 开始找 "a"： ```javascript let str = "ababa"; let position = str.indexOf("a", 1); // 从索引 1 开始查 console.log(position); // 输出：2（索引 1 是 'b'，下一个 'a' 在索引 2） ``` ### 二、数组的 indexOf()：在数据列表中找元素的位置 数组（一组有序数据的集合）也有 `indexOf()` 方法，语法为： ```javascript 数组.indexOf(要查找的元素, [起始查找位置]); ``` 它返回元素在数组中的索引，找不到则返回 `-1`。 #### 例子 1：找数字元素 数组 `[5, 10, 15, 20]` 中找 15： ```javascript let arr = [5, 10, 15, 20]; let position = arr.indexOf(15); console.log(position); // 输出：2（15 在数组的第 3 个位置，索引为 2） ``` #### 例子 2：找对象元素（注意：需严格相等） 数组元素是对象时，`indexOf()` 比较“引用”（是否为同一个对象），而非内容： ```javascript let obj1 = { name: "小明" }; let obj2 = { name: "小明" }; let arr = [obj1, { age: 18 }]; console.log(arr.indexOf(obj1)); // 输出：0（找到 obj1） console.log(arr.indexOf(obj2)); // 输出：-1（obj2 是新对象，不在数组中） ``` ### 三、实战：用 indexOf() 实现数组去重 数组去重是将数组中重复的元素只保留一个，得到一个“无重复元素”的新数组。利用 `indexOf()` 的定位能力，可以轻松实现这一需求。 #### 核心思路 遍历原数组的每个元素，检查它是否已在新数组中： - 若新数组中**没有**该元素（`indexOf()` 返回 -1），则将其加入新数组； - 若新数组中**已有**该元素（`indexOf()` 返回非 -1 的索引），则跳过。 #### 步骤拆解（以数组 `[2, 3, 2, 5, 3, 7]` 为例） 1. 创建一个空数组 `newArr`，用于存放去重后的结果； 2. 遍历原数组 `[2, 3, 2, 5, 3, 7]` 的每个元素： - 第一个元素 2：检查 `newArr.indexOf(2)`，此时 `newArr` 为空，返回 -1 → 将 2 加入 `newArr`（`newArr` 变为 [2]）； - 第二个元素 3：检查 `newArr.indexOf(3)`，返回 -1 → 加入 `newArr`（`newArr` 变为 [2, 3]）； - 第三个元素 2：检查 `newArr.indexOf(2)`，返回 0（已存在）→ 跳过； - 第四个元素 5：检查返回 -1 → 加入（`newArr` 变为 [2, 3, 5]）； - 第五个元素 3：检查返回 1（已存在）→ 跳过； - 第六个元素 7：检查返回 -1 → 加入（`newArr` 变为 [2, 3, 5, 7]）； 3. 遍历结束，`newArr` 即为去重后的数组。 #### 代码实现 ```javascript function removeDuplicates(arr) { let newArr = []; // 存放去重结果 for (let i = 0; i < arr.length; i++) { let element = arr[i]; // 若 element 不在 newArr 中（indexOf 返回 -1），则加入 if (newArr.indexOf(element) === -1) { newArr.push(element); } } return newArr; } // 测试：原数组含重复元素 let originalArr = [2, 3, 2, 5, 3, 7]; let uniqueArr = removeDuplicates(originalArr); console.log(uniqueArr); // 输出：[2, 3, 5, 7] ``` #### 注意事项 - 此方法适用于元素类型为基本类型（数字、字符串等）的数组，对对象数组需额外处理（因对象比较的是引用）； - **时间效率**：每次调用 `indexOf()` 都会遍历新数组，若原数组很长，效率较低（**后续可学习更优方法如 Set，但作为入门实战足够直观**）。 ### 四、使用 indexOf() 的注意事项 1. **区分大小写**：字符串查找时，“A”和“a”不同。例如 `"Apple".indexOf("apple")` 返回 `-1`。 2. **只返回第一个匹配位置**：若序列有多个相同元素，`indexOf()` 仅返回首个出现的索引。 3. **数组与字符串的共性**：两者逻辑一致，核心都是“找位置，返回索引或 -1”。 ### 总结 `indexOf()` 是一个简单实用的定位工具，既能帮你在文字或数据中找位置，也能结合遍历实现数组去重等实用功能。记住它的核心：**返回索引（从 0 开始），找不到则返 -1**。多尝试不同场景的例子，你会逐渐掌握它的灵活用法。