本文介绍如何将包含可选 roles 数组的人员数据，高效地转换为每个角色（或无角色者）对应一个独立对象的扁平化数组，并提供性能最优的 reduce 实现方案。
本文介绍如何将包含可选 `roles` 数组的人员数据，高效地转换为每个角色（或无角色者）对应一个独立对象的扁平化数组，并提供性能最优的 `reduce` 实现方案。
在处理嵌套结构的数据时，常见的需求是将“一对多”关系（如一人多个角色）展开为多个独立条目。原始数据中，每个 person 对象可能含有 roles 数组（也可能缺失或为空），目标是：
- 若 roles 存在且非空，则为每个 role 生成一个 { name, role } 对象；
- 若 roles 不存在或为空，则仅保留 { name } 对象；
- 最终输出为一维扁平数组，而非嵌套数组。
你最初的 map 实现返回了嵌套结构（如 [ [obj, obj], [obj], obj ]），这是因为 map 保持原数组长度和层级，无法自动展平。解决该问题的关键在于使用 reduce 手动累积结果，或选用 flatMap（语义清晰但性能略低）。
✅ 推荐方案：高性能 reduce 实现
const cleanRoles = (data) => {
return data.reduce((acc, { name, roles }) => {
if (Array.isArray(roles) && roles.length > 0) {
roles.forEach(({ name: roleName }) => {
acc.push({ name, role: roleName });
});
} else {
acc.push({ name });
}
return acc;
}, []);
};此写法逻辑清晰、兼容性好（支持所有现代浏览器及 Node.js），且经百万级数据基准测试验证，性能约为 flatMap 方案的 11.7 倍（见原文 benchmark 对比）。
? 更通用的扩展写法（支持任意用户属性）
若 person 对象还包含 id、email 等其他字段，需一并透传，可使用对象解构与展开运算符：
const cleanRoles = (data) => {
return data.reduce((acc, { roles, ...rest }) => {
if (Array.isArray(roles) && roles.length > 0) {
roles.forEach(({ name: roleName }) => {
acc.push({ ...rest, role: roleName });
});
} else {
acc.push(rest);
}
return acc;
}, []);
};例如输入含 id: 123，输出将自动包含 id 字段，无需硬编码。
⚠️ 注意事项
- 避免直接使用 person.roles?.map(...) 后 push 到 acc——这仍会插入子数组；
- roles?.length 是安全简写，但需确保 roles 不为 undefined 或 null 以外的假值（如 0、false）；显式判断 Array.isArray(roles) && roles.length > 0 更健壮；
- forEach + push 比 map().flat() 或 flatMap() 内存占用更低，适合大数据量场景；
- 若需链式调用或函数式风格，可封装为纯函数并配合 filter(Boolean) 处理边缘情况（如空 name）。
✅ 最终效果验证
对示例数据调用 cleanRoles(data)，输出严格符合预期：
[
{ name: "Alfa", role: "one" },
{ name: "Alfa", role: "two" },
{ name: "Bravo", role: "three" },
{ name: "Charlie" }
]该方案兼顾可读性、健壮性与极致性能，是处理动态嵌套数组展开任务的生产就绪实践。
