array.prototype.indexOf() vs. array.prototype.includes()

在 JavaScript 中,数组是一个重要的数据类型,而数组方法则是我们日常工作中经常使用的工具。其中 indexOf()includes() 是两个常用的数组方法,它们都可以在数组中查找指定的元素。但是它们有什么区别呢?

array.prototype.indexOf()

indexOf() 方法返回数组中某个指定元素第一次出现的位置,如果没有找到该元素,则返回 -1 。其语法如下:

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

其中,searchElement 是要查找的元素,fromIndex (可选)是开始查找的索引位置,默认值为 0。

例如,我们有以下数组:

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

我们可以使用 indexOf() 方法查找 'banana' 元素的位置:

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

如果我们要查找的元素不在数组中,则返回 -1:

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

array.prototype.includes()

includes() 方法判断数组是否包含某个指定的元素,如果包含,则返回 true,否则返回 false。其语法如下:

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

其中,searchElement 是要查找的元素,fromIndex (可选)是开始查找的索引位置,默认值为 0。

例如,我们有以下数组:

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

我们可以使用 includes() 方法判断数组中是否包含元素 2

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

如果我们要查找的元素不在数组中,则返回 false

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

区别与应用

indexOf()includes() 方法的最大区别在于返回值。indexOf() 返回元素在数组中第一次出现的位置,而 includes() 只返回一个布尔值。

在实际开发中,如果我们只是想判断一个元素是否存在于数组中,并不关心它在哪个位置,那么就应该使用 includes() 方法。例如,下面的代码使用了 includes() 方法来判断一个用户名是否已经存在于用户列表中:

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

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

而如果我们需要知道一个元素在数组中的位置,那么就应该使用 indexOf() 方法。例如,下面的代码使用了 indexOf() 方法来获取一个员工的工资等级:

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

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

综上所述,indexOf()includes() 方法在实际应用中有着不同的使用场景。我们需要根据具体的需求来选择使用它们。

总结

  • indexOf() 方法返回元素在数组中第一次出现的位置,如果没有找到则返回 -1。
  • includes() 方法判断一个元素是否存在于数组中,返回布尔值 true 或 false。
  • 在实际开发中,应该根据实际需求选择使用 indexOf()includes() 方法。

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/24049