在前端开发中，我们经常需要在数组中查找元素。如果使用传统的 for 循环或 indexOf 方法，可能会导致性能很低。但是，ES7 提供了一个新的方法：Array.prototype.includes，它可以大大优化数组元素查找的性能表现。
Array.prototype.includes 方法的介绍
Array.prototype.includes 是 ES7 中引入的新方法，它可以返回一个布尔值，指示数组中是否包含一个指定的元素。和 indexOf 方法不同的是，includes 方法可以判断 NaN。
const arr = [1, 2, NaN]; console.log(arr.includes(1)); // true console.log(arr.includes(NaN)); // true console.log(arr.indexOf(NaN)); // -1
传统的查找方式的性能问题
在使用传统的 for 循环或 indexOf 方法查找数组元素时，可能会出现性能问题。
-- -------------------- ---- -------
----- --- - --- -- -- -- ---
-- --- --- --
--- ---- - - -- - - ----------- ---- -
-- ------- --- -- -
----------------------
------
-
-
-- ------- --
-- --------------- --- --- -
----------------------
-当数组很大时，这种查找方式可能会变得很慢。因为，在 for 循环中，每次都需要访问数组的 length 属性，并且需要进行元素比较。而在 indexOf 方法中，也需要遍历数组并进行元素比较。
使用 includes 方法优化查找性能
相比于传统的查找方式，Array.prototype.includes 方法执行起来要快得多，特别是在处理大型数组时。
const arr = [1, 2, 3, 4, 5];
if (arr.includes(3)) {
console.log("Found!");
}接下来，我们通过一个简单的性能测试来比较 includes 方法和传统方式的查找性能。
-- -------------------- ---- -------
----- --- - --- ---------------------------- -- ---------------
-------------------------
------------------
----------------------------
----------------- -------
--- ----- - ------
--- ---- - - -- - - ----------- ---- -
-- ------- --- ---- -
----- - -----
------
-
-
-------------------- -------
------------------------
---------------- --- ---
---------------------------输出结果表明，使用 includes 方法比传统方式查找元素的性能要好很多。
includes: 0.142ms for loop: 2.626ms indexOf: 2.587ms
总结
通过使用 ES7 中引入的 Array.prototype.includes 方法，我们可以优化数组元素查找的性能表现。使用 includes 方法可以使代码更简单清晰，并且避免了传统查找方式可能出现的性能问题。如果你常常在数组中查找元素，那么使用 includes 方法将会是一个很好的选择。
希望本文可以为初学者提供一些指导，同时也可以帮助有一定经验的前端开发者优化自己的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d2ebbd0869a45d4062402c