Array.prototype.find()

Baseline 已广泛支持

此特性已相当成熟,可在许多设备和浏览器版本上使用。自 2015 年 9 月以来,该特性已在各大浏览器中可用。

find() 方法是 Array 实例上的一种方法,它返回数组中满足测试函数 callbackFn 的第一个元素。如果数组中没有满足该函数的值,则返回 undefined

  • 如果你需要找到找到元素的索引,请使用 findIndex()
  • 如果你需要查找某个值的索引,请使用 indexOf()。(它与 findIndex() 类似,但它通过与值进行相等性比较来检查每个元素,而不是使用测试函数。)
  • 如果你需要检查数组中是否存在某个值,请使用 includes()。同样,它通过与值进行相等性比较来检查每个元素,而不是使用测试函数。
  • 如果你需要检查数组中是否任意一个元素满足测试函数,请使用 some()
  • 如果你需要找到数组中所有满足测试函数的元素,请使用 filter()

试一试

const array = [5, 12, 8, 130, 44];

const found = array.find((element) => element > 10);

console.log(found);
// Expected output: 12

语法

js
find(callbackFn)
find(callbackFn, thisArg)

参数

callbackFn

一个用于执行数组中每个元素的函数。它应返回一个真值以指示已找到匹配的元素,否则返回一个假值。该函数会接收以下参数:

element

数组中正在处理的当前元素。

index

数组中正在处理的当前元素的索引。

array

调用 find() 方法的数组。

thisArg 可选

在执行 callbackFn 时用作 this 的值。请参阅 迭代方法

返回值

数组中第一个满足测试函数的元素。否则,返回 undefined

描述

find() 方法是一种迭代方法。它会按升序为数组中的每个元素调用一次提供的 callbackFn 函数,直到 callbackFn 返回一个真值。然后,find() 返回该元素并停止迭代数组。如果 callbackFn 从未返回真值,则 find() 返回 undefined。有关这些方法的一般工作原理,请阅读迭代方法部分。

callbackFn 会为数组的每一个索引调用,而不仅仅是那些有赋值的索引。对于稀疏数组中的空槽,其行为与 undefined 相同。

find() 方法是通用的。它只期望 this 值具有 length 属性和整数键属性。

示例

通过属性查找数组中的对象

js
const inventory = [
  { name: "apples", quantity: 2 },
  { name: "bananas", quantity: 0 },
  { name: "cherries", quantity: 5 },
];

function isCherries(fruit) {
  return fruit.name === "cherries";
}

console.log(inventory.find(isCherries));
// { name: 'cherries', quantity: 5 }

使用箭头函数和解构赋值

js
const inventory = [
  { name: "apples", quantity: 2 },
  { name: "bananas", quantity: 0 },
  { name: "cherries", quantity: 5 },
];

const result = inventory.find(({ name }) => name === "cherries");

console.log(result); // { name: 'cherries', quantity: 5 }

查找数组中的第一个质数

下面的示例返回数组中的第一个质数,如果不存在质数,则返回 undefined

js
function isPrime(n) {
  if (n < 2) {
    return false;
  }
  if (n % 2 === 0) {
    return n === 2;
  }
  for (let factor = 3; factor * factor <= n; factor += 2) {
    if (n % factor === 0) {
      return false;
    }
  }
  return true;
}

console.log([4, 6, 8, 12].find(isPrime)); // undefined, not found
console.log([4, 5, 8, 12].find(isPrime)); // 5

注意:isPrime() 实现仅用于演示。对于实际应用,您需要使用高度记忆化的算法,例如埃拉托斯特尼筛法,以避免重复计算。

使用 callbackFn 的第三个参数

当你想访问数组中的另一个元素时,array 参数很有用,尤其是在你没有引用该数组的现有变量时。下面的示例首先使用 filter() 提取正值,然后使用 find() 查找小于其相邻元素的第一个元素。

js
const numbers = [3, -1, 1, 4, 1, 5, 9, 2, 6];
const firstTrough = numbers
  .filter((num) => num > 0)
  .find((num, idx, arr) => {
    // Without the arr argument, there's no way to easily access the
    // intermediate array without saving it to a variable.
    if (idx > 0 && num >= arr[idx - 1]) return false;
    if (idx < arr.length - 1 && num >= arr[idx + 1]) return false;
    return true;
  });
console.log(firstTrough); // 1

在稀疏数组上使用 find()

稀疏数组中的空槽被访问,并被视为 undefined

js
// Declare array with no elements at indexes 2, 3, and 4
const array = [0, 1, , , , 5, 6];

// Shows all indexes, not just those with assigned values
array.find((value, index) => {
  console.log("Visited index", index, "with value", value);
  return false;
});
// Visited index 0 with value 0
// Visited index 1 with value 1
// Visited index 2 with value undefined
// Visited index 3 with value undefined
// Visited index 4 with value undefined
// Visited index 5 with value 5
// Visited index 6 with value 6

// Shows all indexes, including deleted
array.find((value, index) => {
  // Delete element 5 on first iteration
  if (index === 0) {
    console.log("Deleting array[5] with value", array[5]);
    delete array[5];
  }
  // Element 5 is still visited even though deleted
  console.log("Visited index", index, "with value", value);
  return false;
});
// Deleting array[5] with value 5
// Visited index 0 with value 0
// Visited index 1 with value 1
// Visited index 2 with value undefined
// Visited index 3 with value undefined
// Visited index 4 with value undefined
// Visited index 5 with value undefined
// Visited index 6 with value 6

在非数组对象上调用 find()

find() 方法读取 thislength 属性,然后访问键为小于 length 的非负整数的每个属性。

js
const arrayLike = {
  length: 3,
  "-1": 0.1, // ignored by find() since -1 < 0
  0: 2,
  1: 7.3,
  2: 4,
};
console.log(Array.prototype.find.call(arrayLike, (x) => !Number.isInteger(x)));
// 7.3

规范

规范
ECMAScript® 2026 语言规范
# sec-array.prototype.find

浏览器兼容性

另见