Vue3+TypeScript中转换runOverview对象生成目标数组求助

原对象示例 #

const runOverview = {
  version: "1.0.0",
  project_name: "Demo Project",
  inputs: [{ id: 1, type: "input" }],
  loads: [{ id: 2, type: "load" }],
  products: [{ id: 3, type: "product" }]
};

期望输出结构 #

{
  items: [
    { id: 1, type: "input" },
    { id: 2, type: "load" },
    { id: 3, type: "product" }
  ]
}

正确转换逻辑（Vue computed 实现） #

computed: {
  transformedRunOverview() {
    // 解构跳过不需要的字段，同时给数组设默认值防止空值报错
    const { version, project_name, inputs = [], loads = [], products = [] } = this.runOverview;
    // 合并三个数组为新的items数组，返回处理后的对象
    return {
      items: [...inputs, ...loads, ...products]
    };
  }
}

补充说明 #

如果不需要额外的items键，只想直接得到合并后的数组，可直接返回[...inputs, ...loads, ...products]。给数组设置默认空数组是为了避免原对象中某字段为undefined或null时，扩展运算符抛出错误。

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