本文介绍如何基于一个键名数组，从对象数组中精准筛选并保留指定属性，生成结构精简的新数组，避免嵌套或错误的展开方式。
在实际开发中，我们常需从后端返回的“宽表”对象（即包含大量可选/冗余字段的对象）中，按需提取特定字段，形成轻量、语义明确的数据子集。例如，数据库返回每位用户所有颜色字段（yellow, blue, pink, red等），但业务层仅需展示用户姓名及用户配置的若干颜色（如 ['yellow', 'blue']）。此时，若直接使用 map + spread 组合不当（如将 colors.map() 结果解构为数组再展开），会导致意外生成索引键（如 0, 1）而非目标属性名——这正是原问题中出现 {0: {yellow: ...}, 1: {blue: ...}} 的根本原因。
正确做法是：对每个原始对象，显式构造新对象，并逐个注入所需键值对。以下是两种推荐实现：
✅ 方案一：map + for...of（清晰、高效、易调试）
const colors = ['yellow', 'blue'];
const db = [
{ name: "Paul", yellow: "it's yellow or not", pink: null, red: null, blue: "it's darkblue" },
{ name: "Eva", yellow: "it's yellow of course", pink: null, red: null, blue: "it's light blue" }
];
const newArray = db.map(obj => {
const result = { name: obj.name }; // 先固定必选字段
for (const key of colors) {
result[key] = obj[key]; // 动态赋值，安全访问（若 key 不存在则为 undefined）
}
return result;
});
console.log(newArray);
// → [
// { name: "Paul", yellow: "it's yellow or not", blue: "it's darkblue" },
// { name: "Eva", yellow: "it's yellow of course", blue: "it's light blue" }
// ]✅ 方案二：map + reduce（函数式风格，一行核心逻辑）
const newArray = db.map(obj =>
colors.reduce((acc, key) => ({
...acc,
[key]: obj[key]
}), { name: obj.name })
);⚠️ 注意：reduce 方案虽简洁，但每次迭代都创建新对象，对大数据量可能有轻微性能开销；而 for...of 方案仅一次对象创建，内存更友好。
? 关键注意事项
- 属性安全性：obj[key] 访问不会报错（不存在时返回 undefined），符合预期；无需额外 hasOwnProperty 判断，除非需严格过滤 undefined/null 值。
- 避免 ...colors.map(...) 陷阱：colors.map(y => ({[y]: x[y]})) 返回的是对象数组（如 [ {yellow: "..."}, {blue: "..."} ]），直接用 ... 展开会将其转为以索引为键的对象，而非扁平键值对。
-
扩展性建议：若需支持动态必选字段（不止 name），可将基础字段也传入数组，统一处理：
const requiredKeys = ['name']; const allKeys = [...requiredKeys, ...colors]; // 然后遍历 allKeys 构造 result
掌握这种“键驱动”的对象投影模式，能让你在数据清洗、API 响应裁剪、表格列配置等场景中，写出更健壮、可维护的代码。
