ES7 中的数组方法：Array.prototype.find 和 Array.prototype.findIndex 详解

随着前端技术的不断发展，JavaScript 也在不断地发生变化。ES7 是最新版本的 ECMAScript 标准，已经实现了许多新的特性。其中，Array.prototype.find 和 Array.prototype.findIndex 是非常有用的数组方法，本文将对它们进行详细的介绍。

Array.prototype.find

Array.prototype.find 方法用于查找数组中的第一个符合条件的元素，并返回该元素。其语法如下：

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

其中，callback 是一个用于测试每个元素的函数，它的参数分别为：

• element：当前正在被处理的数组元素。
• index：当前正在被处理的数组元素的索引。
• array：调用 find 方法的数组本身。

callback 函数返回 true 时，Array.prototype.find 方法将返回当前正在被处理的数组元素，否则返回 undefined。

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

const arr = [1, 3, 5, 7, 9];
const result = arr.find((element) => element > 4);
console.log(result); // 5

Array.prototype.findIndex

Array.prototype.findIndex 方法用于查找数组中的第一个符合条件的元素，并返回该元素的索引。其语法如下：

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

其中，callback 的参数与 Array.prototype.find 方法的参数相同。当 callback 函数返回 true 时，Array.prototype.findIndex 方法将返回当前正在被处理的数组元素的索引，否则返回 -1。

下面是一个简单的示例，用于查找数组中第一个大于 4 的元素的索引：

const arr = [1, 3, 5, 7, 9];
const result = arr.findIndex((element) => element > 4);
console.log(result); // 2

区别和使用场景

Array.prototype.find 和 Array.prototype.findIndex 方法之间的主要区别在于返回值。Array.prototype.find 返回的是数组元素本身，而 Array.prototype.findIndex 返回的是数组元素的索引。

使用场景上也有所不同。如果需要获取数组中满足条件的元素，那么应该使用 Array.prototype.find 方法。如果只需要获取数组中满足条件的元素的索引，那么应该使用 Array.prototype.findIndex 方法。

总结

本文对 ES7 中的两个数组方法 Array.prototype.find 和 Array.prototype.findIndex 进行了详细介绍。它们尤其适用于查找数组中的元素，并能够大大简化 JavaScript 代码的编写。根据实际需求，选择合适的方法可以让代码更加简洁和可读。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647d3c49968c7c53b080bb6a