美文网首页
js生成树结构

js生成树结构

作者: 麓语 | 来源:发表于2019-08-22 09:30 被阅读0次

原数据:

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生成树结构

    原数据: 期望生成: 方式一:递归 方式二:利用对象是引用类型地址

  • js 根据pid创建树结构

    生成的数据 js 树结构转 pid 格式https://www.jianshu.com/p/3efcdf0ac826

  • 654. Maximum Binary Tree

    思路:正常遍历生成树结构即可代码:

  • 【js】实现DOMReady

    什么是DOMReady? 一个被封装的方法,用以当浏览器生成DOM树结构后就开始解析某些js代码。 为什么需要DO...

  • js domready

    1,什么是DOMReady? 一个被封装的方法,用以当浏览器生成DOM树结构后就开始解析某些js代码 2,为什么需...

  • JQuery小结

    一、页面加载 JQ的页面加载比JS要快,当整个dom树结构生成完毕后就会加载 JQ页面加载不存在覆盖问题,加载的时...

  • 通过递归生成树形结构数据

    如下数据: 生成树结构代码: 转换后的数据: 根据树形数据生成树形文档

  • JS树结构操作

    一、遍历树结构 1. 树结构介绍 JS中树结构一般是类似于这样的结构: 为了更通用,可以用存储了树根节点的列表表示...

  • js 树的各种骚操作,生成树,父子链,树推平

    js生成树结构 1、假树,利用共享内存实现,非真遍历,这个是一种比较直观的写法 2.假树, 同第一种原理,非直观写...

  • JS第七天-03

    DOM DOM树结构关系代码示例: 一、JS中标签关系 二、JS操作页面标签 三、JS操作DOM一般步骤 1、创建...

网友评论

      本文标题:js生成树结构

      本文链接:https://www.haomeiwen.com/subject/ntugsctx.html