ES2016：理解 Array.includes() 实现原理及使用技巧
在ES2016（也被称为ES7）的新特性中，引入了一个新的 Array.includes() 方法，用于判断数组是否包含指定的元素。这是一个非常方便的新特性，因为以前我们需要使用indexOf()方法来检测数组中是否包含某个元素。
本文将介绍Array.includes()的实现原理、使用技巧以及在项目中的应用。
Array.includes() 的实现原理
Array.includes() 方法是ES7的新特性之一，其主要作用是判断一个数组是否包含指定的元素。这个方法只需要一个参数，即要搜索的元素，若数组中包含指定元素，则返回true；若不包含，则返回false。
该方法的实现原理非常简单，我们可以使用ECMAScript6正式定义的迭代器来实现该方法。它会依次遍历数组中的每个元素，比较与指定的值是否相等，若相等则直接返回true。
代码实现如下：
------------------------ - ----------------------- --------- - -- -
----- --- - ------------
--- - - --------- - - - --------- - --------- - ----
------- - ---- -
---------- --- -------------- -
------ -----
-
----
-
------ ------
-需要注意的是，如果参数fromIndex小于0，则会从数组的结尾往前搜索，也就是说，如果fromIndex传递了一个负数，它的值就是-1，那么includes()内部扫描的起始位置就是length-1。
Array.includes() 的使用技巧
在使用Array.includes()方法时，很多开发者可能会遇到以下三个问题：
- 如何判断数组中是否存在NaN？
Array.includes()方法的优势之一就是能够针对NaN的比较，因为在JS中NaN是比较特殊的，它与任何值都不相等，包括它本身。
比如：
----- --- - --- -- ----- ------------------------------- -- ----
但如果我们只是在数组里面检查NaN，那么这个方法就没有优势了，因为indexOf方法已经可以检查NaN了。
- 如何比较引用类型数据是否相等？
对于引用类型的数据，在数组中存储的仅仅是这个变量的引用值，而不是它实际的值。
下面的例子可以说明这个问题：
----- -- - ------ ------- ----- -- - ------ ------- ----- --- - ----- ----------------------------- -- -----
上述代码中，数组包含o1引用值，而不是o1本身的值。因为o1和o2的引用地址不同，所以即使它们具有相同的值，includes()方法也会返回false。
所以在这种情况下，使用includes()方法进行比较时，需要先将每个元素都序列化成字符串，再进行比较，如下所示：
----- -- - ------ ------- ----- -- - ------ ------- ----- --- - ----- ------------------------------------------------------------------ -- ----
- 如何判断空数组？
当空数组使用includes()时，会返回false，因为数组中没有元素。而许多开发者却喜欢使用语法糖，直接在数组上进行操作，如下所示：
-- --------------------------------
------------------------ -
-- --- -- ---------
-我们需要小心处理，因为这种写法可能会在包含undefined的数组内出现错误，要避免使用。正确的方法应该是：
--------------------- -- ---------------------- -
-- --- -- ---------
-Array.includes() 的应用场景
Array.includes()可以用于很多场景，例如：
- 判断一个数组是否存在某个元素
这是Array.includes()的最常见使用场景，如下所示：
----- --- - --- -- -- -- --- ----------------------------- -- ----
- 从一个数组中排除某些元素
有时候在一个数组中，我们需要过滤掉一些元素。我们可以使用Array.filter()方法，或者Array.includes()方法。
下面的例子中是使用Array.includes()方法：
----- --- - --- -- -- -- --- ----- ------ - -------------- -- ------------------- -- --------------- ------------------- -- --- -- -- -- --
- 判断字符串是否包含某个子串
可以使用Array.includes()方法轻松地判断一个字符串是否包含另一个字符串。由于字符串可以通过split()方法分割成一个字符数组，所以我们可以使用Array.includes()来判断一个字符串是否包含另一个字符串。
例如：
----- --- - ------ ------- ---------------------------------------- -- ---- ---------------------------------------- -- -----
- 判断一个元素是否为空
如果某个元素可能是空值，我们可以使用Array.includes()方法来判断，如下所示：
----- --- - ---- ----- ---------- -----------
-------------------- -
---------------- -------- ----- ---------
-
---------------------- -
---------------- -------- -------
-
--------------------------- -
---------------- -------- ------------
-总结
在本文中，我们了解了Array.includes()的实现原理、使用技巧以及在项目中的应用。Array.includes()是一个非常简单和实用的方法，它可以用于检测数组中是否包含指定元素，简单易用，提高了代码的可读性。同时，我们也学会了避免可能会产生的一些错误情况，并在实践中掌握了其使用技巧。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64f6b962f6b2d6eab3f46560