如今的 JavaScript 语言已经非常强大，并且在持续的演进和进化。ES2016, 也就是 ES7, 是 JavaScript 下一代的规范。其中 Array.prototype.includes() 是 ES7 中一个非常有用的新增方法。本文将深入学习 ES7 Array.prototype.includes() 方法的原理，希望能够帮助读者掌握 Array.includes() 方法，提升代码的效率和质量。
Array.prototype.includes() 介绍
Array.prototype.includes() 是一个非常实用的方法，它用于判断一个数组是否包含某个元素（包括 NaN）。它会返回一个布尔值，如果数组中包含该元素，返回 true，否则返回 false。这与 indexOf 方法相比，有许多的优点。
如果你之前熟悉了 indexOf 方法，你会感受到 Array.prototype.includes() 方法的便捷和直观。函数签名如下：
---------------------------- -----------
Array.prototype.includes() 实现的原理
我们来看看 Array.prototype.includes() 方法实现的原理。它是如何判断一个数组是否包含某个元素的？
实际上，Array.prototype.includes() 方法内部并没有使用循环来遍历整个数组，而是通过 some() 方法结合 Object.is() 方法，一次性内部实现。
------------------------ - -------- --------------------- ---------- -
-- ----- --- --------- -- ---- --- ----- -
----- --- ----------------- ------- ---- ----- -- ---------
-
--- - - -------------
--- --- - -------- --- --
-- ---- --- -- -
------ ------
-
--- - - --------- - --------- - - - --
--- - - ---------- -- - - - - --- - ------------ ---
----- -- - ---- -
-- ----------------------- ------ -
------ -----
-
----
-
------ ------
--以上是原生 Array.prototype.includes() 方法的源码，我们来一步步解释每一行代码：
第 1 行
这是一个内置方法，所有的数组都会继承该方法。该方法的函数名称为 includes，它接收 valueToFind 和 fromIndex 两个参数。
第 2 - 5 行
其中 this 代表数组本身。如果数组本身是 undefined 或者是 null，将会抛出一个类型异常。可以这样写：
--- --- - --- -- --- ------------------------ -- ---------- ------ ------- ---- ----- -- ------
第 6 行
o 代表的是目标数组。我们需要使用 Object() 将数组转化为对象。
第 7 行
len 变量存储数组的长度。当 len 为 0 时，表示数组为空，直接返回 false 即可。
第 8 - 10 行
n 表示开始查找的位置，我们只有传递了有效的 fromIndex 参数这个值才会有意义。k 将会被赋值为 n。若从该索引值开始没有找到匹配值，那么返回 false。
第 12 - 17 行
该部分是重点！当 k >= len 时，表示我们已经完成了搜索，跳出遍历，返回 false。
有趣的是：单行 (this.length >>> 0) ,是为了确保 len 始终是整数，取值范围在 2^32-1 之内。当然，也可以使用 parseInt(this.length, 32)。
这其中，Math.abs(n) 只是在你传入的数字为负值时，转化为正整数所使用。
第 19 - 22 行
最后，使用 while 循环，一次次找 valueToFind 在数组中的位置，每次查找时，我们使用 Object.is() 方法去实现值的比较。
Object.is() 方法的作用是用来比较两个值是否相等，与 === 不同的是，Object.is(NaN, NaN) 为 true，则需要它来判断是否相等。
最终，如果目标数组中找到匹配值，返回 true，否则返回 false。
Array.prototype.includes() 方法的示例
下面我们通过一些示例，深入理解 Array.prototype.includes() 方法的使用。
--- --- - --- -- -- ---- ---------- ---- ----------------------------- -- ---- ----------------------------- -- ----- ------------------------------- -- ---- --------------- --- ----- -- ----- -------------------------- ------ -- ---- ------------------------------------- -- ---- ------------------------------ -- ----
从上面的例子可以看出，Array.prototype.includes() 方法可以很好地处理 NaN 和 undefined 这些边缘情况。值得一提的是，同很多内置类型一样，Array.prototype.includes() 方法也是一个方法。你可以像其他函数一样调用它，也可以使用 call 和 apply。此外，第二个参数还可以接收负数数值。
--- --- - ----- ---- ----- ----------------------------- ---- -- ----- ----------------------------- ----- -- -----
总结
在这篇文章中，我们详细的学习了 ES7 中 Array.prototype.includes() 方法的源码，为什么它比之前的 indexOf 方法更加方便，以及如何正确使用它。这篇文章附带了一些有趣的示例，这有助于我们更好的理解 Array.prototype.includes() 方法，以及如何在开发中正确使用它。在以后的开发中，努力利用这个新函数，让你的代码更简单、更高效。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64a9bd0b48841e98945dc98f