js生成树结构

原数据与转换后生成数据

• 原数据

var arr = [{ id: 1, parentId: 0},
  {id: 2, parentId: 1},
  {id: 3, parentId: 2},
  {id: 4, parentId: 3},
  {id: 5, parentId: 2},
  {id: 6, parentId: 4},
  {id: 7, parentId: 0},
];

• 转换结构后的数据

[
  {
    id: 1,
    parentId: 0,
    children: [
      {
        id: 2,
        parentId: 1,
        children: [
          {
            id: 3,
            parentId: 2,
            children: [{ id: 4, parentId: 3, children: [{ id: 6, parentId: 4}] },
            ],
          },
          {id: 5, parentId: 2, children: [] },
        ],
      },
    ],
  },
  {id: 7, parentId: 0},
];

转换方法

一、递归处理

var sortNewArr = sortArr(arr, [], 0);
console.log(sortNewArr);
// 创建一个排序函数，包含三个参数
// arr: 需要处理的数据
// newArr: 用于存放处理后的数据
// parentId: 当前需要处理的 parentId
function sortArr(arr, newArr, parentId) {
  // 创建一个临时数据用于存放数据
  var tempArr = [];
  // 遍历数据，符合当前 parentId 的数据存放在临时数组 tempArr
  arr.forEach((item, index) => {if (item.parentId === parentId) {tempArr.push(item);
    }
  });
  // 当 newArr 中无数据时，说明使第一次执行递归函数，newArr 直接复制临时数组的数据
  if (newArr.length === 0) {newArr = tempArr;} else {
    // 非第一次递归，遍历存储数据的 newArr
    newArr.forEach(item => {
      // 当数据中数据含有 children，执行子递归。if (item.children) {sortArr(arr, item.children, parentId);
      }
      // 当数据 id 和当前 parentId 一致，为数据添加子元素
      if (item.id === parentId) {item.children = tempArr;}
    });
  }
  递归条件 parentId 自增
  parentId++;
  满足条件停止递归
  if (parentId > 6) {return;}
  // 递归调用
  sortArr(arr, newArr, parentId);
  return newArr;
}

二、利用对象是引用类型地址

// 原始数据
var arr = [{ id: 1, pId: 0},
  {id: 2, pId: 1},
  {id: 3, pId: 2},
  {id: 10, pId: 4},
  {id: 11, pId: 5},
  {id: 7, pId: 3},
  {id: 8, pId: 3},
  {id: 9, pId: 4},
  {id: 4, pId: 1},
  {id: 5, pId: 0},
  {id: 6, pId: 2},
  {id: 12, pId: 6},
];
// 创建排序函数
function sortArr(arr) {
  // 深拷贝一份数据
  var copy = JSON.parse(JSON.stringify(arr));
  // 创建一个存储数据的对象
  var obj = {};
  // 遍历数据，将数据所有数据添加到对象中，key 为数据 id，value 为原数据对象
  copy.forEach((item, index) => {obj[item.id] = item;
  });
  // 创建一个最终返回的数组
  var res = [];
  // 遍历数据开始处理
  copy.forEach(item => {
    // 将 root 数据添加进 res 数组，因为数据使引用类型，子元素数据都会带过来，下面的循环会处理子元素数据
    if (item.pId === 0) {res.push(item);
    }
    // 梳理子元素数据
    for (var key in obj) {
      当一层元素 id 和 二层元素 pId 一致，那么，二层遍历的元素就是一层遍历元素的 children
      if (item.id === obj[key].pId) {
        // 处理数据 children
        if (item.children) {item.children.push(obj[key]);
        } else {item.children = [obj[key]];
        }
      }
    }
  });
  return res;
}
var newArr = sortArr(arr);
console.log(newArr);