本文介绍如何根据一个键名数组（如 ['yellow', 'blue']），从对象数组中精准筛选并重构每个对象，仅保留匹配的属性，同时保持原始结构清晰、可读性强。
在实际开发中，我们常需对后端返回的宽表数据（即包含大量可选/稀疏字段的对象）进行前端裁剪，只保留业务关注的字段。例如，数据库返回了 yellow、blue、pink、red 等多个颜色字段，但 UI 层仅需动态配置的 ['yellow', 'blue'] 两项——此时，简单使用 map + 展开运算符组合易出错（如原问题中生成了带索引的嵌套对象），关键在于将键名数组作为“投影模板”，逐个提取对应值并合并到新对象中。
推荐采用两种清晰、健壮的实现方式：
✅ 方式一：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，null 值也会被保留
}
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 })
);⚠️ 注意事项：避免滥用展开语法嵌套：原问题中 colors.map(...).map(...) 生成的是对象数组，再用 ...selectedColors 会将数组索引（0,1…）作为键名，导致结构错误；undefined 与 null 的处理：上述方法会如实保留 obj[key] 的原始值（包括 null 或 undefined），如需过滤空值，可在赋值前加判断：if (obj[key] != null) result[key] = obj[key]；性能考量：对于大数据量，for...of 比 reduce 略快且内存占用更低；reduce 更适合强调不可变性与链式操作的场景。
无论选择哪种方式，核心思想一致：以键名数组为“蓝图”，对每个源对象执行确定性属性投影。这不仅解决了当前需求，也为后续支持动态列配置、前端字段权限控制等场景提供了可复用的模式。
