在前端开发中，我们经常需要对数组进行操作，查找某个元素是其中比较常见的操作之一。ES7 引入了 Array.prototype.find 和 Array.prototype.findIndex 方法，让数组的查找操作变得更加方便和高效。本文将详细介绍这两个方法的使用，帮助读者掌握它们的实践技巧。
Array.prototype.find
Array.prototype.find 方法用于查找数组中符合条件的第一个元素，并返回该元素的值。其语法如下：
array.find(function(item, index, array) {
// 返回一个布尔值，表示当前元素是否符合条件
});其中，第一个参数为一个函数，该函数接收三个参数：
- item：当前元素的值。
- index：当前元素的索引。
- array：当前数组。
该函数需要返回一个布尔值，表示当前元素是否符合条件。如果符合条件，则返回该元素的值，否则返回 undefined。
下面是一个示例代码：
const arr = [1, 2, 3, 4, 5]; const result = arr.find((item) => item > 3); console.log(result); // 4
上面的代码中，我们定义了一个数组 arr，然后使用 find 方法查找第一个值大于 3 的元素。由于数组中有符合条件的元素 4，因此返回该元素的值。
需要注意的是，如果数组中没有符合条件的元素，则返回 undefined。
Array.prototype.findIndex
Array.prototype.findIndex 方法与 Array.prototype.find 方法类似，用于查找数组中符合条件的第一个元素，并返回该元素的索引。其语法如下：
array.findIndex(function(item, index, array) {
// 返回一个布尔值，表示当前元素是否符合条件
});其中，第一个参数为一个函数，该函数的参数与 Array.prototype.find 方法的参数相同。该函数需要返回一个布尔值，表示当前元素是否符合条件。如果符合条件，则返回该元素的索引，否则返回 -1。
下面是一个示例代码：
const arr = [1, 2, 3, 4, 5]; const index = arr.findIndex((item) => item > 3); console.log(index); // 3
上面的代码中，我们定义了一个数组 arr，然后使用 findIndex 方法查找第一个值大于 3 的元素的索引。由于数组中有符合条件的元素 4，因此返回该元素的索引 3。
需要注意的是，如果数组中没有符合条件的元素，则返回 -1。
实践技巧
在实际开发中，我们可以结合其他方法来使用 Array.prototype.find 和 Array.prototype.findIndex 方法，以更好地实现需求。
使用 Array.prototype.find 实现查找对象数组中的元素
在对象数组中查找符合条件的元素，可以结合 Array.prototype.find 方法和箭头函数来实现。例如，我们有一个对象数组，每个对象都有一个 id 属性，我们需要查找 id 为 2 的元素。
-- -------------------- ---- ------- ----- --- - - - --- -- ----- ------ -- - --- -- ----- ------ -- - --- -- ----- ----- - -- ----- ------ - --------------- -- ------- --- --- -------------------- -- - --- -- ----- ------ -
上面的代码中，我们使用箭头函数来查找 id 等于 2 的元素。由于数组中有符合条件的元素，因此返回该元素的值。
使用 Array.prototype.findIndex 实现删除数组中的元素
在数组中删除符合条件的元素，可以结合 Array.prototype.findIndex 方法和 Array.prototype.splice 方法来实现。例如，我们有一个数组，需要删除值为 3 的元素。
const arr = [1, 2, 3, 4, 5];
const index = arr.findIndex((item) => item === 3);
if (index !== -1) {
arr.splice(index, 1);
}
console.log(arr); // [1, 2, 4, 5]上面的代码中，我们使用 findIndex 方法查找值为 3 的元素的索引，如果找到了，则使用 splice 方法删除该元素。最终，数组中的值为 3 的元素被删除了。
总结
本文介绍了 ES7 中 Array.prototype.find 和 Array.prototype.findIndex 方法的使用。通过本文的学习，读者可以掌握这两个方法的实践技巧，从而更好地应用它们来解决实际开发中的问题。在使用这两个方法时，需要注意返回值的类型以及数组中是否存在符合条件的元素，以避免出现不必要的错误。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6618a6dbd10417a2228f82b6
