如何将单对象数组项拆分为包含三个对象的数组？

给定如下响应数据结构：

const res = {
  data: [{
    name: 'c2',
    ipaddr: '192.168.1.5',
    port: 4435,
    sshuser: "abc",
    sshpass: "xyz",
    sshport: 22,
    license: 'license.txt',
  }],
};

需要将其转换为：

const newState = [{
  name: 'c2',
  ipaddr: '192.168.1.5',
  port: 4435,
}, {
  sshuser: "abc",
  sshpass: "xyz",
  sshport: 22,
}, {
  license: 'license.txt',
}]

目前已有如下实现：

var obj1 = {
  name: res.data[0].name,
  ipaddr: res.data[0].ipaddr,
  port: res.data[0].port,
};
var obj2 = {
  sshuser: res.data[0].sshuser,
  sshpass: res.data[0].sshpass,
  sshport: res.data[0].sshport,
};
var obj3 = {
  license: res.data[0].license,
};
const newState = [obj1, obj2, obj3];

请问有没有其他更简洁的语法实现这个需求？

简洁实现方案 #

方法1：对象解构+字面量数组（最直观简洁） #

通过对象解构一次性提取原对象的所有属性，直接创建目标数组的子对象，省去中间变量：

const { name, ipaddr, port, sshuser, sshpass, sshport, license } = res.data[0];
const newState = [
  { name, ipaddr, port },
  { sshuser, sshpass, sshport },
  { license }
];

ES6的属性简写语法让代码更紧凑，可读性也很强，是最推荐的方案。

方法2：抽离分组规则（可扩展性更强） #

如果后续分组规则可能变化，或者属性数量较多，可以先定义分组的属性列表，再通过map和reduce生成目标结构：

// 定义分组规则，后续修改只需调整这里
const propertyGroups = [
  ['name', 'ipaddr', 'port'],
  ['sshuser', 'sshpass', 'sshport'],
  ['license']
];

const targetItem = res.data[0];
const newState = propertyGroups.map(group => 
  group.reduce((resultObj, key) => ({ ...resultObj, [key]: targetItem[key] }), {})
);

这种方式把业务逻辑和数据结构分离，维护起来更方便，适合复杂场景。

方法3：自执行函数+展开语法（极致紧凑） #

如果追求代码行数最少，可以结合自执行函数和解构来写，不过可读性略逊于前两种：

const targetItem = res.data[0];
const newState = [
  { ...(({ name, ipaddr, port }) => ({ name, ipaddr, port }))(targetItem) },
  { ...(({ sshuser, sshpass, sshport }) => ({ sshuser, sshpass, sshport }))(targetItem) },
  { ...(({ license }) => ({ license }))(targetItem) }
];

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