如何从对象数组中按指定键名筛选属性并重构新数组

本文介绍如何根据给定的键名数组（如 [‘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 是更地道的函数式替代方案。