详解JavaScript中扁平与树形数据的转换

我来为你详细讲解“详解JavaScript中扁平与树形数据的转换”的完整攻略。

前言

在前端开发中，我们经常需要把扁平数据转换为树形结构数据，或者将树形结构数据转换为扁平数据，这种数据格式转换操作在开发中很常见。本篇文章将对JavaScript中扁平数据和树形结构数据的转换进行详细介绍。

扁平数据与树形结构数据

扁平数据

扁平数据是指没有嵌套结构，所有数据都在同一层级下的数据结构。例如：

const flatData = [
  {id: 1, name: 'A', parentId: null},
  {id: 2, name: 'B', parentId: null},
  {id: 3, name: 'C', parentId: 1},
  {id: 4, name: 'D', parentId: 1},
  {id: 5, name: 'E', parentId: 2},
  {id: 6, name: 'F', parentId: 4},
  {id: 7, name: 'G', parentId: 5},
];

上面的扁平数据中，id表示节点编号，name表示节点名称，parentId表示父节点编号。

树形结构数据

树形结构数据是指具有嵌套关系的数据结构，例如：

const treeData = [
  {
    id: 1,
    name: 'A',
    children: [
      {
        id: 3,
        name: 'C',
      },
      {
        id: 4,
        name: 'D',
        children: [
          {
            id: 6,
            name: 'F',
          }
        ]
      }
    ]
  },
  {
    id: 2,
    name: 'B',
    children: [
      {
        id: 5,
        name: 'E',
        children: [
          {
            id: 7,
            name: 'G',
          }
        ]
      }
    ]
  }
];

上述树形数据中，每个节点都有一个唯一的编号id和名称name，还有子节点children。

扁平数据转树形结构数据

在具体实现扁平数据转树形结构数据的过程中，我们可以通过遍历扁平数据，将每个节点依次添加到相应的父节点的children数组中。

下面是一个示例代码，具体的注释可以帮助理清转换的流程：

function flatToTree(flatData) {
  // 通过map构造一个节点编号到节点对象的映射
  const nodeMap = flatData.reduce((map, node) => {
    map[node.id] = node;
    return map;
  }, {});

  // 通过遍历构造树形结构
  const treeData = [];
  for (const node of flatData) {
    const parent = nodeMap[node.parentId];
    if (parent) {
      // 如果有父节点，就将自己加入父节点的children数组中
      (parent.children || (parent.children = [])).push(node);
    } else {
      // 如果没有父节点，就认为自己是根节点
      treeData.push(node);
    }
  }
  return treeData;
}

上面的代码首先是通过map构造一个节点编号到节点对象的映射，这样方便我们在后续的遍历操作中快速找到父节点对象。接着，遍历整个扁平数据，通过nodeMap找到每个节点的父节点，然后将自己加入父节点的children数组中，最后返回整个树形结构数据。

下面我们执行一下上面代码的示例：

const flatData = [
  {id: 1, name: 'A', parentId: null},
  {id: 2, name: 'B', parentId: null},
  {id: 3, name: 'C', parentId: 1},
  {id: 4, name: 'D', parentId: 1},
  {id: 5, name: 'E', parentId: 2},
  {id: 6, name: 'F', parentId: 4},
  {id: 7, name: 'G', parentId: 5},
];

const treeData = flatToTree(flatData);
console.log(treeData);

输出结果：

[
  {
    "id": 1,
    "name": "A",
    "children": [
      {
        "id": 3,
        "name": "C"
      },
      {
        "id": 4,
        "name": "D",
        "children": [
          {
            "id": 6,
            "name": "F"
          }
        ]
      }
    ]
  },
  {
    "id": 2,
    "name": "B",
    "children": [
      {
        "id": 5,
        "name": "E",
        "children": [
          {
            "id": 7,
            "name": "G"
          }
        ]
      }
    ]
  }
]

树形结构数据转扁平数据

接下来让我们来介绍树形结构数据转扁平数据。

在具体实现树形结构数据转扁平数据的过程中，我们可以通过递归遍历整个树形结构，将每个节点依次添加到扁平数据中。

下面是一个示例代码，具体的注释可以帮助理清转换的流程：

function treeToFlat(treeData) {
  const flatData = [];

  function traverse(node, parentId) {
    // 构造节点对象
    const flatNode = {
      id: node.id,
      name: node.name,
      parentId
    };
    flatData.push(flatNode);

    // 遍历子节点
    if (node.children) {
      for (const child of node.children) {
        traverse(child, node.id);
      }
    }
  }

  // 从根节点开始遍历
  for (const node of treeData) {
    traverse(node, null);
  }

  return flatData;
}

上面的代码首先是通过traverse函数递归遍历整个树形结构，将每个节点构造成扁平数据格式，然后添加到flatData数组中。关键在于递归调用traverse函数时要传入父节点的id作为parentId，这样可以准确地还原出节点的父子关系。