如何重构JavaScript函数将含roles的数组转换为扁平目标数组？

初始数据 #

const data = [
  {
    roles: [
      {
        name: "one",
      },
      {
        name: "two",
      },
    ],
    name: "Alfa",
  },
  {
    roles: [
      {
        name: "three",
      },
    ],
    name: "Bravo",
  },
  {
    name: "Charlie",
  },
];

需求说明 #

为每个角色生成对应对象：

• 若对象包含多个roles，每个role对应一条数据
• 无roles字段时，仅保留name字段

预期输出：

[
  { name: "Alfa", role: "one" },
  { name: "Alfa", role: "two" },
  { name: "Bravo", role: "three" },
  { name: "Charlie" }
];

当前问题代码 #

现有cleanRoles函数返回嵌套数组与对象混合的结构，不符合预期：

const cleanRoles = (data) => {
  const roles = data.map((person) => {
    if (Array.isArray(person.roles) && person.roles.length > 0) {
      return person.roles.map((role) => {
        return {
          name: person.name,
          role: role.name,
        };
      });
    }
    return {
      name: person.name,
    };
  });
  return roles;
};

错误输出：

[
  [
    { name: "Alfa", role: "one" },
    { name: "Alfa", role: "two" },
  ],
  [{ name: "Bravo", role: "three" }],
  { name: "Charlie" },
];

重构方案 #

核心问题是map会保留原有的层级结构，改用flatMap可以在映射的同时自动扁平化数组，同时需要把无roles的情况返回的单个对象包装成数组，保证统一的数组输出：

const cleanRoles = (data) => {
  return data.flatMap((person) => {
    if (Array.isArray(person.roles) && person.roles.length > 0) {
      return person.roles.map((role) => ({
        name: person.name,
        role: role.name,
      }));
    }
    // 将单个对象包装为数组，确保flatMap能统一处理
    return [{ name: person.name }];
  });
};

代码解释 #

• flatMap方法会先对数组中的每个元素执行映射函数，然后将所有映射结果扁平化为一个新数组，刚好解决原代码中嵌套数组的问题
• 无roles时返回[{ name: person.name }]而非单个对象，保证所有分支的返回值都是数组，让flatMap可以正确扁平化处理

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