將省市區(qū)三級樹狀結(jié)構(gòu)數(shù)據(jù)扁平化處理，并根據(jù)選中狀態(tài)精簡結(jié)果
本文介紹如何將省市區(qū)三級樹狀結(jié)構(gòu)數(shù)據(jù)扁平化，并根據(jù)選中狀態(tài)精簡結(jié)果。原始數(shù)據(jù)采用樹形結(jié)構(gòu)，包含省份、城市和區(qū)縣信息及選中狀態(tài)（checked: 1 表示選中）。目標是生成一個扁平化結(jié)構(gòu)，僅包含必要的區(qū)域代碼和層級信息。
原始數(shù)據(jù)示例：
[ { "code": "110000", "value": "北京市", "checked": "1", "children": [ { "code": "110100", "value": "北京市", "checked": "1", "children": [ { "code": "110101", "value": "東城區(qū)", "checked": "1" }, { "code": "110102", "value": "西城區(qū)", "checked": "1" } ] } ] }, { "code": "120000", "value": "天津市", "checked": "1", "children": [ { "code": "120100", "value": "天津市", "checked": "1", "children": [ { "code": "120101", "value": "和平區(qū)", "checked": "0" }, { "code": "120102", "value": "河東區(qū)", "checked": "1" } ] } ] } ]
目標扁平化結(jié)構(gòu)：
如果所有三級區(qū)域都被選中，則只保留一級和二級區(qū)域代碼；如果所有二級區(qū)域都被選中，則只保留一級區(qū)域代碼；如果三級區(qū)域只選中部分，則保留一級、二級和三級區(qū)域代碼。
[ { "provinceAreald": "110000", "cityAreald": null, "countryAreald": null, "actualAreaLevel": "1" }, { "provinceAreald": "120000", "cityAreald": "120100", "countryAreald": "120102", "actualAreaLevel": "3" } ]
JavaScript 函數(shù)實現(xiàn)：
以下 JavaScript 函數(shù) flattenData 實現(xiàn)數(shù)據(jù)扁平化：
function flattenData(data) { const result = []; function processNode(node, parent) { if (node.checked === "1") { const item = { provinceAreald: parent ? parent.code : node.code, cityAreald: null, countryAreald: null, actualAreaLevel: '1' }; if (node.children) { const allChildrenChecked = node.children.every(child => child.checked === "1"); if (allChildrenChecked) { item.actualAreaLevel = node.children[0].children ? '2' : '1'; if(node.children[0].children){ item.cityAreald = node.children[0].code; } } else { item.actualAreaLevel = '2'; item.cityAreald = node.code; for (const child of node.children) { processNode(child, item); } return; } } result.push(item); } else if (node.children) { for (const child of node.children) { processNode(child, node); } } } for (const node of data) { processNode(node); } return result; } // 示例用法 const data = [/* ...原始數(shù)據(jù) ... */]; const flattenedData = flattenData(data); console.log(flattenedData);
此函數(shù)采用遞歸方式處理樹形結(jié)構(gòu)，根據(jù)選中狀態(tài)和子節(jié)點的選中情況，動態(tài)調(diào)整actualAreaLevel和cityAreald, countryAreald字段的值，最終生成精簡的扁平化數(shù)據(jù)。 代碼也進行了優(yōu)化，減少了不必要的函數(shù)嵌套，提高了可讀性和效率。
? 版權(quán)聲明
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載。
THE END
