理解 ES7 中的 Array.prototype.find() 和 Array.prototype.findIndex() 方法及其应用-JavaScript中文网-JavaScript教程资源分享门户

理解 ES7 中的 Array.prototype.find() 和 Array.prototype.findIndex() 方法及其应用

ES7 中的 Array.prototype.find() 和 Array.prototype.findIndex() 方法是两个非常实用的数组操作方法。在前端开发中，我们经常需要对数组进行操作，这两个方法能够帮助我们更加方便地找到数组中的某个元素。

Array.prototype.find()

Array.prototype.find() 方法用于查找数组中第一个符合条件的元素，并返回该元素。该方法接收一个回调函数作为参数，该回调函数可以接收三个参数：当前元素、当前元素的索引和数组本身。该方法会遍历数组中的每个元素，直到找到符合条件的元素为止。

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

const arr = [1, 2, 3, 4, 5, 6];
const result = arr.find(item => item > 3);
console.log(result); // 4

上面的代码中，arr.find() 方法会遍历数组 arr 中的每个元素，依次传入回调函数 item => item > 3 中进行判断。当找到第一个大于 3 的元素时，arr.find() 方法就会返回该元素，并结束遍历。

Array.prototype.findIndex()

Array.prototype.findIndex() 方法与 Array.prototype.find() 方法类似，也是用于查找数组中符合条件的元素的索引，并返回该索引。该方法也接收一个回调函数作为参数，该回调函数的参数和返回值都与 Array.prototype.find() 方法相同。

下面是一个例子，该例子查找一个数组中第一个大于 3 的元素的索引：

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

上面的代码中，arr.findIndex() 方法会遍历数组 arr 中的每个元素，依次传入回调函数 item => item > 3 中进行判断。当找到第一个大于 3 的元素时，arr.findIndex() 方法就会返回该元素的索引，并结束遍历。

应用实例

那么，Array.prototype.find() 和 Array.prototype.findIndex() 方法有什么实际应用呢？

在数组中查找对象

在使用 JavaScript 进行开发时，我们经常需要处理数组中的对象。使用 Array.prototype.find() 方法可以很方便地查找符合条件的对象。

例如，我们要查找一个数组中的第一个年龄大于 30 的人物：

const persons = [
  { name: '小明', age: 20 },
  { name: '小红', age: 25 },
  { name: '小刚', age: 32 },
  { name: '小美', age: 28 }
];
const result = persons.find(person => person.age > 30);
console.log(result); // { name: '小刚', age: 32 }

上面的代码中，我们定义了一个名为 persons 的数组，该数组中包含了多个对象。我们使用 persons.find() 方法，查找其中年龄大于 30 的第一个人物，并返回该人物的对象。

在数组中查找元素的索引

有时候我们需要查找一个元素在数组中的索引，可以使用 Array.prototype.findIndex() 方法。

例如，我们要查找一个数字在数组中的索引：

const arr = [1, 2, 3, 4, 5, 6];
const index = arr.findIndex(item => item === 5);
console.log(index); // 4

上面的代码中，我们定义了一个名为 arr 的数组，该数组中包含了多个数字。然后使用 arr.findIndex() 方法查找数字 5 在该数组中的索引，最终返回该索引。

总结

Array.prototype.find() 和 Array.prototype.findIndex() 方法可以帮助我们更加方便地查找数组中的元素和元素的索引。在实际开发中，我们可以根据实际需求来选择使用哪种方法，以达到更好的代码效果。

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

理解 ES7 中的 Array.prototype.find() 和 Array.prototype.findIndex() 方法及其应用