在 ES8 中使用 Array.find 和 Array.findIndex 方法查找数组元素

阅读时长 4 分钟读完

在 JavaScript 中,我们经常需要查找数组中的某个元素。ES8 中引入了两种新的方法:Array.find()Array.findIndex(),它们可以方便地查找数组中特定的元素。

Array.find()

Array.find() 方法返回数组中第一个满足给定测试函数的元素的值。如果没有符合条件的元素,则返回 undefined。其语法如下:

其中,callback 是用来测试每个元素的函数,接受三个参数:element 表示当前元素,index 表示当前索引,array 表示数组本身。如果该函数返回一个真值,则 find() 方法会返回符合条件的元素,否则返回 undefined

下面是一个使用 Array.find() 方法的示例:

在上面的示例中,callback 函数测试每个元素是否大于 1。由于 2 是满足条件的第一个元素,因此 find() 方法返回 2。

Array.findIndex()

Array.findIndex() 方法返回数组中第一个满足给定测试函数的元素的索引。如果没有符合条件的元素,则返回 -1。其语法如下:

其中,callback 的参数与 Array.find() 的参数相同。在测试函数返回真值时,findIndex() 将返回元素的索引。如果没有匹配的元素,它将返回 -1。

下面是一个使用 Array.findIndex() 方法的示例:

在上面的示例中,callback 函数测试每个元素是否大于 1。由于 2 是满足条件的第一个元素,因此 findIndex() 方法返回 1。

需要注意的是,这两个方法都是 ES8 中引入的,因此需要在支持 ES8 的 JavaScript 环境中使用。

实例

下面是一个结合 Array.find()Array.findIndex() 的示例,演示了如何使用这两个方法来获取数组中满足特定条件的第一个元素和其索引:

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

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

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

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

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

在上面的示例中,我们定义了一个用户数组 users,其中包含了多个对象,每个对象都有一个 idname 属性。我们使用 Array.find() 方法来查找名字为 "Charlie" 的用户,并将其保存在名为 targetUser 的变量中。此外,我们还使用 Array.findIndex() 方法来查找名字为 "Charlie" 的用户,并将其索引保存在名为 targetIndex 的变量中。

总结

Array.find()Array.findIndex() 方法是在 ES8 中引入的,它们可以方便地查找数组中特定的元素。这两个方法接受一个回调函数作为参数,在回调函数中可以对每个元素进行判断。如果符合条件,则 Array.find() 返回第一个符合条件的元素,Array.findIndex() 返回第一个符合条件元素的索引。

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

纠错
反馈