在 JavaScript 中，经常需要对数组进行查找操作。在 ES5 中，我们通常使用 indexOf() 和 lastIndexOf() 方法来查找数组中的元素。然而，这些方法只能查找基本类型的值，无法查找对象或其他复杂类型的值。在 ES6 中，引入了 Array.prototype.find() 方法，它可以让我们更方便地查找数组中的元素。
Array.prototype.find() 的用法
Array.prototype.find() 方法接受一个回调函数作为参数，回调函数会在数组中的每个元素上调用一次，直到找到一个满足条件的元素为止。如果找到了满足条件的元素，则返回该元素；否则返回 undefined。
回调函数接受三个参数：
- 当前元素的值
- 当前元素的索引
- 被查找的数组
下面是 Array.prototype.find() 方法的语法：
array.find(callback, thisArg);
其中，callback 是回调函数，thisArg 是可选的参数，用来指定回调函数中的 this 值。
使用 Array.prototype.find() 查找数组中的元素
下面是一个使用 Array.prototype.find() 方法查找数组中元素的例子：
const numbers = [1, 2, 3, 4, 5];
const evenNumber = numbers.find((number) => {
return number % 2 === 0;
});
console.log(evenNumber); // 2在上面的例子中，我们定义了一个数组 numbers，然后使用 Array.prototype.find() 方法查找其中的偶数。回调函数中的 number 参数表示当前元素的值，我们使用 % 运算符判断当前元素是否为偶数。由于第二个元素是偶数，因此 evenNumber 变量的值为 2。
使用 Array.prototype.find() 查找对象数组中的元素
Array.prototype.find() 方法不仅可以查找基本类型的值，还可以查找对象数组中的元素。下面是一个使用 Array.prototype.find() 方法查找对象数组中元素的例子：
-- -------------------- ---- ------- ----- ----- - - - --- -- ----- ------- -- - --- -- ----- ----- -- - --- -- ----- --------- -- -- ----- ---- - ----------------- -- - ------ ------- --- -- --- ------------------ -- - --- -- ----- ----- -
在上面的例子中，我们定义了一个对象数组 users，然后使用 Array.prototype.find() 方法查找其中 id 属性为 2 的元素。回调函数中的 user 参数表示当前元素的值，我们使用 === 运算符判断当前元素的 id 属性是否为 2。由于第二个元素的 id 属性为 2，因此 user 变量的值为 { id: 2, name: 'Bob' }。
使用 Array.prototype.find() 查找符合条件的第一个元素
Array.prototype.find() 方法会在数组中查找满足条件的第一个元素，如果要查找符合条件的所有元素，可以使用 Array.prototype.filter() 方法。下面是一个使用 Array.prototype.filter() 方法查找对象数组中所有元素的例子：
-- -------------------- ---- ------- ----- ----- - - - --- -- ----- ------- -- - --- -- ----- ----- -- - --- -- ----- --------- -- -- ----- ------------- - ------------------- -- - ------ -------------------------- --- --------------------------- -- -- --- -- ----- ------- --
在上面的例子中，我们定义了一个对象数组 users，然后使用 Array.prototype.filter() 方法查找其中 name 属性以字母 A 开头的所有元素。回调函数中的 user 参数表示当前元素的值，我们使用 startsWith() 方法判断当前元素的 name 属性是否以字母 A 开头。由于第一个元素的 name 属性以字母 A 开头，因此 filteredUsers 变量的值为 [{ id: 1, name: 'Alice' }]。
总结
在 JavaScript 中，使用 Array.prototype.find() 方法可以更方便地查找数组中的元素，包括基本类型的值和对象数组中的元素。在使用 Array.prototype.find() 方法时，我们可以传递一个回调函数作为参数，回调函数会在数组中的每个元素上调用一次，直到找到一个满足条件的元素为止。如果找到了满足条件的元素，则返回该元素；否则返回 undefined。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6617cb42d10417a2227c23b7