在 ES7 中使用 Array.prototype.find 和 Array.prototype.findIndex 简化数组查询，避免出错

在 ES7 中使用 Array.prototype.find 和 Array.prototype.findIndex 简化数组查询，避免出错

在前端开发中，我们经常需要对数组进行查询操作。以前我们可能会使用 for 循环或者 Array.prototype.forEach 来遍历数组，然后根据条件来查找符合要求的元素。这种方法虽然可行，但是代码量较大，容易出错。在 ES7 中，我们可以使用 Array.prototype.find 和 Array.prototype.findIndex 来简化数组查询操作，提高代码的可读性和可维护性。

Array.prototype.find

Array.prototype.find 是在数组中查找符合条件的第一个元素。它的语法如下：

arr.find(callback(element[, index[, array]])[, thisArg])

其中，callback 是一个用来测试每个元素的函数，它接收三个参数：

• element：当前处理的元素
• index：当前处理的元素的索引值
• array：当前处理的数组

callback 函数返回一个布尔值，表示当前元素是否符合条件。如果符合条件，find 方法返回该元素，否则返回 undefined。

下面是一个简单的例子，查找数组中第一个大于 10 的元素：

const arr = [5, 8, 12, 15];
const result = arr.find(item => item > 10);
console.log(result); // 12

在这个例子中，callback 函数返回 item > 10 的结果，即查找第一个大于 10 的元素。

Array.prototype.findIndex

Array.prototype.findIndex 与 Array.prototype.find 类似，不同的是它返回符合条件的元素在数组中的索引值。它的语法如下：

arr.findIndex(callback(element[, index[, array]])[, thisArg])

其中，callback 函数的参数与 Array.prototype.find 相同。如果找到符合条件的元素，findIndex 方法返回该元素在数组中的索引值，否则返回 -1。

下面是一个简单的例子，查找数组中第一个大于 10 的元素的索引值：

const arr = [5, 8, 12, 15];
const result = arr.findIndex(item => item > 10);
console.log(result); // 2

在这个例子中，callback 函数返回 item > 10 的结果，即查找第一个大于 10 的元素的索引值。

总结

使用 Array.prototype.find 和 Array.prototype.findIndex 可以简化数组查询操作，提高代码的可读性和可维护性。在使用时，需要注意 callback 函数的返回值必须是布尔值，否则会出现错误。此外，这两个方法只会查找第一个符合条件的元素，如果需要查找所有符合条件的元素，需要使用 Array.prototype.filter。

参考代码

const arr = [5, 8, 12, 15];
const result1 = arr.find(item => item > 10);
console.log(result1); // 12

const result2 = arr.findIndex(item => item > 10);
console.log(result2); // 2

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65bc9a4aadd4f0e0ff532621