如何使用 ES8 中的 Array.prototype.includes() 避免 indexOf() 的陷阱?

阅读时长 5 分钟读完

在前端开发中,我们经常需要对数组进行操作。数组是一种非常常见的数据结构,它可以存储多个元素,并且可以通过索引来访问和修改这些元素。在 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

纠错
反馈