前言
在前端开发过程中，我们常常需要操作数组来处理数据。而在数组的操作中，涉及到查找特定元素的场景是非常普遍的。由于 JavaScript 语言中提供了多种查找数组元素的方法，本文将探讨两种查找方法的区别，分别是 Array.prototype.includes() 和Array.prototype.indexOf()。
Array.prototype.includes()
首先来看 Array.prototype.includes()。该方法用于判断数组中是否包含指定的元素，并返回一个布尔值。其基本语法如下：
array.includes(searchElement[, fromIndex])
其中：
searchElement：要查找的元素fromIndex：可选参数，表示从哪个索引位置开始查找。默认值为 0。
使用该方法的例子如下：
const arr = [1, 2, 3, 4]; console.log(arr.includes(2)); // true console.log(arr.includes(5)); // false
可以看到，includes() 方法会返回布尔值，并表示数组中是否包含指定的元素。该方法会从数组的开头开始查找，并返回最先找到的该元素的位置，如果没有找到则返回 false。
需要注意的是，includes() 方法和 indexOf() 方法有些区别，具体可以看下文。
Array.prototype.indexOf()
接下来看一下 Array.prototype.indexOf()。该方法用于查找指定元素在数组中的位置，并返回其索引值。其基本语法如下：
array.indexOf(searchElement[, fromIndex])
其中：
searchElement：要查找的元素fromIndex：可选参数，表示从哪个索引位置开始查找。默认值为 0。
使用该方法的例子如下：
const arr = [1, 2, 3, 4]; console.log(arr.indexOf(2)); // 1 console.log(arr.indexOf(5)); // -1
可以看到，indexOf() 方法会返回该元素在数组中的索引值，如果该元素不存在于数组中，则返回 -1。需要注意的是，该方法会从数组的开头开始查找，返回最先找到的该元素的位置，并不会返回所有符合条件的元素位置，具体可以看下面的例子：
const arr = [1, 2, 3, 2]; console.log(arr.indexOf(2)); // 1 console.log(arr.lastIndexOf(2)); // 3
上面的例子中，数组中有两个值为 2 的元素，但是 indexOf() 方法只返回了第一个元素的位置，而 lastIndexOf() 方法则返回了最后一个元素的位置。
区别
两者的区别在于：
- 返回值不同：
includes()方法会返回布尔值，表示是否存在该元素；而indexOf()方法会返回该元素在数组中的索引值，如果该元素不存在于数组中，则返回 -1。 - 返回所有符合条件的结果：
indexOf()方法只能返回最先找到的元素的位置，而includes()方法会返回所有符合条件的结果。
因此，如果我们需要查找数组中是否存在某个元素时，可以使用 includes() 方法，如果需要查找某个元素在数组中的位置，则可以使用 indexOf() 方法。需要注意的是，对于数组中不存在的元素，两者的返回值是有区别的。
总结
本篇文章介绍了两种数组查找方法的区别，分别是 Array.prototype.includes() 和 Array.prototype.indexOf()。需要根据实际的需求选择不同的方法。
如果你想进一步了解 JavaScript 数组的操作方法，请阅读《JavaScript 数组操作指南》。
示例代码
-- -------------------- ---- ------- -- -------------------------- ---- ----- --- - --- -- -- --- ----------------------------- -- ---- ----------------------------- -- ----- -- ------------------------- ---- ----- --- - --- -- -- --- ---------------------------- -- - -------------------------------- -- -
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65ba2171add4f0e0ff2b1e21