如何根据对象数组中某一属性值查找并获取另一属性值-js教程-PHP中文网

如何根据对象数组中某一属性值查找并获取另一属性值

本文介绍在 javascript 对象数组中，如何根据某个已知属性（如 car）的值快速查找并提取对应对象的其他属性（如 price），涵盖 filter + map、find、findindex 等常用方法及其适用场景与性能差异。

本文介绍在 javascript 对象数组中，如何根据某个已知属性（如 car）的值快速查找并提取对应对象的其他属性（如 price），涵盖 filter + map、find、findindex 等常用方法及其适用场景与性能差异。

在实际开发中，我们常需从对象数组中“按条件查找并提取字段”，例如：给定车型名（'BMW'），获取其对应价格。JavaScript 提供多种简洁高效的方式实现这一需求，下面逐一说明并对比。

✅ 推荐方式：使用 Array.prototype.find()

find() 方法返回第一个匹配条件的对象，语义清晰、性能优于 filter（无需遍历全部元素），适合单值查找：

const objArray = [
  { car: 'BMW', price: 2000 },
  { car: 'VW', price: 3500 },
  { car: 'FORD', price: 4000 }
];

const price = objArray.find(item => item.car === 'VW')?.price;
console.log(price); // 3500

⚠️ 注意：?.price 是可选链操作符，避免在未找到时访问 undefined.price 报错（ES2020+ 支持）。若需兼容旧环境，可改用 || null 或条件判断。

? 替代方案：filter() + map()（不推荐用于单值）

原答案中使用 filter().map()[0] 可行但低效：filter 会遍历整个数组生成新数组，再取首项——对大数据量或高频调用场景不友好：

海豚AI学

一款面向学生学习场景的智能学习产品，为日常学习和知识理解提供AI辅助服务。

下载

// ✅ 功能正确，但非最优
const price = objArray.filter(item => item.car === 'BMW').map(item => item.price)[0];

? 更灵活的选择：findIndex()（需索引时适用）

当还需知道匹配项的下标（如后续修改或删除）时，findIndex() 更合适：

const index = objArray.findIndex(item => item.car === 'FORD');
if (index !== -1) {
  console.log(`Price of FORD: ${objArray[index].price}`); // 4000
}

? 进阶技巧：构建查找映射（高频查询场景）

若需多次按 car 查询价格，建议预先构建 Map 或普通对象以实现 O(1) 查找：

const priceMap = new Map(
  objArray.map(item => [item.car, item.price])
);
console.log(priceMap.get('BMW')); // 2000

// 或使用对象字面量（注意 key 需为字符串且无特殊字符）
const priceObj = Object.fromEntries(
  objArray.map(item => [item.car, item.price])
);
console.log(priceObj.VW); // 3500