ES8 中 Array.prototype.find() 方法的使用详解及应用场景
在 JavaScript 中，Array 是我们最常用的数据类型之一。ES6 中， JavaScript 引入了许多有趣的内置方法来操作数组，如 map()、filter()、reduce() 等等。在 ES8 中，Array.prototype.find() 方法也被引入来解决一些常见的数组遍历问题。本文将详细阐述 Array.prototype.find() 方法的使用及其应用场景。
Array.prototype.find() 方法的基本语法为：array.find(callback, thisArg)。其中，callback 是一个回调函数，thisArg 是可选参数，指定 callback 函数中 this 的值。callback 函数接收三个参数：currentValue，index，array。这个函数应该返回 boolean 值，以指示找到匹配项，或者返回 undefined 指示未找到匹配项。
下面是一个简单的示例代码：
const numbers = [1, 2, 3, 4, 5];
const foundNumber = numbers.find(function(number) {
return number % 2 === 0;
});
console.log(foundNumber); // 2在上述代码中，我们传递了一个函数给 Array.prototype.find() 方法，该函数遍历数组中的每个元素。callback 函数检查每个元素是否为偶数。一旦找到第一个偶数，就返回该元素并退出该函数。代码输出了 2，因为该数字是第一个偶数的数字，即在回调函数内指定的第一次条件为真。
使用 Array.prototype.find() 方法，我们可以遍历数组以查找特定条件的元素。这是 Array.prototype.indexOf() 方法无法直接完成的操作。因为 Array.prototype.indexOf() 可以找到数组中的指定元素，而 Array.prototype.find() 可以找到符合要求的元素。
接下来，我们来看一些真实场景下 Array.prototype.find() 的使用案例。
案例 1：从数组中查找 ID
假设我们有一个数组，其中包含每个人的 ID 和姓名。我们想要通过 ID 查找用户，并返回整个用户对象。
-- -------------------- ---- -------
----- ----- - -
- --- -- ----- ------- --
- --- -- ----- ----- --
- --- -- ----- --------- -
--
-------- --------------- -
------ ------------------------- -
------ ------- --- ---
---
-
----- --------- - ---------------
----------------------- -- - --- -- ----- ----- -在上述代码中，我们定义了一个 getUserById() 方法，该方法接受一个 ID 参数并返回用户对象。它使用 Array.prototype.find() 方法来查找 ID 匹配的第一个元素，并将其返回为整个用户对象。当我们在 getUserById(2) 上调用它时，代码将返回 { id: 2, name: "Bob" }。
案例 2：查找数组中的 Null 值
有时候，我们可能需要在数组中查找第一个 Null 或 undefined 值。Array.prototype.find() 方法可以遍历数组并返回所有的 Null/undefined 值。
const data = [null, undefined, 5, "hello"];
const foundNull = data.find(function(item) {
return item == null;
});
console.log(foundNull); // null在这个示例中，我们在 data 数组中查找 Null 或 undefined 值。由于该数组第一个元素是 Null，代码将返回 Null。请注意，我们使用了 “==”，而不是 “===”，因为我们想要匹配 Null 或 undefined。
案例 3： 在对象数组中查找对象
另一个常见的用例是在对象数组中查找对象。在 Object.prototype.equals() 方法未得到寻找之前，当数组和对象之间匹配元素时，推荐使用 Array.prototype.find() 。因为它可以遍历整个数组并返回所有符合要求的元素。
-- -------------------- ---- ------- ----- ------- - - - --- -- ----- ------- -- - --- -- ----- ----- -- - --- -- ----- --------- - -- ----- ----------- - ----------------------------- - ------ ----------- --- ---------- --- ------------------------- -- - --- -- ----- --------- -
在本示例中，我们在对象数组中查找名称为 “Charlie” 的对象。我们使用 Array.prototype.find() 方法遍历整个数组，并返回第一个具有此名称的对象。代码输出了 { id: 3, name: "Charlie" }。
总结
为了遍历数组并查找对象，我们可以使用 Array.prototype.find() 方法。这个方法是 ES8 中的新特性，可以避免一些常见的数组遍历问题。它可以接受一个回调函数，并返回符合条件的第一个匹配项。在本文中，我们深入了解了 Array.prototype.find() 方法的使用及其应用场景，并事无巨细地介绍了它的工作原理和回调函数设置。希望本文对您有所启发，并可以在您的日常编程中得到应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a9699848841e98945a022a