本文介绍如何根据给定的键名数组（如 [‘yellow’, ‘blue’]），从对象数组中精准提取对应字段，生成结构扁平、键值保留的新数组，避免嵌套或索引污染。
在实际开发中，我们常需对后端返回的“宽表”结构数据进行前端裁剪——例如数据库返回包含多种颜色字段（yellow、blue、pink、red等）的对象，但业务仅需展示用户配置的若干颜色列。此时，若直接使用 map + 展开运算符组合不当，容易误将数组映射结果（如 [ {yellow: “…”}, {blue: “…”} ]）作为对象属性展开，导致生成带数字索引的意外结构（如 0: {…}, 1: {…}），而非期望的扁平键值对。
正确的做法是：为每个源对象创建一个新对象，显式初始化必需字段（如 name），再逐个注入目标键值对。以下是两种推荐实现方式：
✅ 方案一：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]; // 动态赋值，安全支持 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" }
// ]
✅ 方案二：reduce + 展开运算符（函数式风格，一行核心逻辑）
const newArray = db.map(obj =>
colors.reduce((acc, key) => ({
...acc,
[key]: obj[key]
}), { name: obj.name })
);
⚠️ 注意事项：
