js平铺数组转树

js平铺数组转树

var data = [
      { id: "01", name: "张大大", pid: "", job: "项目经理" },
      { id: "02", name: "小亮", pid: "01", job: "产品leader" },
      { id: "03", name: "小美", pid: "01", job: "UIleader" },
      { id: "04", name: "老马", pid: "01", job: "技术leader" },
      { id: "05", name: "老王", pid: "01", job: "测试leader" },
      { id: "06", name: "老李", pid: "01", job: "运维leader" },
      { id: "07", name: "小丽", pid: "02", job: "产品经理" },
      { id: "08", name: "大光", pid: "02", job: "产品经理" },
      { id: "09", name: "小高", pid: "03", job: "UI设计师" },
      { id: "10", name: "小刘", pid: "04", job: "前端工程师" },
      { id: "11", name: "小华", pid: "04", job: "后端工程师" },
      { id: "12", name: "小李", pid: "04", job: "后端工程师" },
      { id: "13", name: "小赵", pid: "05", job: "测试工程师" },
      { id: "14", name: "小强", pid: "05", job: "测试工程师" },
      { id: "15", name: "小涛", pid: "06", job: "运维工程师" }
    ]

如果我们得到的是这样一个数组，想要通过tree组件显示在页面上，我们需要进行
转化结构，才可以渲染到页面上。

分析：
1.对象中的pid:对应的是父组件的id
2.封装一个函数

//将数组传进来
function tree(data){
	//先定义一个对象，保存后面需要用到的数据
		let map = {}
	//再定义一个数组，保存最后得到的大数组
		let arr = []
	//遍历数组，拿到每一个对象
		data.forEach(item=>{
	//将每一个对象的id作为属性名，属性值为遍历的每一个对象
		map[item.id] = item
		})
	//再次遍历数组
		data.forEach(item=>{
	//获取对象的pid，并且保存在一个变量中
		let parent = map[item.pid]
	//这里判断，如果parent为true,就将他push到对象的children属性下(这个children是自己定义的属性名)
	//如果没有，就直接添加到数组中去
		if(parent){
	//这里判断，parent.children如果有就直接添加，如果没有就创建数组添加
			parent.children || parent.children = []).push(item)
		}else{
			arr.push(item)
			}
		})
	//将数组返回出去
		return arr
			}
	console.log(tree(data))

最后得到的结果：



如果有不足，或者更好的方法建议留言哦！！