数组转树

将input数据格式转换为output数据格式

let input =  [{
    id: 1, val: '学校',  parentId: null
},{
    id: 2, val: '班级1', parentId: 1
},{
    id: 3, val: '班级2', parentId: 1
},{
    id: 4, val: '学生1', parentId: 2
},{
    id: 5, val: '学生2', parentId: 3
},{
    id: 6, val: '学生3', parentId: 3
}]

let output = {
    id: 1,
    val: '学校',
    children: [{
        id: 2,
        val: '班级1',
        children: [
            {
                id: 4,
                val: '学生1',
                children: null
            }
        ]
    }, {
        id: 3,
        val: '班级2',
        children: [
            {
                id: 5,
                val: '学生2',
                children: null
            },{
                id: 6,
                val: '学生3',
                children: null
            }
        ]
    }]
}

实现方式 使用递归只有一个根节点

const arrayToTree = (metadata = input) => {
  const { id, val } = metadata.find((item) => item.parentId === null);
  const root = {
    id,
    val,
    children: [],
  };
  const transfer = (id, data) => {
    let children = [];
    for (let i = 0; i < data.length; i++) {
      const item = data[i];
      if (item.parentId === id) {
        children.push({
          id: item.id,
          val: item.val,
          children: transfer(item.id, data),
        });
      }
    }
    return children;
  };
  root.children = transfer(root.id, metadata);
  return root;
};

  

不使用递归,利用复杂数据类型(对象)赋值为内存索引地址值

const listToTree = (
  data = [
    { id: 1, title: "child1", parentId: 0 },
    { id: 2, title: "child2", parentId: 0 },
    { id: 3, title: "child1_1", parentId: 1 },
    { id: 4, title: "child1_2", parentId: 1 },
    { id: 5, title: "child2_1", parentId: 2 },
    { id: 6, title: "child1_2", parentId: 5 },
  ]
) => {
  let map = {};
  let treeData = [];
  data.forEach((item) => {
    map[item.id] = { ...item, children: [] };
  });
  for (const key in map) {
    const item = map[key];
    if (item.parentId === 0) {
      treeData.push(item);
    } else {
      map[item.parentId].children.push(item);
    }
  }
  return treeData;
};

  

  

posted @ 2020-07-23 16:41  671_MrSix  阅读(131)  评论(0编辑  收藏  举报