将省市区三级树状结构数据扁平化处理，并根据选中状态精简结果
本文介绍如何将省市区三级树状结构数据扁平化，并根据选中状态精简结果。原始数据采用树形结构，包含省份、城市和区县信息及选中状态（checked: 1 表示选中）。目标是生成一个扁平化结构，仅包含必要的区域代码和层级信息。
原始数据示例：
[ { "code": "110000", "value": "北京市", "checked": "1", "children": [ { "code": "110100", "value": "北京市", "checked": "1", "children": [ { "code": "110101", "value": "东城区", "checked": "1" }, { "code": "110102", "value": "西城区", "checked": "1" } ] } ] }, { "code": "120000", "value": "天津市", "checked": "1", "children": [ { "code": "120100", "value": "天津市", "checked": "1", "children": [ { "code": "120101", "value": "和平区", "checked": "0" }, { "code": "120102", "value": "河东区", "checked": "1" } ] } ] } ]
目标扁平化结构：
如果所有三级区域都被选中，则只保留一级和二级区域代码；如果所有二级区域都被选中，则只保留一级区域代码；如果三级区域只选中部分，则保留一级、二级和三级区域代码。
[ { "provinceAreald": "110000", "cityAreald": null, "countryAreald": null, "actualAreaLevel": "1" }, { "provinceAreald": "120000", "cityAreald": "120100", "countryAreald": "120102", "actualAreaLevel": "3" } ]
JavaScript 函数实现：
以下 JavaScript 函数 flattenData 实现数据扁平化：
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 = [/* ...原始数据 ... */]; const flattenedData = flattenData(data); console.log(flattenedData);
此函数采用递归方式处理树形结构，根据选中状态和子节点的选中情况，动态调整actualAreaLevel和cityAreald, countryAreald字段的值，最终生成精简的扁平化数据。 代码也进行了优化，减少了不必要的函数嵌套，提高了可读性和效率。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
