ES10 中的 Array.includes() 方法详解及使用示例-JavaScript中文网-JavaScript教程资源分享门户

ES10 中的 Array.includes() 方法详解及使用示例

在过去的 JavaScript 中，想要检测一个数组中是否包含某个元素，我们通常会使用 indexOf() 方法。然而，在 ES10（也称为 ECMAScript 2019）中，Array.includes() 方法的出现改变了这一现状，使得检测一个元素是否包含在数组中变得更加简单、直观、易用。

在本文中，我们将学习 ES10 中 Array.includes() 方法的详细使用方法，包括它的语法、用法、示例代码以及它如何与其他方法一起使用。本文旨在深入理解该方法，以便您能在未来的 JavaScript 中，更好地利用它。

语法

Array.includes() 方法是一个用于判断一个数组是否包含特定元素的方法。它的语法如下：

array.includes(searchElement[, fromIndex])

其中，

该方法会返回一个 Boolean（布尔值），其中，true 表示数组中存在该元素，而 false 则表示不存在。

用法

下面是使用 Array.includes() 方法的示例代码：

const array1 = [1, 2, 3]; console.log(array1.includes(2)); // Output: true

在上面的代码中，我们创建了一个数组 array1，它包含了 1、2 和 3 这三个元素。接着，我们使用 console.log() 方法打印了 array1 是否包含元素 2。由于数组中确实包含该元素，所以该方法返回 true，而我们在控制台中看到的输出结果也是 true。

再看一组示例代码：

const array2 = [1, 2, 3, NaN]; console.log(array2.includes(NaN)); // Output: true

在这个代码中，我们声明了一个数组 array2，其中，包含了元素 1、2、3 和 NaN。由于 NaN 本身是 JavaScript 中一个独特的值，它与自己相等但与其他任何值都不相等，所以我们需要特别注意。

在使用 Array.includes() 方法时，我们可以将 NaN 作为 searchElement（要查找的元素），然后该方法就可以正确地返回 true。

我们还可以使用 fromIndex 搜索特定元素的位置，如下所示：

const array3 = [1, 2, 3]; console.log(array3.includes(1, 0)); // Output: true

在这个代码片段中，我们使用了 fromIndex 参数，并将其设置为 0。这意味着我们只会在索引 0 开始后的位置去搜索，而不会搜索前面的位置。因此，Array.includes() 方法会在数组的头一个元素（也就是 1）处找到由 searchElement 指定的值。

注意：如果 fromIndex 是负数，如 -1，则表示从数组的最后一个元素（即索引位置为 array.length -1）的前面开始搜索。

Array.includes() 方法的优点

与 indexOf() 方法不同，Array.includes() 方法有以下优点：

与其他方法一起使用

Array.includes() 方法更方便有些方法一起使用，例如 filter() 和 some()。

filter() 方法

filter() 方法会返回一个满足指定条件的新数组。在使用filter() 方法时，我们可以结合使用 Array.includes() 方法来过滤数组中的特定元素。看下面的代码：

const arr1 = [1, 2, 3, 4, 5]; const arr2 = arr1.filter(item => !([2, 4].includes(item))); console.log(arr2); // Output: [1, 3, 5]

在这个例子中，我们使用 filter() 方法移除数组 arr1 中的元素 2 和 4。为了达到这个目的，我们在 filter() 方法中使用了 !([2, 4].includes(item))。由于 ! 运算符将搜索条件反转，所以只有不等于 2 并且也不等于 4 的元素才会留下。

some() 方法

some() 方法用于测试数组中的元素是否满足指定的条件。默认情况下，some() 方法会返回一个 Boolean 值。在使用 Array.includes() 时，我们可以借助 some() 方法来快速判断数组中是否包含多个值。看下面的代码：

const arr1 = [1, 2, 3, 4, 5]; console.log([1, 2].some(item => arr1.includes(item))); // Output: true

在这个例子中，我们使用 some() 方法返回一个 Boolean 值。由于数组 arr1 包含值 1 和 2，所以该方法返回 true。

总结

Array.includes() 方法提供了一种更简单、更直观的方式来检查数组中是否包含某个元素，并且在处理 NaN 值时更为准确和安全。此外，它可以与其他方法结合使用，如 filter() 和 some() 方法。

从一个更高的分享角度看，ES10 中的 Array.includes() 方法为我们开拓了更多学习 JavaScript 的路子，并且也让我们更加便捷了解到 JavaScript，可以更好的当成一名优秀的前端开发者。