Array.prototype.find()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.
find()
方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined
。
- 如果需要在数组中找到对应元素的索引,请使用
findIndex()
。 - 如果需要查找某个值的索引,请使用
Array.prototype.indexOf()
。(它类似于findIndex()
,但只是检查每个元素是否与值相等,而不是使用测试函数。) - 如果需要查找数组中是否存在某个值,请使用
Array.prototype.includes()
。同样,它检查每个元素是否与值相等,而不是使用测试函数。 - 如果需要查找是否有元素满足所提供的测试函数,请使用
Array.prototype.some()
。
尝试一下
语法
find(callbackFn)
find(callbackFn, thisArg)
参数
返回值
数组中第一个满足所提供测试函数的元素的值,否则返回 undefined
。
描述
find()
方法是一个迭代方法。它按索引升序顺序为数组中的每个元素调用提供的 callbackFn
函数,直到 callbackFn
返回一个真值。然后 find()
返回该元素并停止迭代数组。如果 callbackFn
从未返回真值,则 find()
返回 undefined
。
callbackFn
被调用来处理数组的每一个索引,而不仅仅是那些有值的索引。在稀疏数组中,未赋值的空槽与 undefined
表现相同。
find()
不会改变被调用的数组,但是提供给 callbackFn
的函数可能会改变它。但需要注意的是,在第一次调用 callbackFn
之前,数组的长度会被保存。因此:
- 当调用
find()
时,callbackFn
不会访问超出数组初始长度的任何元素。 - 对已经访问过的索引的更改不会导致再次在这些元素上调用
callbackFn
。 - 如果
callbackFn
改变了数组中已存在但尚未被访问的元素,则传递给callbackFn
的该元素的值将是该元素在被访问时的值。被删除的元素被视为undefined
。
警告:上述类型的并发修改经常导致难以理解的代码,通常应避免(特殊情况除外)。
find()
方法是通用的。它只期望 this
值具有 length
属性和整数键属性。
示例
在对象数组中通过对象属性进行查找
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 }
使用箭头函数和解构赋值
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
):
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,未找到
console.log([4, 5, 8, 12].find(isPrime)); // 5
在稀疏数组上使用 find()
在稀疏数组中,空槽会被访问的,并被视为 undefined
。
// 声明一个在索引 2、3 和 4 处没有元素的数组
const array = [0, 1, , , , 5, 6];
// 将会打印所有索引,而不仅仅是那些有值的非空槽
array.find((value, index) => {
console.log(`访问索引 ${index},值为 ${value}`);
});
// 访问索引 0,值为 0
// 访问索引 1,值为 1
// 访问索引 2,值为 undefined
// 访问索引 3,值为 undefined
// 访问索引 4,值为 undefined
// 访问索引 5,值为 5
// 访问索引 6,值为 6
// 打印所有索引,包括已删除的
array.find((value, index) => {
// 在第一次迭代时删除元素 5
if (index === 0) {
console.log(`删除 array[5] 的值 ${array[5]}`);
delete array[5];
}
// 即使删除了,元素 5 仍然被访问
console.log(`访问索引 ${index},值为 ${value}`);
});
// 删除值为 5 的 array[5]
// 访问索引 0,值为 0
// 访问索引 1,值为 1
// 访问索引 2,值为 undefined
// 访问索引 3,值为 undefined
// 访问索引 4,值为 undefined
// 访问索引 5,值为 undefined
// 访问索引 6,值为 6
在非数组对象上调用 find()
find()
方法读取 this
的 length
属性,然后访问每个整数索引。
const arrayLike = {
length: 3,
0: 2,
1: 7.3,
2: 4,
};
console.log(Array.prototype.find.call(arrayLike, (x) => !Number.isInteger(x)));
// 7.3
规范
Specification |
---|
ECMAScript Language Specification # sec-array.prototype.find |
浏览器兼容性
BCD tables only load in the browser