在 JavaScript 中，数组是一种重要的数据结构，而数组上的许多方法也是前端开发中经常用到的。ES6 中的数组方法 find 和 findIndex，是较新的两个加入数组 API 中，并且在实际开发中非常有用。在本文中，我们将深入探讨这两个数组方法的解析和使用。
什么是 find 和 findIndex？
find 和 findIndex 是 ES6 中加入 Array 对象 API 的数组方法。它们都是用于数组的查询，并返回匹配的元素，但返回的结果有所不同。
find() 方法返回数组中第一个符合条件的元素（即回调函数返回 true 的元素），如果没有符合条件的元素，则返回 undefined。
findIndex() 方法返回数组中第一个符合条件的元素的索引，如果没有符合条件的元素，则返回 -1。
使用方法
find 和 findIndex 方法的使用方式非常简单。它们都接受一个回调函数作为参数，该回调函数定义了对数组元素的测试，如果该测试返回 true，则返回该元素。例如：
-- -------------------- ---- ------- ----- ----- - --- -- -- -- --- -- ---- ----- ------- - --------------- -- ---- --- --- --------------------- -- - -- --------- ----- ------- - -------------------- -- ---- --- --- --------------------- -- -
在上面的代码示例中，我们定义了一个数组 [1, 2, 3, 4, 5]，然后使用 find 方法和回调函数，查找数组中的数字 3，并将结果打印到控制台中。我们还使用同样的方式使用 findIndex 方法查找 3 的索引值。
需要注意的是，回调函数有三个参数：元素的值、元素的索引、数组本身。而且在回调函数内部，使用 “===” 比较运算符进行元素匹配的操作。
因为 find 和 findIndex 方法都是只返回第一个符合条件的元素或索引，所以如果数组中存在多个符合条件的元素或索引，它们只会返回第一个符合条件的元素或索引。
使用场景
find 和 findIndex 方法在实际开发中非常有用，将它们与其他的数组方法结合使用，可以帮助我们更加便捷技高效地完成代码编写，下面是一些常见的使用场景。
查找第一个符合条件的元素或索引
当我们需要查找数组中第一个符合条件的元素或索引时，find 和 findIndex 方法都非常适合。例如：
-- -------------------- ---- ------- ----- ------ - - - --- -- ----- ------- -- - --- -- ----- ----- -- - --- -- ----- --------- -- - --- -- ----- ------- - -- -- ----- --- --- -- ----- -- - ------------------ -- ----------- --- ---------- ---------------- -- - -- ----- ----- ------ ----- ----- - ----------------------- -- ----------- --- --------- ------------------- -- -
在上面的代码示例中，我们定义了一个包含人员信息的数组 people，然后使用 find 和 findIndex 方法分别查找名字为 Bob 的人的 id 和名字为 David 的人的索引值。
改变数组元素
find 和 findIndex 方法与数组的 map 和 filter 方法结合使用，可以快速高效地对数组进行修改。例如：
-- -------------------- ---- -------
----- ----- - -
- --- -- ----- ------- --
- --- -- ----- ----- --
- --- -- ----- --------- --
- --- -- ----- ------- -
--
-- ---- ------- --- -- -- -
----- -------- - -------------- -- -
-- ---------- --- ---------- -
------- - --
-
------ -----
---
----------------------
--
-
- --- -- ----- ------- --
- --- -- ----- ----- --
- --- -- ----- --------- --
- --- -- ----- ------- -
-
--在上面的代码示例中，我们定义了一个包含用户信息的数组 users，然后使用 map 方法和 find 方法，查找名为 Charlie 的人，并将其 id 修改为 5。
验证数组元素
find 和 findIndex 方法与其他数组方法结合使用，可以方便地在数组中验证元素是否符合条件。例如：
-- -------------------- ---- ------- ----- ----- - - - --- -- ----- -------- ---- -- -- - --- -- ----- ------ ---- -- -- - --- -- ----- ---------- ---- -- -- - --- -- ----- -------- ---- -- - -- -- ------------ -- -- ----- -------- - --------------- -- -------- --- ---- ---------------------- -- ----
上述示例中，我们使用 some 方法和 find 方法，查找数组中是否存在年龄为 20 的人，如果存在，则返回 true。
总结
find 和 findIndex 方法是 ES6 中新加入的数组方法，它们通常用于数组查找，可以非常方便地查找数组中第一个符合条件的元素或索引，也常常与其他数组方法结合使用，用于验证、改变数组元素等操作。掌握这两个方法的使用，对于提升前端开发效率和代码质量具有非常重要的作用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6469c84e968c7c53b099a7d7