和后端合作时，很多时候他们的返回数据格式并不一定适合前端展示逻辑处理。其中数组和对象的嵌套问题是一个比较常见的问题。
下面就对这个情况进行一些总结。
数组扁平化处理
后端返回格式：[1,2,3, [1,2,3, [1,2,3]]]
前端期望格式：[1,2,3,1,2,3,1,2,3]
递归实现代码：
function flat(arr = [], result = []) {
arr.forEach(v => {
if(Array.isArray(v)) {
result = result.concat(flat(v, []))
}else {
result.push(v)
}
})
return result
}
对象扁平化处理
后端返回的格式是嵌套的，但是在AntDesign的Table组件中，表格数据要求是扁平化的，所以有了下面的处理
后端返回格式：
[{
"step": 1,
"errors": [{
"resultCode": "结果",
"subErrorInfoList": [{
"number": 1,
"replayErrorMarkType": 2,
}, {
"number": 3,
"replayErrorMarkType": 4,
}]
}, {
"resultCode": "匹配",
"subErrorInfoList": [{
"number": 5,
"replayErrorMarkType": 6,
}, {
"number": 7,
"replayErrorMarkType": 8,
}]
}, {
"resultCode": "类型",
"subErrorInfoList": [{
"number": 9,
"replayErrorMarkType": 10,
}, {
"number": 11,
"replayErrorMarkType": 12,
}]
}, ]
}, {
"step": 2,
"errors": [{
"resultCode": "噪声",
"subErrorInfoList": [{
"number": 13,
"replayErrorMarkType": 14,
}, {
"number": 15,
"replayErrorMarkType": 16,
}]
}, {
"resultCode": "切面",
"subErrorInfoList": [{
"number": 17,
"replayErrorMarkType": 18,
}]
}, {
"resultCode": "随意",
"subErrorInfoList": [{
"number": 19,
"replayErrorMarkType": 20,
}, {
"number": 21,
"replayErrorMarkType": 22,
}]
}, ]
}]
前端期望格式：
[
{
"step": 1,
"resultCode": "结果",
"number": 1,
"replayErrorMarkType": 2
},
{
"step": 1,
"resultCode": "结果",
"number": 3,
"replayErrorMarkType": 4
},
{
"step": 1,
"resultCode": "匹配",
"number": 5,
"replayErrorMarkType": 6
},
{
"step": 1,
"resultCode": "匹配",
"number": 7,
"replayErrorMarkType": 8
},
{
"step": 1,
"resultCode": "类型",
"number": 9,
"replayErrorMarkType": 10
},
{
"step": 1,
"resultCode": "类型",
"number": 11,
"replayErrorMarkType": 12
},
{
"step": 2,
"resultCode": "噪声",
"number": 13,
"replayErrorMarkType": 14
},
{
"step": 2,
"resultCode": "噪声",
"number": 15,
"replayErrorMarkType": 16
},
{
"step": 2,
"resultCode": "切面",
"number": 17,
"replayErrorMarkType": 18
},
{
"step": 2,
"resultCode": "随意",
"number": 19,
"replayErrorMarkType": 20
},
{
"step": 2,
"resultCode": "随意",
"number": 21,
"replayErrorMarkType": 22
}
]
代码实现：
const innerArr = [];
function flatObj(arr, obj = {}) {
arr.forEach(item => {
if (Object.prototype.toString.call(item) === '[object Object]') {
let flag = true;
for (const prop in item) {
if (Array.isArray(item[prop])) {
flag = false;
flatObj(item[prop], obj);
} else {
obj[prop] = item[prop];
}
}
flag && innerArr.push(JSON.parse(JSON.stringify(obj)));
}
});
}
flatObj(data);
console.log(innerArr);
总结
上述扁平化处理都采用了递归的思想实现的。希望能给有此需要的人一点启发。
