数组转换成树形结构

505 阅读2分钟

方式一(双层循环)

注意: 只能循环两次,若想找第三第四层级则找不到

const arr = [
	{ id: '29', pid: '', name: '总裁办' },
	{ id: '2c', pid: '', name: '财务部' },
	{ id: '2d', pid: '2c', name: '财务核算部' },
	{ id: '2f', pid: '2c', name: '薪资管理部' },
	{ id: 'd2', pid: '', name: '技术部' },
	{ id: 'd3', pid: 'd2', name: 'Java研发部' }
]


// const arr = [
// 	{ id: '29', pid: '', name: '总裁办' },
// 	{
// 		id: '2c',
// 		pid: '',
// 		name: '财务部',
// 		children: [
//       { id: '2d', pid: '2c', name: '财务核算部' },
//       { id: '2f', pid: '2c', name: '薪资管理部' }
//     ]
// 	},


// 	{
// 		id: 'd2',
// 		pid: '',
// 		name: '技术部',
// 		children: [ { id: 'd3', pid: 'd2', name: 'Java研发部' } ]
// 	}
// ]


function todo(arr) {
	/* 
  1、循环  查找 pid===id  相同的
  2、找到后:需要将 pid这一项添加到id的这一项变成他的子children
   */
	var newArr = [] //  返回的数据  处理之后要得到的数组
	var map = {} //  方便查找数据  做的一个映射关系的对象
	arr.forEach((item) => {
		item.children = []
		map[item.id] = item //   {29:{ id: '29', pid: '', name: '总裁办' },2c:{}}


		/* map= {
      29:{ id: '29', pid: '', name: '总裁办' },
      2c: { id: '2c', pid: '', name: '财务部' },
      2d: { id: '2d', pid: '2c', name: '财务核算部' },
      2f: { id: '2f', pid: '2c', name: '薪资管理部' },
      d2: { id: 'd2', pid: '', name: '技术部' },
      d3: { id: 'd3', pid: 'd2', name: 'Java研发部' }
    }
     */
	})


	arr.forEach((item2) => {
		var parent = map[item2.pid] //  查找的是有根节点
		if (parent) {
			//  表示有子children
			/*  parent
      { id: 'd2', pid: '', name: '技术部' },
      { id: '2c', pid: '', name: '财务部' },
       */
			parent.children.push(item2)
			//  { id: 'd2', pid: '', name: '技术部',children:[{ id: 'd3', pid: 'd2', name: 'Java研发部' }] },
		} else {
			//  没有筛选到柚子节点的  没有筛选到pid 和id相同的
			newArr.push(item2)
		}
	})
	return newArr
}


console.log(todo(arr), 88)

方式二(递归算法)

const arr = [
	{ id: '29', pid: '', name: '总裁办' },
	{ id: '2c', pid: '', name: '财务部' },
	{ id: '2d', pid: '2c', name: '财务核算部' },
	{ id: '2f', pid: '2c', name: '薪资管理部' },
	{ id: 'd2', pid: '', name: '技术部' },
	{ id: 'd3', pid: 'd2', name: 'Java研发部' }
]
// 递归 自己调用自己
      function todo2(arr, pid) {
        const newArr = [];
        // 查找一级根据传进来的pid和每一项的pid
        arr.forEach((item) => {
          if (item.pid === pid) {
            // 1- 还需要往一级里面追加子children
            const children = todo2(arr, item.id);
            if (children) {
              // 判定二级节点
              item.children = children;
            }
            // 一级根节点
            newArr.push(item);
          }
        });
        return newArr;
      }
      console.log(todo2(arr, ""));