本文介绍如何根据给定的键名数组（如 ['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 })
);⚠️ 注意事项：
- obj[key] 访问是安全的：即使 key 在原对象中不存在，也会返回 undefined，符合预期；
- 避免在 map 内部用 colors.map(...).flat() 或 Object.assign({}, ...) 拼接，易引发类型错误或性能损耗；
- 若需深度过滤（如排除 null/undefined 值），可在赋值前加判断：if (obj[key] != null) result[key] = obj[key];；
- 键名数组 colors 应确保唯一且为合法标识符，避免运行时异常。
综上，核心原则是主动构造目标结构，而非依赖数组展开的副作用。选择 for...of 获得最佳可读性与调试体验；追求简洁表达时，reduce 是更地道的函数式替代方案。
