Array.prototype.find()

基线 广泛可用

此功能非常成熟，可以在许多设备和浏览器版本上运行。它已在所有浏览器上可用，自 2016 年 9 月.

的 **find()** 方法 Array 实例返回提供的数组中满足提供的测试函数的第一个元素。如果没有值满足测试函数，则返回 undefined。

  • 如果您需要在数组中找到的元素的 **索引**，请使用 findIndex()。
  • 如果您需要找到 **值的索引**，请使用 indexOf()。（它类似于 findIndex()，但检查每个元素与值的相等性，而不是使用测试函数。）
  • 如果您需要找到一个值是否 **存在** 于一个数组中，请使用 includes()。同样，它检查每个元素与值的相等性，而不是使用测试函数。
  • 如果您需要找到是否有任何元素满足提供的测试函数，请使用 some()。
  • 如果您需要找到所有满足提供的测试函数的元素，请使用 filter()。

试一试

语法

js
find(callbackFn)
find(callbackFn, thisArg)

参数

callbackFn

要为数组中的每个元素执行的函数。它应该返回一个 真值 以指示已找到匹配的元素，否则返回一个 假值。该函数使用以下参数调用

元素

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

索引

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

数组

调用 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(element, index, array) {
  let start = 2;
  while (start <= Math.sqrt(element)) {
    if (element % start++ < 1) {
      return false;
    }
  }
  return element > 1;
}

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

使用 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);
});
// 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);
});
// 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() 方法读取 this 的 length 属性，然后访问每个键为非负整数且小于 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 语言规范
# sec-array.prototype.find

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅