使用 ECMAScript 2017 的 Array.prototype.includes() 方法实现 JavaScript 中的数组元素包含判断及常见问题解决方式-JavaScript中文网-JavaScript教程资源分享门户

在 JavaScript 中，数组是一种非常常见的数据结构。我们经常需要对数组进行包含判断，即判断数组中是否包含某个特定的元素。在早期的 JavaScript 版本中，实现这种判断一般使用 Array.prototype.indexOf() 方法，但是该方法存在一些问题，如需要手动判断返回值是否为 -1，不能判断 NaN 等。随着 ECMAScript 2017 的发布，新增了 Array.prototype.includes() 方法来解决这些问题。

1. Array.prototype.includes() 方法的基本用法

Array.prototype.includes() 方法用来判断数组中是否包含某个特定的元素，返回值为布尔类型。其基本语法如下所示：

arr.includes(searchElement[, fromIndex])

其中，searchElement 参数为需要在数组中查找的元素，fromIndex 参数为可选参数，表示从哪个索引开始查找元素，如果不指定该参数，则默认从索引 0 开始查找。

例如，判断数组 [1, 2, 3] 中是否包含元素 2，可以采用以下代码：

const arr = [1, 2, 3];
const isExist = arr.includes(2);
console.log(isExist); // 输出 true

2. Array.prototype.includes() 方法的常见问题解决方式

与早期的 Array.prototype.indexOf() 方法相比，Array.prototype.includes() 方法有以下优势：

2.1 不需要手动判断返回值是否为 -1

Array.prototype.indexOf() 方法在未找到元素时返回 -1，而我们经常需要手动判断返回值是否为 -1。例如，判断数组 [1, 2, 3] 中是否包含元素 4，可以采用以下代码：

const arr = [1, 2, 3];
const index = arr.indexOf(4);
const isExist = index !== -1;
console.log(isExist); // 输出 false

而使用 Array.prototype.includes() 方法，代码更加简洁易懂：

const arr = [1, 2, 3];
const isExist = arr.includes(4);
console.log(isExist); // 输出 false

2.2 能够判断 NaN 元素

NaN（Not a Number）是一种特殊的数值类型，如果使用 Array.prototype.indexOf() 方法查找 NaN 元素，会出现错误的结果：

const arr = [1, NaN, 3];
const index = arr.indexOf(NaN);
console.log(index); // 输出 -1

这是因为 JavaScript 中的 NaN 和任意值都不相等，甚至包括自身。使用 Array.prototype.includes() 方法，能够正确地判断 NaN 元素：

const arr = [1, NaN, 3];
const isExist = arr.includes(NaN);
console.log(isExist); // 输出 true

3. 示例代码

下面是一个完整的示例代码，演示了如何使用 Array.prototype.includes() 方法实现数组元素包含判断：

// javascriptcn.com 代码示例
const arr = [1, NaN, 3];

// 判断数组中是否包含元素 1
const isExist1 = arr.includes(1);
console.log(isExist1); // 输出 true

// 判断数组中是否包含元素 NaN
const isExist2 = arr.includes(NaN);
console.log(isExist2); // 输出 true

// 判断数组中是否包含元素 4
const isExist3 = arr.includes(4);
console.log(isExist3); // 输出 false

4. 总结

使用 ECMAScript 2017 的 Array.prototype.includes() 方法可以更加方便地实现 JavaScript 中的数组元素包含判断。虽然以前的 Array.prototype.indexOf() 方法也能实现相同的功能，但是在一些特殊情况下会出现问题。同时，Array.prototype.includes() 方法还可以帮助我们避免手动判断返回值是否为 -1 和解决 NaN 元素判断的问题，使代码更加简洁易懂。

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