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);
function sortArr(arr, newArr, parentId) {
  var tempArr = [];
  arr.forEach((item, index) => {
    if (item.parentId === parentId) {
      tempArr.push(item);
    }
  });
  if (newArr.length === 0) {
    newArr = tempArr;
  } else {
    newArr.forEach(item => {
      if (item.children) {
        sortArr(arr, item.children, parentId);
      }
      if (item.id === parentId) {
        item.children = tempArr;
      }
    });
  }
  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 = {};
  copy.forEach((item, index) => {
    obj[item.id] = item;
  });
  var res = [];
  copy.forEach(item => {
    if (item.pId === 0) {
      res.push(item);
    }
    for (var key in obj) {
      if (item.id === obj[key].pId) {
        if (item.children) {
          item.children.push(obj[key]);
        } else {
          item.children = [obj[key]];
        }
      }
    }
  });
  return res;
}
var newArr = sortArr(arr);
console.log(newArr);

你可能感兴趣的:(js生成树结构)