ES10 中的 Array 的 indexOf 方法：如何查找数组元素？
在前端开发中，我们经常需要对数组进行操作。在 JavaScript 中，数组是一种常见的数据类型，它可以包含多个值。在数组中查找元素是一个基本操作，ES10 中的 Array 的 indexOf 方法提供了一种简单、快速的方式来查找数组元素。本文将介绍 ES10 中的 Array 的 indexOf 方法的用法和注意事项，以及如何在实际开发中使用它。
一、indexOf 方法的基本用法
indexOf 方法用于查找数组中指定元素的位置。它接收一个参数，即要查找的元素。如果找到了该元素，则返回它在数组中的索引；如果没有找到，则返回 -1。下面是一个简单的示例：
const arr = [1, 2, 3, 4, 5]; const index = arr.indexOf(3); console.log(index); // 2
在上面的示例中，我们定义了一个数组 arr，然后使用 indexOf 方法查找元素 3 的位置。由于元素 3 在数组中的索引为 2，因此返回值为 2。
二、indexOf 方法的高级用法
除了基本用法外，indexOf 方法还有一些高级用法。下面是一些示例：
- 查找所有匹配的元素
如果数组中有多个与要查找的元素匹配的元素，indexOf 方法只会返回第一个匹配的元素的索引。如果想要查找所有匹配的元素，可以使用循环来遍历数组，如下所示：
const arr = [1, 2, 3, 2, 5];
const indexes = [];
let i = -1;
while ((i = arr.indexOf(2, i + 1)) !== -1) {
indexes.push(i);
}
console.log(indexes); // [1, 3]在上面的示例中，我们定义了一个数组 arr，然后使用循环来遍历数组，查找所有匹配的元素的索引，并将它们存储在一个数组 indexes 中。由于元素 2 在数组中的索引为 1 和 3，因此返回值为 [1, 3]。
- 查找最后一个匹配的元素
如果想要查找最后一个匹配的元素，可以使用 lastIndexOf 方法。lastIndexOf 方法与 indexOf 方法类似，只不过它从数组的末尾开始查找元素。下面是一个示例：
const arr = [1, 2, 3, 2, 5]; const index = arr.lastIndexOf(2); console.log(index); // 3
在上面的示例中，我们定义了一个数组 arr，然后使用 lastIndexOf 方法查找元素 2 最后一次出现的位置。由于元素 2 最后一次出现在数组中的索引为 3，因此返回值为 3。
三、注意事项
在使用 indexOf 方法时，需要注意以下几点：
- indexOf 方法对于 NaN 的处理
在 JavaScript 中，NaN 不等于任何值，包括自己。因此，在使用 indexOf 方法查找 NaN 时，需要使用特殊的方法来判断，如下所示：
const arr = [1, NaN, 3, NaN, 5]; const index = arr.findIndex((item) => Number.isNaN(item)); console.log(index); // 1
在上面的示例中，我们使用 findIndex 方法来查找数组中的 NaN 元素。由于 Number.isNaN 方法可以正确地判断 NaN，因此返回值为 1。
- indexOf 方法对于引用类型的处理
在 JavaScript 中，引用类型的比较是基于引用的，而不是基于值的。因此，在使用 indexOf 方法查找引用类型的元素时，需要注意它们的引用是否相同。下面是一个示例：
const arr = [{ id: 1 }, { id: 2 }, { id: 3 }];
const index = arr.indexOf({ id: 2 });
console.log(index); // -1在上面的示例中，我们定义了一个数组 arr，其中包含三个对象。然后我们使用 indexOf 方法查找 id 为 2 的对象，但是返回值为 -1。这是因为在 JavaScript 中，每个对象都有自己的引用，即使两个对象的属性相同，它们的引用也不同。
四、实际应用
在实际开发中，我们可以使用 indexOf 方法来查找数组中的元素，然后进行相应的操作。下面是一个示例：
const arr = ["apple", "banana", "orange"];
const index = arr.indexOf("banana");
if (index !== -1) {
arr.splice(index, 1);
}
console.log(arr); // ["apple", "orange"]在上面的示例中，我们定义了一个数组 arr，然后使用 indexOf 方法查找元素 banana 的位置。如果找到了该元素，则使用 splice 方法将它从数组中删除。最后，输出删除元素后的数组。
总结
本文介绍了 ES10 中的 Array 的 indexOf 方法的用法和注意事项，以及如何在实际开发中使用它。indexOf 方法是一种简单、快速的方式来查找数组元素，它可以满足大部分情况下的需求。但是，在使用 indexOf 方法时，需要注意对于 NaN 和引用类型的处理。希望本文对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6614cc6ad10417a22250ca56