在前后分离的大背景下，前端数据渲染过程中，有时候后端返回的数据结构并不是前端需要的格式，如果后端不处理，这个时候就需要前端自己处理。
假如拿到的数据是这样的：
list：[
{
id: '01',
name: 'saly',
role: [{
role_id: 1, name: "管理员", status: 1}],
org: [{
org_id: 1, name: "xx公司", parent_id: 0, status: 1, remark: ""}]
},
{
id: '02',
name: 'deay',
role: [{
role_id: 1, name: "管理员", status: 1}],
org: [{
org_id: 1, name: "xx公司", parent_id: 0, status: 1, remark: ""}]
}
]
但是这个不是你要的数据结构，想把对象里嵌套的数组全部的数据取出来加到一级对象上
需求：就是遍历所有对象，把对象里所有数组的属性和值取出来，加到对象上
转换之后的格式是这样的：
list：[
{
id: '01',
name: 'saly',
role_id: 1,
role_name: "管理员",
org_id: 1,
org_name: "xx公司",
parent_id: 0,
status: 1,
remark: ""
},
{
id: '02',
name: 'deay',
role_id: 1,
role_name: "管理员",
org_id: 1,
org_name: "xx公司",
parent_id: 0,
status: 1,
remark: ""
},
]
简单版：
可以利用es6的赋值解构来处理，转换方法：
list.map(item => {
const {
role: [{
role_id, name: role_name } = {
}],
org: [{
org_id, name: org_name, ...otherOrg }],
...other
} = item;
return {
...other,
role_id,
role_name,
org_id,
org_name,
...otherOrg
}
})
详细版：
如果 role和 org这两个数组都只有一层，那会比较好办：
1. 使用 IIFE 进行二级解构
const result = list.map(({
role, org, ...rest }) => ({
...rest,
...(({
role_id, name }) => ({
role_id, role_name: name }))(role[0]),
...(({
org_id, name, parent_id }) => ({
org_id, org_name: name, parent_id }))(org[0]),
}));
或者直接在 map callback 的参数里完全解构出来：
2. 在参数里使用多级构
const result = list.map(({
role: [{
role_id, name: role_name }],
org: [{
org_id, name: org_name, parent_id }],
...rest
}) => ({
...rest, role_id, role_name, org_id, org_name, parent_id }));
如果 role 和 org 可能是多个，那么问题来了……是需要做交叉展开吗？如果需要，那至少需要两层 flatMap
const result = list.flatMap(({
role, org, ...rest }) => {
return role.flatMap(({
role_id, name: role_name }) => {
return org.map(({
org_id, name: org_name, parent_id }) => ({
...rest,
role_id, role_name,
org_id, org_name, parent_id
}));
});
});
Lambda 代码块里只有一句 return 的情况下，可以去掉 return，改为表达式（为了可读性，可以在 => 后面折行+缩进）
const result = list.flatMap(({
role, org, ...rest }) =>
role.flatMap(({
role_id, name: role_name }) =>
org.map(({
org_id, name: org_name, parent_id }) => ({
...rest,
role_id, role_name,
org_id, org_name, parent_id
}))
)
);