如何根据动态keys数组向新数组动态推送指定列？

问题描述 #

现有如下数据集合与目标键名数组：

let data = [
  {order: 1, plannedid: 32, userid: 123 },
  {order: 2, plannedid: 33, userid: 124 }
];
let keys = ['order', 'plannedid'];

需求是基于keys数组提取data中对应列的数据。目前已通过静态硬编码的方式实现：

let tempData = [];
data.forEach(function(d) {
  tempData.push({
    order: d.order,
    plannedid: d.plannedid
  });
});

输出结果：

[
  {order: 1, plannedid: 32},
  {order: 2, plannedid: 33}
];

但当keys数组动态变化时（例如变为['order', 'userid']），静态写法无法适配，需要实现基于动态keys的列提取。

解决方案 #

可以通过遍历动态keys数组，动态构建每个对象的属性，无需硬编码键名。以下是几种实用实现方式：

方式1：forEach循环动态赋值（与原静态逻辑对齐） #

let tempData = [];
data.forEach(d => {
  const resultObj = {};
  // 遍历目标键名数组，逐个提取属性
  keys.forEach(key => {
    // 可选：仅当原对象存在该属性时才添加，避免undefined
    if (d.hasOwnProperty(key)) {
      resultObj[key] = d[key];
    }
  });
  tempData.push(resultObj);
});

方式2：map函数简化写法 #

利用map函数的数组转换特性，代码更紧凑：

const tempData = data.map(d => {
  const resultObj = {};
  keys.forEach(key => {
    if (d[key] !== undefined) {
      resultObj[key] = d[key];
    }
  });
  return resultObj;
});

方式3：ES2019+ 简洁写法（Object.fromEntries） #

如果运行环境支持ES2019及以上，可使用更简洁的API：

const tempData = data.map(d => 
  Object.fromEntries(
    // 过滤存在的属性，转换为[key, value]键值对数组后生成对象
    keys.filter(key => d.hasOwnProperty(key)).map(key => [key, d[key]])
  )
);

注意事项 #

• 确保keys数组中的键名与data对象的属性名完全一致，否则会提取到undefined
• 若不需要属性存在性判断，可直接移除if条件，直接赋值（即使属性不存在也会保留键名，值为undefined）

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