ES7 新增的 Array.prototype.includes 方法解决了什么问题?

阅读时长 4 分钟读完

在 JavaScript 开发中,数组是非常常用的一种数据类型。在 ES7 (ECMAScript 7)中,新增了 Array.prototype.includes 方法,为开发者带来了更加便捷的数组查找功能。本文将详细介绍这个方法,并通过示例代码来说明它能够解决的问题以及使用方法。

Array.prototype.includes 方法的介绍

Array.prototype.includes 方法用于判断当前数组中是否包含指定的元素,并返回一个布尔值表示结果。它的语法如下:

其中,

  • searchElement:必需,要查找的元素值。
  • fromIndex:可选,从该索引位置开始查找 searchElement。如果 fromIndex 大于等于数组长度,则返回 false。

返回值为布尔值,表示是否找到指定的元素。

Array.prototype.includes 方法能够解决的问题

在 ES7 之前,开发者需要使用 indexOf 方法或者 find 方法来查找数组中是否包含指定的元素。但是,这两种方法在实际使用中存在一些不便。具体来说,包含以下几个方面:

  1. indexOf 方法返回的是找到的元素的索引,如果没有找到则返回 -1。而在一些情况下,开发者需要的仅仅是一个简单的布尔值,来表示数组中是否包含指定的元素。这时候,indexOf 方法的返回值显然不太方便。
  2. find 方法需要传入一个回调函数,用于判断数组的每个元素是否满足某个条件。在实际开发中,有时候只需要判断该元素是否在数组中存在,这时候使用 find 方法就显得比较繁琐了。
  3. find 方法虽然支持返回布尔值,但是它是通过传入的回调函数中进行判断的,容易读懂但不太直观。而 includes 方法则是最为直接的判断方式,几乎所有开发者都能够轻松看懂代码的意思。

综上所述,Array.prototype.includes 方法的出现,使得数组中是否包含指定元素的判断更加方便、直观,减少了开发者的编码时间和思维负担。

Array.prototype.includes 方法在实际开发中的使用

下面是 Array.prototype.includes 方法的一些使用方法和实现:

-- -------------------- ---- -------
----- --- - --- -- -- -- ---

-- -- -
-- ----------------- -
  ------------------ ----
-

-- -- -
----- ------ - ----------------
-------------------- ---- -------- -- -----

-- -- -
----- -------- - --------- --------- ----------
-- ----------------------------- -
  -----------------------
-

-- -- -
-- ---------------------------- -
  -----------------------
- ---- -
  ------------------------
-

-- -- -
----- ------ - --- -- -- -----
---------------------------------- -- ----

上面示例中:

  • 示例 1 直接使用了 includes 方法判断数组中是否包含元素 2。
  • 示例 2 将 includes 方法的返回值保存在变量中,并输出其结果。
  • 示例 3 和示例 4 主要介绍了 includes 方法的字符串匹配功能,区别在于是否查找到指定元素。
  • 示例 5 展示了 includes 方法在查找 NaN 元素时有一些特殊的使用方式。

需要注意的是,includes 方法只是判断数组中是否有指定的元素,而不关心元素的值。这意味着当数组中包含 NaN 元素时,需要使用 arr.includes(NaN) 的方式来判断是否存在 NaN。否则,直接使用 arr.includes(undefined) 来查找 NaN 时会返回错误的结果。

总结

本文介绍了 ES7 新增的 Array.prototype.includes 方法并说明其在实际开发中的作用和使用方式。使用 includes 方法可以更加方便地判断数组中是否包含指定的元素,减少了开发者的编码时间和思维负担。同时,需要注意使用 includes 方法的一些特殊情况,如查找 NaN 元素等。

希望本文能够给各位读者带来一些启示和指导,使得在实际开发过程中能够更好地使用 JavaScript 和 ES7 新增的功能。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64d1f3c1b5eee0b52594d4d1

纠错
反馈