在以前，我们经常使用.indexOf()方法查找一个元素是否存在于一个JavaScript数组中，其返回值为-1表示未找到，否则，返回找到元素的索引位置。但是，该方法有缺点，当处理复杂类型如一个数组包含多个嵌套数组时，会出现错误的行为。
ES8引入了新的数组方法Array.prototype.includes()来解决该问题，并显著提高数组元素查找速度。
Array.prototype.includes() 方法介绍
该方法用于查找一个数组内部是否包含指定元素并返回布尔值(true/false)。其语法如下：
arr.includes(valueToFind[, fromIndex])
参数说明：
valueToFind：要查找的元素值。fromIndex：起始搜索位置（可选，默认为0）。
与 .indexOf() 的区别：
- 对于简单值或字符串类型的数组，两者返回的结果相同。
- 对于复杂值或嵌套类型，
.indexOf()不准确，而includes()能够正确地查找元素。
示例代码如下：
const arr = [1, 2, 3, 4, NaN]; console.log(arr.includes(1)); // true console.log(arr.includes(NaN)); // true console.log(arr.indexOf(NaN)); // -1
使用Array.prototype.includes()方法的优势
简化代码
.includes()可以快速而方便地替换.indexOf()，让代码变得更简单明了，且不必考虑复杂类型的情况。
例如，从给定的数组中删除指定元素可以像这样实现：
-- -------------------- ---- ------- -- ------------- --- ------ - -------------- --- ----- - ------------------ -------- - ---- -------------------- --- - -- -------------- --- ------ - -------------- ----------------------- -------------------------------- -- -展开代码
提高效率
使用新的方法可以显着提高处理大型、嵌套或复杂类型的数组时的性能和效率。当查找的元素存在于数组中，.includes()会比.indexOf()更快。
例如，以下是检查VS Code 的扩展名是否为.md的示例：
-- -------------------- ---- ------- -- -- --------- -- ------------------------------------------ -- ------------ --- ---------------------------- --- --- - --------------------- - -- -- ---------- -- ------------------------------------ -- ---------------------------------------------------- - --------------------- -展开代码
注意事项
需要注意的是，ES8标准仅适用于支持ECMAScript2017规范的最新版浏览器和环境。对于更旧的浏览器，可以使用 polyfill 来模拟该功能。
总结
无论是在代码效率还是代码简洁性方面，使用 Array.prototype.includes()都有着明显的优势。它弥补了.indexOf()方法在查找复杂结构时的不足，可以提高数组元素查找速度，并大力化了代码。如果你习惯使用老旧的方法, 不妨尝试一下 Array.prototype.includes()来改善代码的质量吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651b6edf95b1f8cacd318231
