ECMAScript 2017 引入了 Array.prototype.find() 方法，该方法可以用于查找 JavaScript 数组中的一个元素并返回它。该方法在实际开发中非常实用，可以避免在数组中进行手动遍历从而节省时间和代码复杂度。
Array.prototype.find() 方法的基本用法
Array.prototype.find() 方法接收一个回调函数作为参数。该回调函数用于定义查找条件，当数组中的某个元素符合该条件时，该元素将会作为方法的返回值。
示例代码如下：
const arr = [1, 2, 3, 4, 5]; const result = arr.find((item) => item === 4); console.log(result); // 输出 4
在上例中，find() 方法将执行一个回调函数 (item) => item === 4，它将针对数组中每个元素进行测试。当回调函数返回 true 时，find() 方法将返回对应的数组元素，即 4。
Array.prototype.find() 方法的高级用法
除了基本用法以外，Array.prototype.find() 方法还支持使用第二个参数定义回调函数的执行上下文。这意味着你可以在回调函数中访问其他变量。
示例代码如下：
const arr = [{ name: 'Tom', age: 25 }, { name: 'Mary', age: 30 }, { name: 'Bob', age: 35 }];
const result = arr.find(function (item) {
return this.age === 30;
}, { age: 30 });
console.log(result); // 输出 { name: 'Mary', age: 30 }在上例中，我们使用一个包含 name 和 age 属性对象的数组定义了一个 arr 变量。然后通过 find() 方法和自定义的回调函数找到了 age 等于 30 的对象，结果为 { name: 'Mary', age: 30 }。
Array.prototype.find() 方法的返回值
如果 find() 方法找到了符合条件的元素，它将返回该元素。如果没有找到，则返回 undefined。
示例代码如下：
const arr = [5, 7, 9, 11]; const result = arr.find((item) => item > 10); console.log(result); // 输出 11 const result2 = arr.find((item) => item > 20); console.log(result2); // 输出 undefined
在上例中，我们用 arr 数组测试了 Array.prototype.find() 方法的返回值。当数组中存在符合条件的元素时，方法的返回值为该元素；反之，返回 undefined。
Array.prototype.findIndex() 方法的用法
与 Array.prototype.find() 方法类似，ECMAScript 2015 还引入了 Array.prototype.findIndex() 方法。它返回数组中第一个符合条件的元素的索引值。如果没有符合条件的元素，则返回 -1。
示例代码如下：
const arr = ["apple", "orange", "banana"]; const index = arr.findIndex((item) => item === "orange"); console.log(index); // 输出 1
在上例中，我们使用 arr 数组测试了 Array.prototype.findIndex() 方法。回调函数 (item) => item === "orange" 匹配到了 "orange" 元素，返回其索引值 1。
总结
Array.prototype.find() 方法在日常的前端开发工作中极为常用，可以节省时间，提高代码可读性。有时候，特别是在处理数组较大的情况下，使用该方法的性能也会比手动循环更高效。但如果你正在使用较早版本的 ECMAScript，该方法可能无法使用，因此请确保你的 JavaScript 版本符合要求。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652c5d9e7d4982a6ebe284fc