如何在 ES7 中使用 Array.prototype.includes()

在 ES7 中，引入了 Array.prototype.includes() 作为检查数组中是否包含特定元素的方法。此方法返回一个布尔值，表示特定元素是否在数组中。

语法

Array.prototype.includes(valueToSearch[, fromIndex])

• valueToSearch：需要查找的元素。
• fromIndex（可选）：从这个索引开始查找。

示例代码

const arr = [1, 2, 3, 4, 5];
console.log(arr.includes(3)); // true
console.log(arr.includes(6)); // false

本方法的返回值是布尔值。如果数组中存在查找的元素，则返回 true，否则返回 false。

我们还可以使用 fromIndex 指定开始查找的位置，如下所示：

const arr = [1, 2, 3, 4, 5];
console.log(arr.includes(3, 2)); // true
console.log(arr.includes(1, 2)); // false

深度学习

在 ES5 中，我们需要使用 indexOf 方法来检查元素是否存在于数组中。indexOf 方法返回元素在数组中的索引，如果该元素不存在，则返回 -1。

const arr = [1, 2, 3, 4, 5];
console.log(arr.indexOf(3)); // 2
console.log(arr.indexOf(6)); // -1

但是，indexOf 无法处理 NaN，因为它与任何其他值都不相等（包括它本身）。因此，在诸如以下情况下，我们必须使用 Array.prototype.includes()：

console.log([NaN].indexOf(NaN)); // -1
console.log([NaN].includes(NaN)); // true

此外，与 indexOf() 不同，includes() 不会区分 +0 和 -0。

console.log([-0].indexOf(+0)); // 0
console.log([-0].includes(+0)); // true

指导意义

使用 includes() 方法代替 indexOf() 方法，可以减少因处理 NaN 和 +0/-0 导致 Bug 的可能性。因此，在编写 Web 应用程序时，建议尽可能使用 includes()。

此外，当查找元素时，建议始终指定 fromIndex 值，以提高性能。fromIndex 为负数时，将从数组末尾开始搜索。

由于该方法是 ES7 中引入的，因此在旧浏览器中可能无法使用。因此，建议使用 polyfill 来填补这个问题。polyfill 可以通过多种方式获取，并在需要时手动添加到项目中。

结论

Array.prototype.includes() 是 ES7 中的新方法，可用于检查数组中是否包含特定元素。这与 indexOf() 方法不同，因为它可以检测 NaN 和 +0/-0 等值，因此建议尽可能使用。在查找时，建议指定 fromIndex 值以提高性能，并使用 polyfill 来填补旧浏览器中的无法使用的问题。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67022fe9d91dce0dc846c018