ES2020：如何在数组内快速检查元素是否存在

在前端开发中，常常需要对数组进行操作，其中一个常见的需求是检查一个元素是否存在于数组中。在 ES2020 中，提供了一种新的方式来快速检查元素是否存在于数组中，本文将详细介绍这种方法的使用和优势。

includes() 方法

ES2020 中新增了一个数组方法 includes()，用于检查一个元素是否存在于数组中。该方法返回一个布尔值，表示数组中是否包含传入的元素。其语法如下：

array.includes(searchElement[, fromIndex])

其中，searchElement 表示要查找的元素，fromIndex 是可选参数，表示从哪个索引开始查找，默认值为 0。

下面是一个示例代码：

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

通过调用 includes() 方法，我们可以快速地检查一个元素是否存在于数组中，并获得一个布尔值作为结果。

indexOf() 方法

在 ES2020 之前，我们通常使用 indexOf() 方法来检查一个元素是否存在于数组中。该方法返回一个数字，表示元素在数组中的索引位置。如果元素不存在于数组中，则返回 -1。其语法如下：

array.indexOf(searchElement[, fromIndex])

其中，searchElement 表示要查找的元素，fromIndex 是可选参数，表示从哪个索引开始查找，默认值为 0。

下面是一个示例代码：

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

通过调用 indexOf() 方法，我们可以得到元素在数组中的索引位置，如果元素不存在于数组中，则返回 -1。但是，这种方法的缺点是，如果数组中存在重复的元素，它只能返回第一个匹配的元素的索引位置。

includes() 方法的优势

相比于 indexOf() 方法，includes() 方法有以下优势：

1. includes() 方法返回一个布尔值，更加直观和易于理解。
2. includes() 方法可以正确处理 NaN 和 -0，而 indexOf() 方法不能正确处理。
3. includes() 方法可以正确处理数组中存在的重复元素。

下面是一个示例代码，演示了 includes() 方法的优势：

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

总结

在 ES2020 中，新增了一个数组方法 includes()，用于快速检查一个元素是否存在于数组中。相比于之前常用的 indexOf() 方法，includes() 方法更加直观易懂，能够正确处理 NaN 和 -0，以及数组中存在的重复元素。在实际开发中，我们可以根据具体需求选择使用 includes() 方法或 indexOf() 方法来检查数组中的元素。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65c34bc8add4f0e0ffd87363