在 JavaScript 的发展历程中，每个新版本都会新增一些特性和方法。ES7 中的 Array.prototype.find 和 Array.prototype.findIndex 也是其中之一。这两个方法可以大大简化数组遍历和查找项的处理，并提高代码的可读性。在此，本文将带您深入了解这两个方法的用法和指导意义。
Array.prototype.find
Array.prototype.find 方法返回数组中满足条件的第一个元素，如果没有找到，则返回 undefined。该方法接受一个函数作为参数，用于定义检查条件。这个函数接受三个参数：当前元素、当前索引和整个数组。通常我们只需要使用第一个参数。
下面是一个查找年龄小于 18 的人的示例：
-- -------------------- ---- ------- ----- ------ - - - ----- -------- ---- -- -- - ----- ------ ---- -- -- - ----- ---------- ---- -- - -- ----- ----------- - ------------------ -- ---------- - ---- ------------------------- -- - ----- -------- ---- -- -
这个示例中，我们定义了一个对象数组 people，然后通过 find 方法查找年龄小于 18 的人。youngPerson 变量将引用找到的第一个人。由于 age 属性小于 18 的人只有 Alice 和 Charlie 两个，因此找到的是 Alice。
注意，该方法返回的是数组中该元素的引用，而不是它的值。如果数组是基本类型的值，则返回的仍然是该值本身。
该方法的语法如下：
Array.prototype.find(callbackfn [, thisArg])
callbackfn：用于测试每个元素的函数。它接收三个参数：当前元素、当前索引和整个数组。它的返回值表示当前元素是否满足条件，一旦返回true，find方法就会返回该元素。thisArg：可选参数，用于在执行callbackfn时绑定this对象。
Array.prototype.findIndex
Array.prototype.findIndex 方法与 Array.prototype.find 方法非常相似，但它返回的是满足条件的元素的索引，而不是元素本身。如果没有找到，则返回 -1。
下面是一个查找在线状态为 false 的用户的示例：
-- -------------------- ---- ------- ----- ----- - - - ----- -------- ------- ---- -- - ----- ------ ------- ----- -- - ----- ---------- ------- ----- - -- ----- ---------------- - -------------------- -- -------------- ------------------------------ -- -
这个示例中，我们定义了一个用户数组 users，然后通过 findIndex 方法查找在线状态为 false 的用户。offlineUserIndex 变量将引用找到的第一个用户的索引。由于 online 属性为 false 的用户有 Bob 和 Charlie，因此找到的是 Bob。
该方法的语法如下：
Array.prototype.findIndex(callbackfn [, thisArg])
callbackfn：用于测试每个元素的函数。它接收三个参数：当前元素、当前索引和整个数组。它的返回值表示当前元素是否满足条件，一旦返回true，findIndex方法就会返回该元素的索引。thisArg：可选参数，用于在执行callbackfn时绑定this对象。
指导意义
Array.prototype.find 和 Array.prototype.findIndex 可以使数组处理和查找更为方便和易读。使用这些方法可以避免使用传统的循环或迭代方法，将代码减少到最少。
这两个方法也使代码更具可读性。通过使用紧凑而简洁的语法，可以更清晰地与其他开发人员和维护人员分享代码。
使用 Array.prototype.find 和 Array.prototype.findIndex 也可以极大地简化重复工作。通过定义一个函数，我们可以在任何时候查找和处理数组的特定元素。这不仅提高了开发的效率，还可以确保不会出现重复代码。
总结
在本文中，我们深入介绍了 ES7 中新增的 Array.prototype.find 和 Array.prototype.findIndex 方法，包括语法、参数以及示例代码。除了简化数组处理和查找，这两个方法还能提高代码的可读性。在实际应用中，我们可以根据具体的需求，灵活使用这两个方法，以提高代码的效率和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ed008ff6b2d6eab37342ac