在 ES7 中，Array.prototype.find() 方法被加入到了 JavaScript 的标准库中。这个方法可以让我们更加方便地在数组中查找元素。
find() 方法的基本用法
Array.prototype.find() 方法接受一个回调函数作为参数，该函数会被传入数组中的每一个元素，直到找到一个回调函数返回 true 的元素。该方法会返回第一个满足条件的元素，如果没有找到满足条件的元素，则返回 undefined。
下面是一个简单的示例，用于在数组中查找第一个大于 10 的元素：
const arr = [5, 8, 12, 15, 20]; const result = arr.find((item) => item > 10); console.log(result); // 12
findIndex() 方法的基本用法
Array.prototype.findIndex() 方法与 Array.prototype.find() 方法非常相似，不同之处在于它会返回第一个满足条件的元素的索引，而不是元素本身。如果没有找到满足条件的元素，则返回 -1。
下面是一个简单的示例，用于在数组中查找第一个大于 10 的元素的索引：
const arr = [5, 8, 12, 15, 20]; const result = arr.findIndex((item) => item > 10); console.log(result); // 2
find() 方法的高级用法
除了基本的用法之外，Array.prototype.find() 方法还有一些高级用法。下面是一些常见的用法：
在对象数组中查找元素
我们可以在对象数组中使用 Array.prototype.find() 方法来查找满足条件的对象。例如，下面的示例用于查找数组中第一个 age 属性大于 18 的对象：
const arr = [
{ name: "Alice", age: 16 },
{ name: "Bob", age: 21 },
{ name: "Charlie", age: 18 },
{ name: "David", age: 25 },
];
const result = arr.find((item) => item.age > 18);
console.log(result); // { name: "Bob", age: 21 }使用 thisArg 参数
Array.prototype.find() 方法的第二个参数可以用于指定回调函数中 this 的值。例如，下面的示例用于在数组中查找第一个元素，该元素的值等于 this 的值：
const arr = [5, 8, 12, 15, 20];
const result = arr.find(function (item) {
return item === this;
}, 12);
console.log(result); // 12使用箭头函数
在 ES6 中，我们可以使用箭头函数来简化代码。在使用 Array.prototype.find() 方法时，箭头函数可以使代码更加简洁。例如，下面的示例用于查找数组中第一个 age 属性大于 18 的对象：
const arr = [
{ name: "Alice", age: 16 },
{ name: "Bob", age: 21 },
{ name: "Charlie", age: 18 },
{ name: "David", age: 25 },
];
const result = arr.find((item) => item.age > 18);
console.log(result); // { name: "Bob", age: 21 }总结
Array.prototype.find() 方法是在 ES7 中引入的一个非常方便的方法，它可以让我们更加方便地在数组中查找元素。除了基本的用法之外，该方法还有一些高级用法，例如在对象数组中查找元素、使用 thisArg 参数以及使用箭头函数。在实际开发中，我们可以根据自己的需求来选择不同的用法，以达到最佳的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/657c66c8d2f5e1655d7395d3