在日常的前端开发中，我们经常需要对数组进行查询操作，通常需要使用 Array.prototype.indexOf() 方法。但该方法的缺点是在大数组中查询较慢，而且不能查询 NaN 值。ES7 中新增了 Array.prototype.includes() 方法，可以解决上述问题，同时查询效率更高。
Array.prototype.includes() 方法简介
Array.prototype.includes() 方法用于判断一个数组是否包含某个指定的值，返回值为 true 或 false。方法的基本语法如下：
arr.includes(valueToFind[, fromIndex])
其中，valueToFind 为需要查询的值；fromIndex 为起始查询位置，默认值为 0。
该方法返回值有两种：如果查询到该值，就会返回 true；若没有查询到该值，则返回 false。
而 Array.prototype.indexOf() 方法也可以实现以上功能，语法如下：
arr.indexOf(searchElement[, fromIndex])
二者使用方法的差别：前者直接返回 true/false，后者返回查询到的值在数组中的下标或 -1。
下面来看一个简单的示例：
const arr = [1, 2, 3]; console.log(arr.includes(2)); // true console.log(arr.includes(4)); // false
Array.prototype.includes() 方法的优点
与 Array.prototype.indexOf() 方法相比，Array.prototype.includes() 方法有以下几个优点：
- 查询 NaN 值时返回正确的结果
使用 Array.prototype.indexOf() 方法，查询数组中的 NaN 值时，会返回 -1（即不存在），而查询非 NaN 值时，会将 NaN 当作一个普通值来处理。但使用 Array.prototype.includes() 方法，无论在何种情况下，都会返回正确的结果：
const arr = [1, NaN, 3]; console.log(arr.indexOf(NaN)); // -1 console.log(arr.includes(NaN)); // true
- 查询效率更高
对于大型数组，使用 Array.prototype.includes() 方法来查询值的效率，要比 Array.prototype.indexOf() 要高得多。例如：
-- -------------------- ---- ------- ----- --- - --- ----------------------- -- ---- ------------------------ -------------------- --------------------------- ------------------------- --------------------- ----------------------------
在我的电脑上，Array.prototype.indexOf() 方法平均需要 3 ms 的时间才能完成，而 Array.prototype.includes() 方法则平均只需要 1 ms。
注意事项
需要注意的是，Array.prototype.includes() 方法不能识别数组中的空元素（即值为 undefined），如果数组中存在空元素，记得先将其转换为 null 或其他值。
const arr = [, , 3]; console.log(arr.includes(undefined)); // false
总结
使用 Array.prototype.includes() 方法，可以更高效地查询数组中是否包含某个值，也可以避免 Array.prototype.indexOf() 方法所存在的局限性，同时代码简洁明了。在合适的场景下，建议使用该方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648d8f0048841e9894be2acb