把平铺的数组结构转成树状结构数组

1. 使用非递归方法

<script>
 
	/**
	* 把平铺的数组结构转成树形结构
	*/
	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 tranListToTreeData(list) {
	 // 1. 定义两个中间变量
	 const treeList = [],  // 最终要产出的树状数据的数组
				 map = {}        // 存储映射关系
	
	 // 2. 建立一个映射关系，并给每个元素补充children属性.
	 // 映射关系: 目的是让我们能通过id快速找到对应的元素
	 // 补充children：让后边的计算更方便
	 list.forEach(item => {
		 if (!item.children) {
			 item.children = []
		 }
		 map[item.id] = item
	 })
	
	
	//  {
	//    "29": { 'id': '29', 'pid': '',     'name': '总裁办', children:[] },
	//    '2c': { 'id': '2c', 'pid': '',     'name': '财务部', children:[] },
	//    '2d': { 'id': '2d', 'pid': '2c', 'name': '财务核算部', children:[]},
	//    '2f': { 'id': '2f', 'pid': '2c', 'name': '薪资管理部', children:[]},
	//    'd2': { 'id': 'd2', 'pid': '',     'name': '技术部', children:[]},
	//    'd3': { 'id': 'd3', 'pid': 'd2', 'name': 'Java研发部', children:[]}
	//  }
	
	 // 3. 循环
	 list.forEach(item => {
		 // 对于每一个元素来说，先找它的上级
		 //    如果能找到，说明它有上级，则要把它添加到上级的children中去
		 //    如果找不到，说明它没有上级，直接添加到 treeList
		 const parent = map[item.pid]
		 // 如果存在则表示item不是最顶层的数据
		 if (parent) {
			 parent.children.push(item)
		 } else {
			 // 如果不存在 则是顶层数据
			 treeList.push(item)
		 }
	 })
	 // 4. 返回出去
	 return treeList
	}
	
	const treeList = tranListToTreeData(arr)
	console.log(treeList);
	console.log(arr)
	// const arr1 = [
	//   { 'id': '29', 'pid': '',     'name': '总裁办',children: [] },
	//   { 'id': '2c', 'pid': '',     'name': '财务部', children:[
	//     { 'id': '2d', 'pid': '2c', 'name': '财务核算部',children: []},
	//     { 'id': '2f', 'pid': '2c', 'name': '薪资管理部',children: []},
	//   ] },
	//   { 'id': 'd2', 'pid': '',     'name': '技术部', children: [
	
	//     { 'id': 'd3', 'pid': 'd2', 'name': 'Java研发部',children: []}
	//   ]},
	// ]
	</script>

打印出来的结果:

2. 使用递归方法

<script>
 
	/**
	* 把平铺的数组结构转成树形结构
	*/
	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研发部'},
		{ 'id': 'd4', 'pid': 'd3', 'name': 'Java研发部-1组'}
	]
	
	// 在list找pid为第二次参数的元素，组成一个数组
	function findChildren(list, pid) {
		// 在list中根据pid来找元素
	 let treeList = []
	 treeList = list.filter(it => it.pid === pid)
	 /**
		* [
		*   { 'id': '29', 'pid': '',     'name': '总裁办',children:[] },
		*   { 'id': '2c', 'pid': '',     'name': '财务部' },
		*   { 'id': 'd2', 'pid': '',     'name': '技术部'}
		* ]
		* */
	
		treeList.forEach(item => {
			item.children = findChildren(list, item.id)
		})
	 return treeList
	}
	
	const treeList = findChildren(arr,'')
	console.log('转换之后的树',treeList);
	// console.log(arr)
	// const arr1 = [
	//   { 'id': '29', 'pid': '',     'name': '总裁办',children: [] },
	//   { 'id': '2c', 'pid': '',     'name': '财务部', children:[
	//     { 'id': '2d', 'pid': '2c', 'name': '财务核算部',children: []},
	//     { 'id': '2f', 'pid': '2c', 'name': '薪资管理部',children: []},
	//   ] },
	//   { 'id': 'd2', 'pid': '',     'name': '技术部', children: [
	
	//     { 'id': 'd3', 'pid': 'd2', 'name': 'Java研发部',children: []}
	//   ]},
	// ]
	</script>

打印出来的结果: