【JavaScript】indexOf() 和 lastIndexOf() 方法详解

在 JavaScript 中，indexOf() 和 lastIndexOf() 方法是处理字符串和数组时非常常用的两个方法。它们分别用于查找指定元素的第一次和最后一次出现的位置。本文将深入解析这两个方法的原理、用法，并通过实例帮助大家更好地理解它们的实际应用。

一、indexOf() 方法概述

1. indexOf() 的功能

indexOf() 方法用于返回指定元素在数组或字符串中第一次出现的位置。如果找不到该元素，则返回 -1。该方法的语法如下：

array.indexOf(searchElement, fromIndex);

• searchElement：必选参数，要搜索的元素。
• fromIndex：可选参数，指定搜索的起始位置，默认为 0。

在字符串中，indexOf() 返回的是从头开始找到的第一个匹配项的索引位置。如果没有匹配项，则返回 -1。

2. 字符串中的 indexOf() 示例

let str = "JavaScript is awesome!";
let index = str.indexOf("is");
console.log(index);  // 11

在这个例子中，indexOf("is") 返回的是 11，因为 "is" 在字符串中的第一个出现位置是第 11 个字符。

3. 数组中的 indexOf() 示例

let arr = [1, 2, 3, 4, 5];
let index = arr.indexOf(3);
console.log(index);  // 2

在数组中，indexOf(3) 返回的是元素 3 的第一个出现位置，即索引 2。

4. 使用 fromIndex 参数

如果你想从数组或字符串的某个位置开始查找，可以使用 fromIndex 参数。例如：

let str = "JavaScript is awesome!";
let index = str.indexOf("is", 12);
console.log(index);  // -1

在这个例子中，由于我们指定从索引 12 开始查找 "is"，所以返回的是 -1，因为 "is" 在后续的字符串中并不存在。

二、lastIndexOf() 方法概述

1. lastIndexOf() 的功能

lastIndexOf() 方法用于返回指定元素在数组或字符串中最后一次出现的位置。如果找不到该元素，则返回 -1。该方法的语法与 indexOf() 类似：

array.lastIndexOf(searchElement, fromIndex);

• searchElement：必选参数，要搜索的元素。
• fromIndex：可选参数，指定搜索的起始位置，默认为数组或字符串的最后一个索引。

2. 字符串中的 lastIndexOf() 示例

let str = "JavaScript is awesome!";
let index = str.lastIndexOf("is");
console.log(index);  // 11

在这个例子中，lastIndexOf("is") 返回的是 11，因为 "is" 在字符串中最后一次出现的位置也是 11。

3. 数组中的 lastIndexOf() 示例

let arr = [1, 2, 3, 4, 3, 5];
let index = arr.lastIndexOf(3);
console.log(index);  // 4

在数组中，lastIndexOf(3) 返回的是元素 3 的最后一次出现位置，即索引 4。

4. 使用 fromIndex 参数

lastIndexOf() 方法还允许你从指定的索引位置开始向前查找。例如：

let str = "JavaScript is awesome!";
let index = str.lastIndexOf("is", 10);
console.log(index);  // 11

在这个例子中，尽管我们指定从索引 10 向前查找 "is"，lastIndexOf 仍然返回的是第一个匹配项的索引 11，因为它总是查找从后往前的最后一个匹配项。

三、indexOf() 和 lastIndexOf() 的区别

1. 查找方向

• indexOf()：从左到右查找元素，返回元素第一次出现的位置。
• lastIndexOf()：从右到左查找元素，返回元素最后一次出现的位置。

2. 查找顺序

indexOf() 适合用于查找元素首次出现的位置，而 lastIndexOf() 适合用于查找元素的最后一次出现。具体使用哪一个方法，取决于你的业务需求。例如，如果你需要获取字符串中最后一次出现的字符或子字符串的位置，lastIndexOf() 将更为合适。

3. 返回值

如果指定的元素没有找到，两个方法都会返回 -1。这意味着，你可以通过返回值判断目标元素是否在数组或字符串中存在。

四、实际应用场景

1. 查找元素是否存在

你可以使用 indexOf() 或 lastIndexOf() 来检查某个元素是否存在于数组或字符串中。通过返回值是否为 -1，可以轻松判断元素是否存在。

let arr = [1, 2, 3, 4, 5];
let index = arr.indexOf(3);
if (index !== -1) {
    console.log("元素 3 存在，索引为：" + index);
} else {
    console.log("元素 3 不存在");
}

2. 查找元素的重复出现位置

如果一个元素在数组或字符串中出现多次，你可以使用 lastIndexOf() 来找出最后一次出现的位置，这对于处理重复数据时非常有用。

let str = "JavaScript is awesome, JavaScript is fun!";
let index = str.lastIndexOf("JavaScript");
console.log(index);  // 27

3. 动态查找和定位

当你需要根据用户输入动态查找某个字符串的位置时，indexOf() 和 lastIndexOf() 都是非常高效的工具。无论是查找首次出现的位置，还是最后一次出现的位置，都可以通过这两个方法轻松实现。

let userInput = "fun";
let text = "JavaScript is fun!";
let firstOccurrence = text.indexOf(userInput);
let lastOccurrence = text.lastIndexOf(userInput);

console.log("首次出现位置：" + firstOccurrence);  // 17
console.log("最后一次出现位置：" + lastOccurrence);  // 17

五、注意事项

1. 区分大小写

indexOf() 和 lastIndexOf() 方法是区分大小写的。如果你要进行不区分大小写的查找，可以将字符串转换为统一的大小写后再进行查找。

let str = "JavaScript is fun!";
let index = str.indexOf("javascript".toLowerCase());
console.log(index);  // -1

2. 从指定位置开始查找

如果需要从指定位置开始查找，可以利用 fromIndex 参数。要注意的是，fromIndex 的值不能超出数组或字符串的边界，否则可能导致意外的结果。

let str = "Hello, world!";
let index = str.indexOf("o", 5);
console.log(index);  // 8

3. 多次查找时的性能问题

在数组和字符串中频繁使用 indexOf() 或 lastIndexOf() 查找可能会导致性能问题，尤其是在数据量较大时。此时，可以考虑使用其他数据结构或算法来提高查找效率。

推荐：

• JavaScript
• react
• vue

---