在處理 JSON 數(shù)據(jù)時，有時我們需要將嵌套的數(shù)據(jù)結(jié)構(gòu)轉(zhuǎn)換為平行的 JSON 對象，這種情況經(jīng)常出現(xiàn)在處理嵌套的 children 數(shù)據(jù)時。

假設(shè)我們有一份如下的 children 數(shù)據(jù):

children: [{
id: 1,
label: '基礎(chǔ)組件',
children: [{
id: 11,
label: '按鈕'
}, {
id: 12,
label: '圖標'
}]
}, {
id: 2,
label: '表單組件',
children: [{
id: 21,
label: '輸入框'
}, {
id: 22,
label: '單選框'
}]
}]

我們可以通過以下的代碼將其轉(zhuǎn)換為平行的 JSON 對象:

const flattenJSON = (data, result = {}) =>{
data.forEach(item =>{
const {id, label, children} = item;
result[id] = {id, label};
if (children) {
flattenJSON(children, result);
}
});
return result;
}
// 調(diào)用
const flatData = flattenJSON(children);

運行后的平行 JSON 對象會如下:

{
"1": {
"id": 1,
"label": "基礎(chǔ)組件"
},
"11": {
"id": 11,
"label": "按鈕"
},
"12": {
"id": 12,
"label": "圖標"
},
"2": {
"id": 2,
"label": "表單組件"
},
"21": {
"id": 21,
"label": "輸入框"
},
"22": {
"id": 22,
"label": "單選框"
}
}

這樣處理后，我們就可以更方便的直接操作扁平化的數(shù)據(jù)了。