使用JavaScript转换含数组与对象的嵌套对象结构

给定如下嵌套结构的输入对象：

const input = {
  result: {
    data: {
      groupMapper: [
        {
          id: "id123",
          groupName: "Group 1",
          subGroups: []
        },
        {
          id: "id456",
          groupName: "Group 2",
          subGroups: []
        }
      ],
      items: [
        {
          id: "abc",
          itemName: "Item1",
          groupId: "id123",
          isDefault: true,
          value: 1,
          config: {
            saved: true
          }
        },
        {
          id: "def",
          itemName: "Item2",
          groupId: "id456",
          value: 2,
          isDefault: false,
          config: null
        },
        {
          id: "hgi",
          itemName: "Item3",
          groupId: "id123",
          isDefault: true,
          value: 3,
          config: {
            saved: true
          }
        }
      ]
    }
  }
};

需要按照以下规则转换为指定输出结构：

• 将items数组中的条目按groupMapper里的groupId分组，输出对象的属性键为对应的groupId
• 重命名属性：groupMapper的id改为categoryId，groupName改为categoryName；items的id改为tileId，itemName改为tileName
• 将items条目中的config.saved转为used属性：config.saved为true则used为true，config为null则used为false

预期输出结构如下：

const output = {
  id123: {
    categoryId: "id123",
    categoryName: "Group 1",
    tiles: [
      {
        tileId: "abc",
        tileName: "Item1",
        groupId: "id123",
        isDefault: true,
        value: 1,
        used: true
      },
      {
        tileId: "hgi",
        tileName: "Item3",
        groupId: "id123",
        isDefault: true,
        value: 3,
        used: true
      }
    ]
  },
  id456: {
    categoryId: "id456",
    categoryName: "Group 2",
    tiles: [
      {
        tileId: "def",
        tileName: "Item2",
        groupId: "id456",
        isDefault: false,
        value: 2,
        used: false
      }
    ]
  }
};

尝试了以下代码但未实现预期效果：

const { result } = input;
const res = Object.fromEntries(
  Object.entries(result).map(([key, value], index) => {
    return [key, { ...value, tiles: value.items, used: value.items.config }];
  })
);
console.log(res);

可以通过以下步骤实现需求：

1. 从输入中提取groupMapper和items核心数据
2. 遍历groupMapper，为每个分组创建基础结构并完成属性重命名
3. 遍历items，转换每个条目的格式后分配到对应分组的tiles数组中

具体代码如下：

// 提取核心数据
const { groupMapper, items } = input.result.data;

// 初始化输出对象
const output = {};

// 构建每个分组的基础结构
groupMapper.forEach(group => {
  output[group.id] = {
    categoryId: group.id,
    categoryName: group.groupName,
    tiles: []
  };
});

// 处理每个item并分配到对应分组
items.forEach(item => {
  // 转换item的属性格式
  const transformedItem = {
    tileId: item.id,
    tileName: item.itemName,
    groupId: item.groupId,
    isDefault: item.isDefault,
    value: item.value,
    // 处理used属性：config存在且saved为true则为true，否则为false
    used: item.config?.saved ?? false
  };
  
  // 将转换后的item添加到对应分组的tiles数组
  output[item.groupId].tiles.push(transformedItem);
});

console.log(output);

代码说明：

• 先解构获取groupMapper和items，减少嵌套路径的重复访问
• 遍历groupMapper时，用分组的id作为输出对象的键，同时完成id→categoryId、groupName→categoryName的重命名，初始化空tiles数组
• 处理item时，完成id→tileId、itemName→tileName的重命名，用可选链?.和空值合并运算符??安全处理config为null的情况
• 最后将转换后的item推入对应分组的tiles数组，完成分组逻辑

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