和后端合作時(shí)，很多時(shí)候他們的返回?cái)?shù)據(jù)格式并不一定適合前端展示邏輯處理。其中數(shù)組和對(duì)象的嵌套問題是一個(gè)比較常見的問題。
下面就對(duì)這個(gè)情況進(jìn)行一些總結(jié)。
數(shù)組扁平化處理
后端返回格式：[1,2,3, [1,2,3, [1,2,3]]]
前端期望格式：[1,2,3,1,2,3,1,2,3]
遞歸實(shí)現(xiàn)代碼：
function flat(arr = [], result = []) {
arr.forEach(v => {
if(Array.isArray(v)) {
result = result.concat(flat(v, []))
}else {
result.push(v)
}
})
return result
}
對(duì)象扁平化處理
后端返回的格式是嵌套的，但是在AntDesign的Table組件中，表格數(shù)據(jù)要求是扁平化的，所以有了下面的處理
后端返回格式：
[{
"step": 1,
"errors": [{
"resultCode": "結(jié)果",
"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": "結(jié)果",
"number": 1,
"replayErrorMarkType": 2
},
{
"step": 1,
"resultCode": "結(jié)果",
"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
}
]
代碼實(shí)現(xiàn)：
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);
總結(jié)
上述扁平化處理都采用了遞歸的思想實(shí)現(xiàn)的。希望能給有此需要的人一點(diǎn)啟發(fā)。
