在 ECMAScript 2016 中，新增了两个用于数组的方法：Array.prototype.find 和 Array.prototype.findIndex。这两个方法能够极大地简化我们在前端开发中对于数组的遍历和搜索操作，本文将对这两个方法进行详细介绍，并提供相关代码示例。
Array.prototype.find 方法
Array.prototype.find 方法用于在数组中查找符合条件的第一个元素，并返回该元素。如果没有符合条件的元素，则返回 undefined。方法的语法格式如下：
array.find(callback(element[, index[, array]])[, thisArg])
其中，callback 是用于测试每个元素的函数。它接收三个参数：
- element：当前被测试的元素。
- index（可选）：当前被测试元素的下标。
- array（可选）：被测试的原始数组。
find 方法在数组中测试每个元素，直到找到一个符合测试条件的元素。如果找到了符合条件的元素，则返回该元素并终止查找。如果没有找到符合条件的元素，则返回 undefined。
下面是一个示例代码，通过 find 方法查找数组中第一个大于 5 的数：
const arr = [1, 5, 9, 12]; const result = arr.find((element) => element > 5); // result: 9
该代码中，callback 函数为箭头函数 (element) => element > 5。该函数可以简化成 element => element > 5，当传入一个元素时，判断该元素是否大于 5，如果大于则返回 true，否则返回 false。
通过在数组中使用 find 方法，可以快速查找符合条件的元素，避免手动遍历数组的操作。
Array.prototype.findIndex 方法
Array.prototype.findIndex 方法和 Array.prototype.find 方法类似，都是在数组中查找符合条件的元素。不同之处在于，findIndex 方法返回符合条件的元素在数组中的下标，如果没有找到符合条件的元素，则返回 -1。
方法的语法格式如下：
array.findIndex(callback(element[, index[, array]])[, thisArg])
和 find 方法一样，findIndex 方法也接收一个 callback 函数作为参数，用于测试每个元素的条件。callback 函数的三个参数和 find 方法一样。
下面是一个示例代码，通过 findIndex 方法查找数组中第一个大于 5 的数的下标：
const arr = [1, 5, 9, 12]; const index = arr.findIndex((element) => element > 5); // index: 2
该代码中，callback 函数为箭头函数 (element) => element > 5，判断当前元素是否大于 5，如果大于则返回 true，继续遍历。直到找到第一个符合条件的元素 9，其下标为 2，返回该下标。
通过在数组中使用 findIndex 方法，可以快速查找符合条件的元素的下标，进而对其进行操作。
总结
Array.prototype.find 和 Array.prototype.findIndex 方法，是 ECMAScript 2016 中新增的两个数组方法，用于快速查找符合条件的元素和其下标。前端开发中，处理大量数组操作时，这两个方法能够极大地简化我们的开发工作，提高代码效率。建议在开发中灵活应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65000cb095b1f8cacde4178b