理解 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