在日常JavaScript开发中，我们经常需要从数组里找到符合特定条件的元素，Array.prototype.find就是专门用来完成这个任务的原生数组方法。它遍历数组，对每一个元素执行回调函数，返回第一个让回调函数返回真值的元素，否则返回undefined，非常适合查找单个目标元素的场景。
find方法基本语法
find方法的语法结构如下：
arr.find(callback(element[, index[, array]])[, thisArg])
其中各个参数的含义：
- callback：必选参数，用来测试每个元素的函数，接收三个参数：
- element：当前遍历到的数组元素
- index：可选，当前元素的索引
- array：可选，调用find方法的原数组
- thisArg：可选参数，执行callback时用作this的值
基础使用示例
下面通过一个简单的水果数组查找示例，看看find的基础用法：
const fruits = ['apple', 'banana', 'orange', 'grape'];
// 查找第一个长度大于5的水果
const result = fruits.find(function(item) {
return item.length > 5;
});
console.log(result); // 输出 banana上面的代码中，find会依次遍历数组元素，第一个元素apple长度5不符合条件，第二个元素banana长度6符合条件，就直接返回banana，不会再继续遍历后面的元素。
带索引和原数组的例子
如果需要在回调里用到元素的索引或者原数组，也可以直接传入对应参数：
const numbers = [10, 20, 30, 40, 50];
// 查找第一个大于25且索引是偶数的元素
const target = numbers.find(function(num, index, arr) {
console.log('当前元素:', num, '索引:', index, '原数组:', arr);
return num > 25 && index % 2 === 0;
});
console.log(target); // 输出 30找不到元素的情况
如果遍历完整个数组，都没有找到让回调函数返回真值的元素，find会返回undefined：
const users = [
{ id: 1, name: '张三', age: 18 },
{ id: 2, name: '李四', age: 20 }
];
// 查找id为3的用户
const user = users.find(item => item.id === 3);
console.log(user); // 输出 undefined和filter方法的区别
很多开发者会把find和filter搞混，两者的核心区别如下：
| 对比项 | find | filter |
|---|---|---|
| 返回值 | 第一个符合条件的元素，没有则返回undefined | 所有符合条件的元素组成的新数组，没有则返回空数组 |
| 遍历终止 | 找到第一个符合条件的元素就停止遍历 | 会遍历完整个数组 |
| 适用场景 | 查找单个目标元素 | 查找多个符合条件的元素 |
使用注意事项
- find方法不会对空数组进行检测，如果数组为空，直接返回undefined
- find方法不会改变原数组
- 回调函数需要显式返回布尔值或者可以转为布尔值的表达式，否则可能会出现不符合预期的结果
- 如果只需要判断数组里是否存在符合条件的元素，用some方法更合适，find是返回具体元素，some是返回布尔值
实际开发场景示例
在前端开发中，经常需要从接口返回的商品列表里找到指定id的商品信息，用find实现非常方便：
// 模拟接口返回的商品列表
const goodsList = [
{ goodsId: 'g001', goodsName: '手机', price: 2999 },
{ goodsId: 'g002', goodsName: '平板', price: 3999 },
{ goodsId: 'g003', goodsName: '耳机', price: 599 }
];
// 查找goodsId为g002的商品
const targetGoods = goodsList.find(goods => goods.goodsId === 'g002');
if (targetGoods) {
console.log('找到目标商品:', targetGoods.goodsName); // 输出 找到目标商品: 平板
} else {
console.log('未找到对应商品');
}
Array.prototype.findJavaScript数组方法数组查找find方法使用前端开发修改时间：2026-05-29 22:56:47