JavaScript 数组 find() 方法

摘要：在本教程中，您将学习如何使用 JavaScript find() 方法来搜索数组中第一个满足测试条件的元素。

数组 find() 方法简介

在 ES5 中，要查找 数组 中的元素，您可以使用 indexOf() 或 lastIndexOf() 方法。但是，这些方法非常有限，因为它们只返回第一个匹配元素的索引。

ES6 引入了一种名为 find() 的新方法，该方法添加到 Array.prototype 对象中。

find() 方法返回数组中第一个通过测试函数的元素。以下是 find() 方法的语法

find(callback(element[, index[, array]])[, thisArg])Code language: CSS (css)

参数

find() 接受两个参数：一个回调函数和一个可选的值，用于在 callback 函数内部使用 this。

1) 回调

callback 是一个函数，它对数组的每个元素执行操作。它接受三个参数

• element 是当前元素。
• index 是当前元素的索引。
• array 是调用 find() 的数组。

2) thisArg

thisArg 是用作 callback 内部 this 的对象。

返回值

find() 对数组中的每个元素执行 callback 函数，直到 callback 返回一个真值。

如果回调返回一个真值，则 find() 立即返回该元素并停止搜索。否则，它返回 undefined。

如果您想查找找到的元素的索引，可以使用 findIndex() 方法。

JavaScript find() 示例

以下示例使用 find() 方法来搜索数字数组中第一个偶数

let numbers = [1, 2, 3, 4, 5];

console.log(numbers.find(e => e % 2 == 0));Code language: JavaScript (javascript)

输出

2

假设我们有一个客户对象的列表，这些对象具有 name 和 credit 属性，如下所示

let customers = [{
    name: 'ABC Inc',
    credit: 100
}, {
    name: 'ACME Corp',
    credit: 200
}, {
    name: 'IoT AG',
    credit: 300
}];Code language: JavaScript (javascript)

以下代码使用 find() 方法查找第一个信用额大于 100 的客户。

console.log(customers.find(c => c.credit > 100));Code language: JavaScript (javascript)

输出

{ name: 'ACME Corp', credit: 200 }Code language: CSS (css)

摘要

• 使用 find() 方法查找数组中第一个满足提供的测试函数的元素。