js 一维数组转多维(树形)的方法总结

根据id和pid来绑定上下级，子级用children，当然可以自己修改

方法一：递归

原理：

• 首先需要明确树状结构的特点，树由节点组成，每个节点可能有子节点。在将一维数组转换为树形结构时，需要根据节点之间的父子关系来构建。通常数组中的元素会包含一个表示父节点的标识符（如 parentId）和自身的标识符（如 id）。
• 递归构建的思路是先找到根节点（即 parentId 为特定值，如 null 或 0 的节点），然后遍历数组，对于每个非根节点，找到它的父节点，并将自己添加到父节点的子节点列表中。这个过程通过递归调用函数来实现，直到所有节点都被正确添加到树形结构中。

let data = [
    {id: 1, pid: null, name: '节点1'},
    {id: 2, pid: 1, name: '节点2'},
    {id: 3, pid: 1, name: '节点3'},
    {id: 4, pid: 2, name: '节点4'},
    {id: 5, pid: 3, name: '节点5'}
];
function convertToTreeData(list, id = null, linkId = 'id', parentId = 'pid') {
  const map = new Map();
  list.forEach(item => {
    item.children = [];
    map.set(item[linkId], item);
  });

  const treeData = [];
  list.forEach(item => {
    const parent = map.get(item[parentId]);
    if (parent) {
      parent.children.push(item);
    } else {
      treeData.push(item);
    }
  });

  return treeData;
}
let tree = convertToTreeData(data);
console.log(tree);

映射辅助法（对象）

原理：

• 这种方法首先创建一个节点映射对象，将数组中的每个节点的 id 作为键，节点对象本身作为值存储在这个映射中。然后再次遍历数组，对于每个节点，通过其 pid在映射中找到它的父节点，并将自己添加到父节点的子节点列表中。这种方法可以减少在查找父节点时的遍历次数，提高效率。

let data = [
    {id: 1, pid: null, name: '节点1'},
    {id: 2, pid: 1, name: '节点2'},
    {id: 3, pid: 1, name: '节点3'},
    {id: 4, pid: 2, name: '节点4'},
    {id: 5, pid: 3, name: '节点5'}
];

function buildTreeWithMap(data) {
    let nodeMap = new Map();
    let tree = [];

    // 构建节点映射
    data.forEach(item => {
        nodeMap.set(item.id, item);
    });

    data.forEach(item => {
        let parent = nodeMap.get(item.parentId);
        if (parent) {
            if (!parent.children) {
                parent.children = [];
            }
            parent.children.push(item);
        } else {
            tree.push(item);
        }
    });

    return tree;
}

let tree = buildTreeWithMap(data);
console.log(tree);