Javascript中扁平化数据结构与JSON树形结构转换详解

一、扁平化数据结构

扁平化数据结构是指将一个JSON树形结构数据转换为一个扁平化的对象数组，通常用于在数据操作中进行遍历和检索，方便数据的处理和展示。

例如，有一个JSON树形结构数据如下：

{
  "name": "中国",
  "children": [
    {
      "name": "北京市",
      "children": [
        {
          "name": "海淀区"
        },
        {
          "name": "朝阳区"
        }
      ]
    },
    {
      "name": "上海市",
      "children": [
        {
          "name": "黄浦区"
        },
        {
          "name": "徐汇区"
        }
      ]
    }
  ]
}

将其转换为扁平化数据结构，得到以下对象数组：

[
  {
    "name": "中国"
  },
  {
    "name": "北京市"
  },
  {
    "name": "海淀区"
  },
  {
    "name": "朝阳区"
  },
  {
    "name": "上海市"
  },
  {
    "name": "黄浦区"
  },
  {
    "name": "徐汇区"
  }
]

可以看到，扁平化数据结构将树形结构中的每个节点都以对象的形式存储在数组中，便于遍历和操作。

二、JSON树形结构转换

JSON树形结构转换是指将一个扁平化的对象数组转换为一个JSON树形结构数据，通常用于在数据展示中进行分级和归组，方便数据的渲染和展示。

例如，有以下扁平化数据结构：

[
  {
    "name": "中国"
  },
  {
    "name": "北京市"
  },
  {
    "name": "海淀区"
  },
  {
    "name": "朝阳区"
  },
  {
    "name": "上海市"
  },
  {
    "name": "黄浦区"
  },
  {
    "name": "徐汇区"
  }
]

将其转换为JSON树形结构，得到以下数据：

{
  "name": "中国",
  "children": [
    {
      "name": "北京市",
      "children": [
        {
          "name": "海淀区"
        },
        {
          "name": "朝阳区"
        }
      ]
    },
    {
      "name": "上海市",
      "children": [
        {
          "name": "黄浦区"
        },
        {
          "name": "徐汇区"
        }
      ]
    }
  ]
}

可以看到，JSON树形结构将扁平化数据结构中的每个节点按照其层级关系进行组织，以树形结构的形式进行展示。

三、示例说明

示例一：扁平化数据结构转换

以下是一个扁平化数据结构的例子：

[
  {
    "id": 1,
    "name": "中国"
  },
  {
    "id": 2,
    "name": "北京市",
    "parent_id": 1
  },
  {
    "id": 3,
    "name": "海淀区",
    "parent_id": 2
  },
  {
    "id": 4,
    "name": "朝阳区",
    "parent_id": 2
  },
  {
    "id": 5,
    "name": "上海市",
    "parent_id": 1
  },
  {
    "id": 6,
    "name": "黄浦区",
    "parent_id": 5
  },
  {
    "id": 7,
    "name": "徐汇区",
    "parent_id": 5
  }
]

该数据表示了一个地区的层次关系，其中每个节点都包含一个唯一id和对应的name，使用parent_id表示父节点id，没有父节点的节点为根节点。

将其转换为JSON树形结构，可以使用递归的方式进行组织，JavaScript代码如下：

function buildTree(data, rootId) {
  // 递归构建树形结构
  const tree = []
  const map = {}
  data.forEach(item => {
    map[item.id] = item
    item.children = []
  })
  data.forEach(item => {
    if (item.parent_id && map[item.parent_id]) {
      map[item.parent_id].children.push(item)
    } else {
      tree.push(item)
    }
  })
  return tree
}

// 示例：
const data = [
  {
    "id": 1,
    "name": "中国"
  },
  {
    "id": 2,
    "name": "北京市",
    "parent_id": 1
  },
  {
    "id": 3,
    "name": "海淀区",
    "parent_id": 2
  },
  {
    "id": 4,
    "name": "朝阳区",
    "parent_id": 2
  },
  {
    "id": 5,
    "name": "上海市",
    "parent_id": 1
  },
  {
    "id": 6,
    "name": "黄浦区",
    "parent_id": 5
  },
  {
    "id": 7,
    "name": "徐汇区",
    "parent_id": 5
  }
]

const tree = buildTree(data, 1)
console.log(JSON.stringify(tree, null, 2))

输出结果为：

[
  {
    "id": 1,
    "name": "中国",
    "children": [
      {
        "id": 2,
        "name": "北京市",
        "parent_id": 1,
        "children": [
          {
            "id": 3,
            "name": "海淀区",
            "parent_id": 2,
            "children": []
          },
          {
            "id": 4,
            "name": "朝阳区",
            "parent_id": 2,
            "children": []
          }
        ]
      },
      {
        "id": 5,
        "name": "上海市",
        "parent_id": 1,
        "children": [
          {
            "id": 6,
            "name": "黄浦区",
            "parent_id": 5,
            "children": []
          },
          {
            "id": 7,
            "name": "徐汇区",
            "parent_id": 5,
            "children": []
          }
        ]
      }
    ]
  }
]

可以看到，该代码将扁平化数据结构转换为JSON树形结构，并按照层级关系进行分组，形成了一个树的形式展示。

示例二：JSON树形结构转换

以下是一个JSON树形结构的例子：

{
  "name": "中国",
  "children": [
    {
      "name": "北京市",
      "children": [
        {
          "name": "海淀区"
        },
        {
          "name": "朝阳区"
        }
      ]
    },
    {
      "name": "上海市",
      "children": [
        {
          "name": "黄浦区"
        },
        {
          "name": "徐汇区"
        }
      ]
    }
  ]
}

该数据表示了一个地区的层次关系，其中每个节点都包含一个name和对应的子节点children，使用children表示该节点下的子节点，没有子节点的节点为叶子节点。

将其转换为扁平化数据结构，可以使用递归的方式进行组织，JavaScript代码如下：

function flattenTree(tree) {
  // 递归构建扁平化数据结构
  const result = []
  const dfs = (node, level) => {
    result.push({
      name: node.name,
      level: level
    })
    if (node.children && node.children.length > 0) {
      node.children.forEach(child => dfs(child, level + 1))
    }
  }
  dfs(tree, 0)
  return result
}

// 示例：
const tree = {
  "name": "中国",
  "children": [
    {
      "name": "北京市",
      "children": [
        {
          "name": "海淀区"
        },
        {
          "name": "朝阳区"
        }
      ]
    },
    {
      "name": "上海市",
      "children": [
        {
          "name": "黄浦区"
        },
        {
          "name": "徐汇区"
        }
      ]
    }
  ]
}

const result = flattenTree(tree)
console.log(JSON.stringify(result, null, 2))

输出结果为：

[
  {
    "name": "中国",
    "level": 0
  },
  {
    "name": "北京市",
    "level": 1
  },
  {
    "name": "海淀区",
    "level": 2
  },
  {
    "name": "朝阳区",
    "level": 2
  },
  {
    "name": "上海市",
    "level": 1
  },
  {
    "name": "黄浦区",
    "level": 2
  },
  {
    "name": "徐汇区",
    "level": 2
  }
]

可以看到，该代码将JSON树形结构转换为扁平化数据结构，并按照节点的层级关系进行分组，形成了一个对象数组的形式进行展示。