js平层数组转树形结构（解决数据处理后源数据篡改）

js平层数组转树形结构

在前端实际开发中经常遇到数据格式转换的问题，
调用后端接口后拿到的数据结构不一定是我们想要的结构
比如需要树形数据，但是前端拿到的是平层，这时候就需要进行数据转换。

// An highlighted block
let list = [{
    
			"id": 1,
			"name": "Level1",
			"pid": 0
		},
		{
    
			"id": 2,
			"name": "Level1-1",
			"pid": 1
		},
		{
    
			"id": 3,
			"name": "Level1-2",
			"pid": 1
		},
		{
    
			"id": 4,
			"name": "Level1-1-1",
			"pid": 2
		},
		{
    
			"id": 5,
			"name": "Level1-1-2",
			"pid": 2
		},
		{
    
			"id": 6,
			"name": "Level1-3",
			"pid": 1
		},
		{
    
			"id": 7,
			"name": "Level1-3-1",
			"pid": 6
		},
		{
    
			"id": 8,
			"name": "Level1-2-1",
			"pid": 3
		},
		{
    
			"id": 9,
			"name": "Level1-3-2",
			"pid": 6
		}
	];
	function getTree(data){
    
		const result = []
		const temp = {
    }; // 临时存储
			data.forEach(item => {
    
				temp[item.id] = item;
			});
			data.forEach(item => {
    
				const parent = temp[item.pid]; 
				if(parent) {
    
					(parent.children || (parent.children = [])).push(item);
				} else {
    
					result.push(item);
				}
			});
			return result;
		}
		console.log(getTree(list));

此时输出的即为想要的树形结构

但这有一个弊端，原数据被篡改了，不再是开始的平层数据，而是多加了很多分级children
此时要想让原数据不变，有两种方式：

1、深拷贝

// An highlighted block
function deepCopy (data) {
    
		const newobj = data.constructor === Array ? [] : {
    }; // 判断类型
		if(typeof data !== 'object'){
    
		    return;
		}
		for(let i in data){
     // 递归
		    newobj[i] = typeof data[i] === 'object' ? deepCopy(data[i]) : data[i];
		        }
		   return newobj
		}
	function getTree(data){
    
		const result = [];
		// const map = [];
		const temp = {
    }; // 临时存储
			data.forEach(item => {
    
				temp[item.id] = item;
				// map.push(Object.assign({},item)); // 另一种方式，es6新特性
			});
			// map.forEach(item => {
    
				// temp[item.id] = item;
			// });
			// map.forEach(item => {
    
			data.forEach(item => {
    
				const parent = temp[item.pid]; 
				if(parent) {
    
					(parent.children || (parent.children = [])).push(item);
				} else {
    
					result.push(item);
				}
			});
			return result;
		}
		console.log(getTree(deepCopy(list)));

由于实习导师说深拷贝会较大耗费内存，要求使用递归解法，于是又有了下一种方法：

2、递归

// An highlighted block
	function getTree(data, firstId) {
    
		let temp = [];
		const result = [];
		data.forEach(function(item) {
    
			if (item.pid === firstId) {
     // 当递归第一次时创建新对象
				const newObj = {
    
					'name': item.name,
					'id': item.id
				}; // 重新定义obj
				temp = getTree(data, item.id); // 递归开始
				if (temp.length) {
     // 多层children
					newObj.children = temp;
				}
				result.push(newObj)
			}
		});
		return result
	}
	console.log(getTree(list, 0))

如此一来功能实现的同时减少了代码量，提高了性能。

总结：

在JavaScript中，一个变量赋值给另一个变量时，实际上是将另一个变量指向相同的地址，当一个值发生改变，实际上是改变了内存中的存储内容，所以所有指向这个地址的变量都相应变化了。此时解决方案即如上所解。
当然，使用JSON.stringify后parse也是一个简单的方法
但是在换成别的赋值是创建副本的语言，这种方式就行不通了