<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{ id: 1, name: "办公管理", pid: 0 },
{ id: 2, name: "请假申请", pid: 1 },
{ id: 3, name: "出差申请", pid: 1 },
{ id: 4, name: "请假记录", pid: 2 },
{ id: 5, name: "系统设置", pid: 0 },
{ id: 6, name: "权限管理", pid: 5 },
{ id: 7, name: "用户角色", pid: 6 },
{ id: 8, name: "菜单设置", pid: 6 }
// 如果将整个作为一个函数时 避免多次调用, 删除所有的 children
// data.forEach(function (item) {
// 1. 根据数据判断pid为0是最高父级,依次子级为pid等于id 所以要做对比
// 2. 以原数组每一项的id作为新数组的key 索引得到第二套数据.但不影响
data.forEach(function (item) {
// 3. 打印结果console.log(map === data), 值为false
// 4. console.log(map === data) --- false
// 5. 循环原数组中每一项, 如果pid等于id 则当前项为子级, 另一项为父级
// 6. 新数组map对应的索引为1-8,等于原数组id,这样就可以做出判断. 新数组map[item.pid === key索引值],则这个值等于key索引与之对应的子级
// 7. 这里理解起来有点绕, 意思就是在循环的时候,将每一项中的pid都作为map新数组的索引,及当循环的pid等于 1 时 { id: 2, name: "请假申请", pid: 1 },{ id: 3, name: "出差申请", pid: 1 },
// 我们就得到了索引为1的map值 { id: 1, name: "办公管理", pid: 0 }
data.forEach(function (item) {
// 此时的map[item.pid] 满足索引条件从0开始, 但是map[]里面没有索引为0的数据,只有1-8
// 接着判断.等到mpa[item.pid] 其中的item.pid === 1 也就是map[1]
var parent = map[item.pid]
parent.children.push(item)