省市区树状数据扁平化与选中状态层级调整攻略

本文提供了一种高效的JavaScript解决方案，用于将省市区树状结构数据扁平化，并根据选中状态调整层级信息。原始数据包含省、市、区三级信息（code、value、checked），目标是生成扁平化数据，并记录实际层级（actualAreaLevel），实现方式为递归遍历，根据选中状态（checked）判断是否保留父级或子级信息，最终输出省、市、区代码(provinceAreald, cityAreald, countryAreald)以及实际层级。 该方法简洁高效，避免了冗余代码，适用于处理大规模省市区数据。

本文介绍如何将省市区三级嵌套数据扁平化，并根据选中状态调整层级信息。原始数据为树状结构，包含省、市、区三级信息（代码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"
          }
        ]
      }
    ]
  }
]

目标数据结构： 根据选中状态，如果所有子级都选中，则只保留父级；如果部分子级选中，则保留所有选中级别的信息。

[
  {
    "provinceAreald": "110000",
    "cityAreald": null,
    "countryAreald": null,
    "actualAreaLevel": "1"
  },
  {
    "provinceAreald": "120000",
    "cityAreald": "120100",
    "countryAreald": "120102",
    "actualAreaLevel": "3"
  }
]

JavaScript实现： 以下代码通过递归函数实现数据转换：

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 childrenChecked = node.children.filter(child => child.checked === "1");
        if (childrenChecked.length > 0) {
          item.actualAreaLevel = 1;
          childrenChecked.forEach(child => {
              item.cityAreald = child.code;
              item.actualAreaLevel = 2;
              if(child.children){
                  const grandChildrenChecked = child.children.filter(grandchild => grandchild.checked === "1");
                  if(grandChildrenChecked.length > 0){
                      grandChildrenChecked.forEach(grandchild => {
                          item.countryAreald = grandchild.code;
                          item.actualAreaLevel = 3;
                      })
                  }
              }
          })
        }
      }
      result.push(item);
    }
    if (node.children) {
      node.children.forEach(child => processNode(child, node));
    }
  }
  data.forEach(province => processNode(province));
  return result;
}

const newData = flattenData(data);
console.log(newData);

这段代码更简洁高效地实现了相同的功能，避免了原代码中不必要的函数嵌套和变量传递。 它直接在递归函数内部处理所有层级，并根据选中状态动态更新actualAreaLevel以及cityAreald和countryAreald的值。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~