JavaScript преобразует плоские данные в данные древовидной структуры и преобразует древовидную структуру в плоские данные.

Преобразование плоских данных в данные дерева

Ниже приведен пример функции, которая преобразует плоские данные в данные с древовидной структурой с помощью JavaScript:

function flatToTree(flatData, idKey, parentKey, childrenKey) {
    
    
  const tree = [];
  const map = {
    
    };

  // 将所有节点存储到map中
  flatData.forEach(node => {
    
    
    map[node[idKey]] = node;
    node[childrenKey] = [];
  });

  // 遍历所有节点，将其添加到对应的父节点下
  flatData.forEach(node => {
    
    
    const parent = map[node[parentKey]];
    if (parent) {
    
    
      parent[childrenKey].push(node);
    } else {
    
    
      tree.push(node);
    }
  });

  return tree;
}

Функция принимает четыре параметра:

• flatData: Данные плоского слоя, то есть массив, содержащий все узлы.
• idKey: ключевое имя идентификатора узла.
• parentKey: ключевое имя идентификатора родительского узла.
• childrenKey: ключевое имя массива дочерних узлов.

Сначала функция создает пустой массив древовидных структур treeи пустой объект карты узлов map. Затем выполните итерацию по всем узлам, сохраните их в mapфайл и добавьте к каждому узлу пустой массив дочерних элементов. Затем снова пройтись по всем узлам, добавить их в соответствующий родительский узел, если родительского узла нет, добавить его в treeмассив. Наконец, верните treeмассив.

Пример использования:

const flatData = [
  {
    
     id: 1, name: 'Node 1', parentId: null },
  {
    
     id: 2, name: 'Node 2', parentId: 1 },
  {
    
     id: 3, name: 'Node 3', parentId: 1 },
  {
    
     id: 4, name: 'Node 4', parentId: 2 },
  {
    
     id: 5, name: 'Node 5', parentId: 2 },
  {
    
     id: 6, name: 'Node 6', parentId: 3 },
  {
    
     id: 7, name: 'Node 7', parentId: null },
];

const treeData = flatToTree(flatData, 'id', 'parentId', 'children');
console.log(treeData);

Выходной результат:

[
  {
    
    
    "id": 1,
    "name": "Node 1",
    "parentId": null,
    "children": [
      {
    
    
        "id": 2,
        "name": "Node 2",
        "parentId": 1,
        "children": [
          {
    
    
            "id": 4,
            "name": "Node 4",
            "parentId": 2,
            "children": []
          },
          {
    
    
            "id": 5,
            "name": "Node 5",
            "parentId": 2,
            "children": []
          }
        ]
      },
      {
    
    
        "id": 3,
        "name": "Node 3",
        "parentId": 1,
        "children": [
          {
    
    
            "id": 6,
            "name": "Node 6",
            "parentId": 3,
            "children": []
          }
        ]
      }
    ]
  },
  {
    
    
    "id": 7,
    "name": "Node 7",
    "parentId": null,
    "children": []
  }
]

Преобразование данных дерева в плоские данные
Ниже приведена функция JavaScript, которая рекурсивно преобразует данные дерева в плоские данные:

function flattenTreeData(treeData, parentId = null, result = []) {
    
    
  treeData.forEach(node => {
    
    
    const {
    
     id, children, ...rest } = node;
    result.push({
    
     id, parentId, ...rest });
    if (children) {
    
    
      flattenTreeData(children, id, result);
    }
  });
  return result;
}

Функция принимает три параметра:

• treeData: Данные древовидной структуры должны быть массивом.
• parentId: идентификатор родительского узла текущего узла, начальное значение равно null.
• result: Массив, используемый для хранения данных плоского слоя, начальное значение равно [].

Сначала функция проходит через каждый узел данных древовидной структуры, преобразует их в плоский формат данных и добавляет в resultмассив. Затем, если у узла есть дочерние узлы, flattenTreeDataрекурсивно вызовите функцию, чтобы преобразовать дочерние узлы в плоский формат данных и добавить их в resultмассив.

Наконец, функция возвращает resultмассив, содержащий плоский формат данных всех узлов.