JavaScript扁平数据转tree与tree数据扁平化的方法

在JavaScript开发中，我们经常会遇到需要将扁平化的数据结构转换为树形结构，或者将树形结构扁平化的需求。本文将介绍如何实现这两种转换，并提供相应的代码示例。

1. 扁平数据转tree

扁平数据通常是指一个数组，数组中的每个元素都有一个唯一的标识符（如id）和一个指向父元素的标识符（如parentId）。我们需要将这些数据转换为树形结构，其中每个节点包含其子节点。

1.1 实现思路

1. 创建一个空对象map，用于存储每个节点的引用。
2. 遍历扁平数据数组，将每个节点存储到map中，键为节点的id。
3. 再次遍历扁平数据数组，根据parentId将每个节点添加到其父节点的children数组中。
4. 最后，找到所有没有父节点的节点（即根节点），并将它们作为树的根。

1.2 代码实现

function flatToTree(flatData) {
    const map = {};
    const tree = [];

    // 将每个节点存储到map中
    flatData.forEach(item => {
        map[item.id] = { ...item, children: [] };
    });

    // 构建树结构
    flatData.forEach(item => {
        if (item.parentId !== null && map[item.parentId]) {
            map[item.parentId].children.push(map[item.id]);
        } else {
            tree.push(map[item.id]);
        }
    });

    return tree;
}

// 示例数据
const flatData = [
    { id: 1, parentId: null, name: 'Root' },
    { id: 2, parentId: 1, name: 'Child 1' },
    { id: 3, parentId: 1, name: 'Child 2' },
    { id: 4, parentId: 2, name: 'Grandchild 1' },
    { id: 5, parentId: 2, name: 'Grandchild 2' }
];

const treeData = flatToTree(flatData);
console.log(JSON.stringify(treeData, null, 2));

1.3 输出结果

[
  {
    "id": 1,
    "parentId": null,
    "name": "Root",
    "children": [
      {
        "id": 2,
        "parentId": 1,
        "name": "Child 1",
        "children": [
          {
            "id": 4,
            "parentId": 2,
            "name": "Grandchild 1",
            "children": []
          },
          {
            "id": 5,
            "parentId": 2,
            "name": "Grandchild 2",
            "children": []
          }
        ]
      },
      {
        "id": 3,
        "parentId": 1,
        "name": "Child 2",
        "children": []
      }
    ]
  }
]

2. tree数据扁平化

树形结构的数据通常包含嵌套的子节点，我们需要将其扁平化为一个数组，每个节点包含其id和parentId。

2.1 实现思路

1. 使用递归遍历树形结构。
2. 对于每个节点，将其添加到结果数组中，并记录其id和parentId。
3. 如果节点有子节点，递归处理每个子节点。

2.2 代码实现

function treeToFlat(treeData, parentId = null) {
    let flatData = [];

    treeData.forEach(node => {
        flatData.push({ id: node.id, parentId: parentId, name: node.name });
        if (node.children && node.children.length > 0) {
            flatData = flatData.concat(treeToFlat(node.children, node.id));
        }
    });

    return flatData;
}

// 示例数据
const treeData = [
    {
        id: 1,
        parentId: null,
        name: 'Root',
        children: [
            {
                id: 2,
                parentId: 1,
                name: 'Child 1',
                children: [
                    { id: 4, parentId: 2, name: 'Grandchild 1', children: [] },
                    { id: 5, parentId: 2, name: 'Grandchild 2', children: [] }
                ]
            },
            { id: 3, parentId: 1, name: 'Child 2', children: [] }
        ]
    }
];

const flatData = treeToFlat(treeData);
console.log(JSON.stringify(flatData, null, 2));

2.3 输出结果

[
  {
    "id": 1,
    "parentId": null,
    "name": "Root"
  },
  {
    "id": 2,
    "parentId": 1,
    "name": "Child 1"
  },
  {
    "id": 4,
    "parentId": 2,
    "name": "Grandchild 1"
  },
  {
    "id": 5,
    "parentId": 2,
    "name": "Grandchild 2"
  },
  {
    "id": 3,
    "parentId": 1,
    "name": "Child 2"
  }
]

3. 总结

本文介绍了如何将扁平数据转换为树形结构，以及如何将树形结构扁平化。这两种操作在前端开发中非常常见，尤其是在处理菜单、目录等数据结构时。通过掌握这些方法，可以更高效地处理复杂的数据结构。