JS对象数组map按指定顺序取值如何避免重复书写属性名

实现方案 #

完全可以实现，将属性列表存为数组后嵌套一层map遍历取对应值即可，代码如下：

const data = [
  {
    amount: '100',
    user: 'admin',
    date: 'March 6, 2019'
  },
  {
    amount: '120',
    user: 'admin',
    date: 'March 6, 2019'
  },
  {
    amount: '80',
    user: 'admin',
    date: 'March 7, 2019'
  },
  {
    amount: '200',
    user: 'admin',
    date: 'March 7, 2019'
  }
];

// 把属性名按需求顺序存为数组
const keys = ['amount', 'user', 'date'];
// 遍历每个对象，再按属性名顺序取值生成新数组
const result = data.map(item => keys.map(key => item[key]));

console.log(result);

输出结果和你原有手写解构的实现完全一致。

补充说明 #

• 如果你需要用字符串格式定义属性列表，只需多做一步拆分处理即可，后续逻辑不变：const keys = "amount, user, date".split(', ')
• 你给出的伪代码语法无法直接生效，ES6对象解构暂不支持传入变量批量匹配动态属性名，必须通过显式遍历属性名数组的方式实现需求
• 如果需要兼容对象缺属性的场景，可以修改取值逻辑做容错处理：keys.map(key => item?.[key] ?? '')，避免属性不存在时返回undefined

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