在前端开发中，我们会经常使用到数组的查询和操作。其中一个常用的方法是使用 indexOf 来查找元素在数组中的位置。但随着 ES7 的引入，Array.prototype.includes 方法带来了更好的替代方案。在本文中，我们将讨论如何使用 Array.prototype.includes 方法来代替 indexOf，并分析其优点和适用场景。
Array.prototype.indexOf 方法的缺点
首先来看一下常用的 Array.prototype.indexOf 方法。它用于返回在数组中第一个找到的指定元素的索引，如果没有找到则返回 -1。例如：
const arr = ['hello', 'world']; console.log(arr.indexOf('hello')); // 0 console.log(arr.indexOf('other')); // -1
尽管 indexOf 方法已经被广泛使用，但它仍然存在一些问题。其中一个缺点是在查找 NaN 时会出现错误。例如：
const arr = [1, 2, NaN]; console.log(arr.indexOf(NaN)); // -1
这是因为在 JavaScript 中，NaN 不等于它自己。因此，indexOf 方法无法识别 NaN 的值。这可能会导致一些问题和错误。
另一个问题是 indexOf 方法不支持从后往前查找元素。如果我们想查找最后一个指定元素的位置，就需要使用其他的方法实现。
Array.prototype.includes 的优点
在 ES7 中，引入了 Array.prototype.includes 方法来解决这些问题。它可以用于判断一个数组是否包含一个指定的值，并返回一个布尔值。例如：
const arr = ['hello', 'world']; console.log(arr.includes('hello')); // true console.log(arr.includes('other')); // false
与 indexOf 方法不同的是，Array.prototype.includes 方法可以正确地比较 NaN 的值。例如：
const arr = [1, 2, NaN]; console.log(arr.includes(NaN)); // true
Array.prototype.includes 方法还支持从后往前查找元素。例如：
const arr = ['hello', 'world']; console.log(arr.includes('hello', -1)); // false console.log(arr.includes('world', -1)); // true
这使得 Array.prototype.includes 方法成为 indexOf 方法的完美替代方案。同时，它还具有更好的性能和可读性，因为它可以在一个语句中完成数组元素的搜索和判断。
适用场景
在使用 Array.prototype.includes 方法时，需要注意与 indexOf 方法的不同之处。Array.prototype.includes 方法返回一个布尔值，而不是元素的索引。因此，它最适合用于判断某个元素是否存在于数组中。
如果需要查找元素的索引，可以配合使用 Array.prototype.indexOf 方法。例如：
const arr = ['hello', 'world']; const index = arr.indexOf('hello'); console.log(index !== -1 ? `element exist at index ${index}` : 'element not found');
通常情况下，如果只需要判断某个元素在数组中是否存在，Array.prototype.includes 方法是更好的选择。
示例代码
我们来看一下使用 Array.prototype.includes 方法和 indexOf 方法的示例代码：
-- -------------------- ---- ------- ----- --- - --------- --------- -- ----- ------------------------ -- -- ----------------------- - -------------------- -------- - ---- - -------------------- --- -------- - -- ----- ------- -- ----- ----- - --------------------- -- ------ --- --- - -------------------- ----- -- ----- ----------- - ---- - -------------------- --- -------- -展开代码
小结
本文介绍了如何使用 ES7 引入的 Array.prototype.includes 方法来替代 indexOf 方法。我们分析了 indexOf 方法的缺点和 Array.prototype.includes 方法的优点，并给出了使用示例代码。在实践中，选择合适的方法可以提高代码性能和可读性，使开发更加高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67ca653ce46428fe9e2822ed
