在前端开发中，我们经常需要对数组进行操作。数组是一种非常常见的数据结构，它可以存储多个元素，并且可以通过索引来访问和修改这些元素。在 JavaScript 中，数组是一种非常重要的数据类型，它提供了很多有用的方法来操作数组。在 ES6 中，我们引入了一些新的数组方法，如 Array.from() 和 Array.of()。而在 ES8 中，我们又引入了一个新的数组方法，即 Array.prototype.includes()。
什么是 Array.prototype.includes()？
Array.prototype.includes() 是 ES8 中引入的一个新的数组方法。它用于判断一个数组是否包含某个元素。它的语法如下：
------------------------------ -----------
其中，array 表示要进行判断的数组，searchElement 表示要查找的元素，fromIndex 表示从哪个位置开始查找。如果省略 fromIndex 参数，则默认从数组的开头位置开始查找。
Array.prototype.includes() 方法返回一个布尔值，如果数组包含指定的元素，返回 true，否则返回 false。
Array.prototype.includes() 和 indexOf() 的区别
在 ES6 之前，我们通常使用 indexOf() 方法来判断一个数组是否包含某个元素。例如：
--- --- - --- -- -- -- --- -- --------------- --- --- - ------------------- ---- -
然而，indexOf() 方法有一个很大的缺点，就是它无法判断数组中是否包含 NaN 元素。例如：
--- --- - --- -- ---- -- --- -- ----------------- --- --- - ----------------- --- ----- - ---- - ------------------ --- ----- -
上面的代码会输出 "数组不包含 NaN 元素"，这是因为 indexOf() 方法内部使用的是 === 运算符来比较元素，而 NaN 与任何值都不相等，包括它自己。因此，indexOf() 方法无法准确地判断数组中是否包含 NaN 元素。
相比之下，Array.prototype.includes() 方法可以准确地判断数组中是否包含 NaN 元素。例如：
--- --- - --- -- ---- -- --- -- ------------------- - ----------------- --- ----- - ---- - ------------------ --- ----- -
上面的代码会输出 "数组包含 NaN 元素"，这是因为 Array.prototype.includes() 方法内部使用的是 Object.is() 方法来比较元素，而 Object.is(NaN, NaN) 返回 true，因此可以准确地判断数组中是否包含 NaN 元素。
除了可以准确地判断数组中是否包含 NaN 元素之外，Array.prototype.includes() 方法还有一个优点，就是它的语义更加清晰。例如：
--- --- - --- -- -- -- --- -- ----------------- - ------------------- ---- -
上面的代码可以很清晰地表达我们的意图，即判断数组中是否包含元素 3。相比之下，使用 indexOf() 方法则需要写成下面这样：
--- --- - --- -- -- -- --- -- --------------- --- --- - ------------------- ---- -
这样写虽然也能实现相同的功能，但是语义不够清晰，需要多写一些代码。
如何使用 Array.prototype.includes()？
使用 Array.prototype.includes() 方法非常简单，只需要按照语法格式调用即可。例如：
--- --- - --- -- -- -- --- -- ----------------- - ------------------- ---- -
上面的代码会输出 "数组包含元素 3"，因为数组 arr 中包含元素 3。
需要注意的是，Array.prototype.includes() 方法在判断字符串时是区分大小写的。例如：
--- --- - --------- --------- ---------- -- ----------------------- - -------------------- ---------- - -- ----------------------- - -------------------- ---------- - ---- - --------------------- ---------- -
上面的代码会输出 "数组包含字符串 "apple"" 和 "数组不包含字符串 "Apple""，因为 Array.prototype.includes() 方法在判断字符串时是区分大小写的。
总结
Array.prototype.includes() 是 ES8 中引入的一个新的数组方法，用于判断一个数组是否包含某个元素。与 indexOf() 方法相比，Array.prototype.includes() 方法可以准确地判断数组中是否包含 NaN 元素，而且语义更加清晰。在实际开发中，我们应该尽可能地使用 Array.prototype.includes() 方法来判断数组中是否包含某个元素，以避免 indexOf() 方法的陷阱。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65c751b2add4f0e0ff1681c9