标签导航：

如何将省市区树状结构数据扁平化处理？

将省市区树状数据转换为扁平结构

本文介绍如何将三级树状结构的省市区数据扁平化。原始数据采用树形结构，每个节点包含代码 (code)、名称 (value) 和选中状态 (checked)。目标是根据选中状态生成一个扁平数组，包含省份、城市和区县的代码及层级信息。

原始数据结构示例：

[
  {
    "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"}
        ]
      }
    ]
  }
]

目标扁平化数据结构示例：

[
  {
    "provinceCode": "110000",
    "cityCode": null,
    "districtCode": null,
    "level": 1
  },
  {
    "provinceCode": "120000",
    "cityCode": "120100",
    "districtCode": "120102",
    "level": 3
  }
]

转换逻辑：

采用递归遍历树状结构，根据 checked 状态判断。如果所有子节点都被选中，则只保留父节点信息；如果部分子节点被选中，则保留所有被选中的节点信息。

JavaScript 实现代码：

function flattenData(data) {
  const result = [];

  function traverse(node, parent) {
    if (node.checked === "1") {
      const item = {
        provinceCode: parent ? parent.provinceCode : node.code,
        cityCode: parent ? (parent.cityCode || (parent.level === 1 ? node.code : null)) : null,
        districtCode: parent ? (parent.level === 2 ? node.code : null) : null,
        level: parent ? parent.level + 1 : 1
      };
      result.push(item);
    }
    if (node.children) {
      node.children.forEach(child => traverse(child, item));
    }
  }

  data.forEach(province => traverse(province));
  return result;
}

// 示例用法
const data = [/* 原始数据 */];
const flattenedData = flattenData(data);
console.log(flattenedData);

这段代码通过递归函数 traverse 遍历树形结构，根据 checked 属性和父节点信息构建扁平化数据。 它使用了更简洁的逻辑，避免了多个嵌套函数，并对代码进行了优化。 level 属性直接根据父节点的 level 推断，简化了逻辑。