在 JavaScript 编程中，处理数组是一项经常发生的任务。当我们需要查找数组元素时，可以使用 JavaScript 语言自带的 Array.prototype.find 方法和 Array.prototype.findIndex 方法。这两个方法都是 ES7 标准中新增的，可以帮助我们更轻松地查找数组元素。在本文中，我们将会详细介绍这两个方法的用法和示例代码，并提供一些指导意义。
Array.prototype.find 方法
Array.prototype.find 方法接收一个回调函数作为参数，该回调函数包含以下参数：
- item：数组中的当前元素。
- index：数组中的当前索引。
- array：原始数组。
该方法会遍历整个数组并执行回调函数，当回调返回值为 true 时，该方法会返回当前元素，并且会停止遍历。
下面是一个使用 Array.prototype.find 方法快速查找数组元素的示例：
-- -------------------- ---- ------- ----- ----- - - - --- -- ----- -------- ------ - -- - --- -- ----- --------- ------ - -- - --- -- ----- --------- ------ - - -- ----- ------ - ----------------- -- - ------ ---------- --- -- --- -------------------- -- - --- -- ----- --------- ------ - -
在这个示例中，我们通过回调函数来查找数组中价格为 2 的元素。该方法返回了一个包含 id、name 和 price 属性的对象。
需要注意的是，Array.prototype.find 方法只会返回第一个满足条件的元素。如果不存在满足条件的元素，该方法将返回 undefined。
Array.prototype.findIndex 方法
与 Array.prototype.find 方法类似，Array.prototype.findIndex 方法也接收一个回调函数作为参数。该回调函数与 Array.prototype.find 方法的回调函数相同，都包含以下参数：
- item：数组中的当前元素。
- index：数组中的当前索引。
- array：原始数组。
不同之处在于，Array.prototype.findIndex 方法返回满足条件的元素的索引值，而不是元素本身。
下面是一个使用 Array.prototype.findIndex 方法快速查找数组元素的示例：
-- -------------------- ---- ------- ----- ----- - - - --- -- ----- -------- ------ - -- - --- -- ----- --------- ------ - -- - --- -- ----- --------- ------ - - -- ----- ------ - ---------------------- -- - ------ ---------- --- -- --- -------------------- -- -
在这个示例中，我们通过回调函数来查找数组中价格为 2 的元素的索引值。该方法返回了 1，因为元素 { id: 2, name: 'Banana', price: 2 } 在数组中的索引为 1。
需要注意的是，如果不存在满足条件的元素，Array.prototype.findIndex 方法将返回 -1。
注意事项
在使用 Array.prototype.find 和 Array.prototype.findIndex 方法时，需要注意以下几点：
- 以上两个方法都会接收一个回调函数作为参数，所以回调函数的性能对数组查找效率有很大的影响。
- 回调函数应该返回 true 或 false，表示是否满足查找条件。如果回调函数返回值即不是 true 也不是 false，Array.prototype.find 和 Array.prototype.findIndex 方法都将抛出异常。
- 如果数组中有多个满足条件的元素，Array.prototype.find 方法只会返回第一个满足条件的元素。
- 如果数组中有多个满足条件的元素，Array.prototype.findIndex 方法返回其中任意一个元素的索引。
总结
使用 ES7 中的 Array.prototype.find 和 Array.prototype.findIndex 方法，可以更快速地查找数组元素。回调函数的性能对数组查找效率有很大的影响，因此需要慎重考虑回调函数的复杂度。如果需要查找的元素可能存在多个，应该使用 Array.prototype.filter 方法，而不是 Array.prototype.find 方法。在实际开发中，应该根据具体情况选择最适合的方式来处理数组元素的查找。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d25534b5eee0b5259b63ab