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);