ECMAScript 2019 中的 Array.prototype.{find,findIndex} 方法详解-JavaScript中文网-JavaScript教程资源分享门户

在 ECMAScript 2019 中，新增了两个数组方法，分别是 Array.prototype.find 和 Array.prototype.findIndex。这两个方法在实际开发中非常实用，本文将详细介绍它们的使用方法以及指导意义。

Array.prototype.find

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

array.find(callback[, thisArg])

其中，callback 是一个回调函数，用于定义查找条件。该函数接收三个参数：

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

该函数返回一个布尔值，表示当前元素是否符合查找条件。如果返回 true，则表示找到了符合条件的元素，find 方法会返回该元素，否则会继续查找下一个元素。

下面是一个示例代码：

const numbers = [1, 2, 3, 4, 5];
const even = numbers.find((element) => element % 2 === 0);
console.log(even); // 2

在上面的代码中，我们定义了一个数组 numbers，然后使用 find 方法查找数组中的第一个偶数。在回调函数中，我们使用取模运算符判断当前元素是否为偶数，如果是，则返回 true，find 方法会返回该元素。

如果数组中没有符合条件的元素，则 find 方法返回 undefined。下面是一个示例代码：

const numbers = [1, 3, 5, 7, 9];
const even = numbers.find((element) => element % 2 === 0);
console.log(even); // undefined

在上面的代码中，数组中没有符合条件的元素，因此 find 方法返回 undefined。

Array.prototype.findIndex

Array.prototype.findIndex 方法与 Array.prototype.find 方法类似，也是用于查找数组中符合条件的第一个元素。不同的是，findIndex 方法返回符合条件的元素在数组中的索引，如果没有符合条件的元素，则返回 -1。其语法如下：

array.findIndex(callback[, thisArg])

callback 函数的参数与 find 方法相同，返回值也是布尔值，表示当前元素是否符合查找条件。如果返回 true，则 findIndex 方法会返回该元素在数组中的索引，否则会继续查找下一个元素。

下面是一个示例代码：

const numbers = [1, 2, 3, 4, 5];
const evenIndex = numbers.findIndex((element) => element % 2 === 0);
console.log(evenIndex); // 1

在上面的代码中，我们定义了一个数组 numbers，然后使用 findIndex 方法查找数组中的第一个偶数。在回调函数中，我们使用取模运算符判断当前元素是否为偶数，如果是，则返回 true，findIndex 方法会返回该元素在数组中的索引。

如果数组中没有符合条件的元素，则 findIndex 方法返回 -1。下面是一个示例代码：

const numbers = [1, 3, 5, 7, 9];
const evenIndex = numbers.findIndex((element) => element % 2 === 0);
console.log(evenIndex); // -1

在上面的代码中，数组中没有符合条件的元素，因此 findIndex 方法返回 -1。

指导意义

Array.prototype.find 和 Array.prototype.findIndex 方法是非常实用的数组方法，可以帮助我们更方便地查找数组中的元素。在实际开发中，我们经常需要根据某些条件查找数组中的元素，这时可以使用这两个方法。使用这两个方法可以使代码更简洁、可读性更强，同时也可以提高代码的运行效率。

在使用这两个方法时，需要注意回调函数的写法。回调函数应该尽量简洁，只关注当前元素是否符合查找条件，不要在回调函数中进行其他操作。如果需要进行其他操作，可以在查找到符合条件的元素后再进行操作。

另外，这两个方法也可以与箭头函数结合使用，可以使代码更简洁。下面是一个使用箭头函数的示例代码：

const numbers = [1, 2, 3, 4, 5];
const even = numbers.find((element) => element % 2 === 0);
const evenIndex = numbers.findIndex((element) => element % 2 === 0);
console.log(even, evenIndex); // 2 1

在上面的代码中，我们使用箭头函数定义了回调函数，使代码更简洁。

总结

Array.prototype.find 和 Array.prototype.findIndex 方法是 ECMAScript 2019 中新增的两个数组方法，用于查找数组中符合条件的第一个元素。使用这两个方法可以使代码更简洁、可读性更强，同时也可以提高代码的运行效率。在使用这两个方法时，需要注意回调函数的写法，尽量保持简洁。

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