在前端开发中，我们经常需要对数组进行操作。而其中一个常用的方法就是查找数组中是否包含某个元素。在 ES5 中，我们可以使用 indexOf 方法来实现这个功能。但是，indexOf 方法有一些限制，可能会遇到一些问题。在 ES7 中，新增了 Array.prototype.includes 方法，可以解决这些问题。本文将介绍如何使用 Array.prototype.includes 方法，以及它的优点和使用注意事项。
indexOf 方法的问题
indexOf 方法用于查找数组中某个元素的位置。如果找到了，就返回该元素的下标；如果没有找到，就返回 -1。例如：
----- --- - --- -- -- -- --- ----- ----- - --------------- -- -
但是，indexOf 方法存在以下几个问题：
- 不支持查找 NaN
indexOf 方法无法正确查找 NaN。因为 NaN 不等于任何值，包括它本身。例如：
----- --- - ------ ----- ----- - ----------------- -- --
- 不支持查找 undefined
indexOf 方法无法正确查找 undefined。因为 undefined 不是一个常量，而是一个全局变量，可能被修改。例如：
----- --- - ------------ ----- ----- - ----------------------- -- -
但是，如果修改了 undefined，就无法正确查找了。例如：
--------- - -------- ----- --- - ------------ ----- ----- - ----------------------- -- --
- 不支持查找对象
indexOf 方法无法正确查找对象。因为对象在比较时，比较的是引用地址，而不是值。例如：
----- --- - - ----- ------- -- ----- --- - ------ ----- ----- - ------------- ----- ------- --- -- --
- 不支持查找数组
indexOf 方法无法正确查找数组。因为数组在比较时，比较的是引用地址，而不是值。例如：
----- ---- - --- -- --- ----- ---- - --- -- --- ----- --- - ------- ----- ----- - ------------------ -- --
Array.prototype.includes 方法的优点
ES7 新增了 Array.prototype.includes 方法，用于查找数组中是否包含某个元素。与 indexOf 方法相比，Array.prototype.includes 方法有以下优点：
- 支持查找 NaN
Array.prototype.includes 方法可以正确查找 NaN。例如：
----- --- - ------ ----- ------ - ------------------ -- ----
- 支持查找 undefined
Array.prototype.includes 方法可以正确查找 undefined。例如：
----- --- - ------------ ----- ------------ - ------------------------ -- ----
- 支持查找对象
Array.prototype.includes 方法可以正确查找对象。例如：
----- --- - - ----- ------- -- ----- --- - ------ ----- ------ - ------------------ -- ----
- 支持查找数组
Array.prototype.includes 方法可以正确查找数组。例如：
----- ---- - --- -- --- ----- ---- - --- -- --- ----- --- - ------- ----- ------ - ------------------- -- -----
使用 Array.prototype.includes 方法
Array.prototype.includes 方法的使用方法与 indexOf 方法相似。例如：
----- --- - --- -- -- -- --- ----- ---- - ---------------- -- ----
Array.prototype.includes 方法的语法如下：
---------------------------- -----------
其中，searchElement 参数是要查找的元素，fromIndex 参数是开始查找的位置。如果省略 fromIndex 参数，则从数组的开头开始查找。
例如：
----- --- - --- -- -- -- --- ----- ---- - --------------- --- -- ----
注意事项
在使用 Array.prototype.includes 方法时，需要注意以下几点：
- 兼容性问题
Array.prototype.includes 方法是 ES7 中新增的方法，不是所有的浏览器都支持。但是，你可以使用 polyfill 或者 babel 编译器来解决兼容性问题。例如：
-- --------------------------- -
------------------------ - ---------------------- --- ------------ -
---- --------
--- - - -------------
--- --- - ------------------ -- --
-- ---- --- -- -
------ ------
-
--- - - ---------------------- -- --
--- --
-- -- -- -- -
- - --
- ---- -
- - --- - --
-- -- - -- -- - ---
-
--- ---------------
----- -- - ---- -
-------------- - -----
-- -------------- --- -------------- --
-------------- --- ------------- -- -------------- --- ---------------- -
------ -----
-
----
-
------ ------
--
-- 与其他方法的区别
Array.prototype.includes 方法与其他方法的区别可能会导致一些问题。例如，Array.prototype.includes 方法与 Array.prototype.indexOf 方法的区别是，includes 方法可以正确查找 NaN，而 indexOf 方法不能。因此，在使用 includes 方法时，需要注意与其他方法的区别。
示例代码
下面是一个使用 Array.prototype.includes 方法的示例代码：
-- --------------------------- -
------------------------ - ---------------------- --- ------------ -
---- --------
--- - - -------------
--- --- - ------------------ -- --
-- ---- --- -- -
------ ------
-
--- - - ---------------------- -- --
--- --
-- -- -- -- -
- - --
- ---- -
- - --- - --
-- -- - -- -- - ---
-
--- ---------------
----- -- - ---- -
-------------- - -----
-- -------------- --- -------------- --
-------------- --- ------------- -- -------------- --- ---------------- -
------ -----
-
----
-
------ ------
--
-
----- --- - --- -- -- -- ---
----------------------------- -- ----
----------------------------- -- -----
----- ---- - ------
-------------------------------- -- ----
----- --- - - ----- ------- --
----- ---- - ------
--------------------------- ----- ------- ---- -- -----
-------------------------------- -- ----总结
在前端开发中，使用 Array.prototype.includes 方法可以避免 indexOf 方法的一些限制，例如无法正确查找 NaN、undefined、对象和数组。但是，在使用 Array.prototype.includes 方法时，需要注意兼容性问题和与其他方法的区别。希望本文对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/660ca482d10417a222ced12c