在 JavaScript 中，数组是非常常见的数据结构。在前端开发中，我们经常需要对数组进行遍历操作。而在 ES8 中，出现了两个新的数组方法：Array.prototype.find() 和 Array.prototype.findIndex()。这两个方法可以帮助我们更加方便和高效地进行数组遍历操作。本文将详细介绍这两个方法的使用及其解决问题的能力。
Array.prototype.find()
Array.prototype.find() 方法用于查找数组中符合条件的第一个元素，并返回该元素。其语法如下：
arr.find(callback[, thisArg])
其中，callback 是一个回调函数，用于对数组中的每个元素进行判断，如果返回值为 true，则该元素将作为 find() 方法的返回值返回；否则，该函数继续对下一个元素进行判断。如果整个数组都没有符合条件的元素，则返回 undefined。
举个例子，在一个包含多个对象的数组中，我们想要找到符合条件的第一个对象，并返回该对象的姓名属性。可以使用如下代码：
-- -------------------- ---- ------- ----- ------- - - - ----- ------ ---- --- ------- ------ -- - ----- -------- ---- --- ------- -------- -- - ----- ------ ---- --- ------- ------ -- - ----- ------- ---- --- ------- ------ -- - ----- ------ ---- --- ------- -------- - -- ----- ------ - ---------------- -- ----- - -- -- -------- --- ---------- -- -------- - ------------------------- -- -- ----- - ---- - ------------------------- -
运行结果为：输出 'Eva'。
Array.prototype.findIndex()
Array.prototype.findIndex() 方法与 find() 方法类似，不同之处在于它返回符合条件的元素在数组中的位置（下标）。其语法如下：
arr.findIndex(callback[, thisArg])
其中，callback 也是一个回调函数，其返回值为符合条件的元素在数组中的位置，如果整个数组中都没有符合条件的元素，则返回 -1。
下面是一个示例代码，使用 findIndex() 方法查找数组中第一个年龄大于 25 的人员，并返回该人员的下标值：
-- -------------------- ---- ------- ----- ------- - - - ----- ------ ---- --- ------- ------ -- - ----- -------- ---- --- ------- -------- -- - ----- ------ ---- --- ------- ------ -- - ----- ------- ---- --- ------- ------ -- - ----- ------ ---- --- ------- -------- - -- ----- ----- - --------------------- -- ----- - ---- -- ------ --- --- - -------------------- -- ------- ----------- -- -- -------- -- ------- -- - ---- - ------------------------- -
运行结果为：输出 '第一个年龄大于 25 的人员的下标是 3'。
总结
通过本文，我们了解了使用 ES8 中的 Array.prototype.find() 和 Array.prototype.findIndex() 方法解决 JavaScript 数组遍历问题的方法及示例代码。使用这两个方法可以让我们更加方便和高效地对数组进行遍历，从而提高代码的可读性和可维护性。因此，在日常的前端开发中，建议我们多加使用这两个方法，从而优化我们的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a1efacadd4f0e0ffa05c27