如何无需for循环，将对象数组映射为含动态字段的新数组？

问题描述 #

我有一个包含约1000个元素的大型对象数组，需要根据条件从每个对象中提取部分动态指定的字段，映射为新的对象数组，但不想在map函数的每次循环内使用for循环，希望用对象解构这类更简洁高效的方式替代。

现有代码如下：

function mapData(fieldsNeeded, data) {
  // 想用类似对象解构的方式替代for循环，实现动态字段映射
  return data.map((item) => {
    const newItem = {};
    for(const field of fieldsNeeded) {
      newItem[field] = item[field];
    }
    
    return newItem;
  })
}

let fieldsNeeded;
if(something) {
  fieldsNeeded = ['a', 'c'];
} else {
  fieldsNeeded = ['b', 'c'];
}

const data = [ { a: 1, b: 2, c: 3 }, { a: 4, b: 5, c: 6 }, { a: 7, b: 8, c: 9 }, { a: 10, b: 11, c: 12 } ];

const mappedData = mapData(fieldsNeeded, data);

解决方案 #

方案1：用Object.fromEntries实现最简洁写法

利用Object.fromEntries将字段数组转换为键值对数组，直接生成目标对象，代码极简：

function mapData(fieldsNeeded, data) {
  return data.map(item => 
    Object.fromEntries(fieldsNeeded.map(field => [field, item[field]]))
  );
}

注意：Object.fromEntries是ES2019特性，现代浏览器、Node.js 12+都支持，兼容性没问题。

方案2：预编译解构函数（大型数组性能最优）

如果追求极致性能，可以提前基于fieldsNeeded生成一个解构函数，避免每次循环都遍历字段数组：

function mapData(fieldsNeeded, data) {
  // 动态生成解构逻辑：比如字段是['a','c']，就生成 (item) => ({a: item.a, c: item.c})
  const picker = new Function('item', `return { ${fieldsNeeded.map(f => `${f}: item.${f}`).join(', ')} };`);
  return data.map(picker);
}

注意：如果fieldsNeeded来自不可信外部输入，这种写法有代码注入风险，仅适用于内部可控的字段列表。

方案3：用reduce替代for循环（函数式风格）

不想用新API的话，用reduce构建新对象，写法比原生for循环更简洁：

function mapData(fieldsNeeded, data) {
  return data.map(item => 
    fieldsNeeded.reduce((acc, field) => {
      acc[field] = item[field];
      return acc;
    }, {})
  );
}

性能参考 #

• 原生for循环、reduce的性能几乎无差异；
• 预编译解构函数在1000+元素的数组上表现最优，因为避免了循环内的数组迭代；
• Object.fromEntries写法最简洁，1000元素量级下性能差异可以忽略，优先考虑可读性即可。

内容的提问来源于stack exchange，提问作者laneherby