js中处理树形数据

平时开发中会经常碰到树形数据，而我们存储的数据往往是扁平的数据，需要在前端或者后端对数据进行进一步处理成前端组件需要的树形数据。在操作完树形数据后再转换成扁平数据发给后端。下面JavaScript 中处理树形数据的方法，包括构建树和解析树。

一、构建树

假设我们有一个扁平的数组数据，每个元素包含 id、parentId 和 name 等属性，我们可以将其构建为树形结构。以下是一个实现函数：

javascript 复制代码

function buildTree(arr, parentId = null) {
  let tree = [];
  arr.forEach(item => {
    if (item.parentId === parentId) {
      let children = buildTree(arr, item.id);
      if (children.length > 0) {
        item.children = children;
      }
      tree.push(item);
    }
  });
  return tree;
}

以下是使用示例：

javascript 复制代码

let flatData = [
  { id: 1, parentId: null, name: 'Root' },
  { id: 2, parentId: 1, name: 'Child 1' },
  { id: 3, parentId: 1, name: 'Child 2' },
  { id: 4, parentId: 3, name: 'Grandchild 1' }
];
let treeData = buildTree(flatData);
console.log(treeData);

解释：

buildTree 函数接收一个扁平数组 arr 和一个可选的 parentId 作为参数，默认为 null，用于表示根节点。
函数使用 forEach 遍历数组中的每个元素。
如果元素的 parentId 等于传入的 parentId，则递归调用 buildTree 函数查找其子节点，并将结果存储在 children 属性中。
最终将满足条件的元素添加到 tree 数组中。

二、解析树

假设我们有一个树形结构的数据，我们要将其解析为一个扁平的数组。以下是一个实现函数：

javascript 复制代码

function flattenTree(tree, parentId = null) {
  let flatArray = [];
  tree.forEach(item => {
    let newItem = {...item };
    newItem.parentId = parentId;
    flatArray.push(newItem);
    if (item.children) {
      flatArray = flatArray.concat(flattenTree(item.children, item.id));
    }
  });
  return flatArray;
}

以下是使用示例：

javascript 复制代码

let treeData = [
  {
    id: 1,
    name: 'Root',
    children: [
      { id: 2, name: 'Child 1' },
      {
        id: 3,
        name: 'Child 2',
        children: [
          { id: 4, name: 'Grandchild 1' }
        ]
      }
    ]
  }
];
let flatData = flattenTree(treeData);
console.log(flatData);

解释：

flattenTree 函数接收一个树形结构 tree 和一个可选的 parentId 作为参数，默认为 null。
函数使用 forEach 遍历树中的每个元素。
首先将当前元素复制到 newItem 中，并设置 parentId。
将 newItem 加入到 flatArray 中。
如果元素有 children，递归调用 flattenTree 函数将子节点添加到 flatArray 中，并将当前元素的 id 作为子节点的 parentId。