/**
已知后台传来的路由数据:
pid 为父级的id
id 为自身的id
找出父级把子集放在父级名下
* 1.遍历:找出id == pid的项
* 2.遍历自己找自己:开辟出一个独立的空间 用于自己对比自己
* 3.找出一项符合id == pid的项目 把索引收集到一个数组里,这些都是被移动过的 都删除或过滤
* 4.数组根据数组条件过滤
**/
const arr = [ {
id: 2,
pid: 0,
name: '0-2'
}, {
id: 3,
pid: 2,
name: '2-3'
}, {
id: 5,
pid: 2,
name: '2-5'
}, {
id: 6,
pid: 0,
name: '0-6'
}, {
id: 7,
pid: 6,
name: '6-7'
}, {
id: 8,
pid: 6,
name: '6-8'
}, {
id: 5,
pid: 3,
name: '3-5'
}, { id: 15, pid: 13, name: '3-5' },]
// id = pid pid那一项加children属性 并把id那项存进去
const ArrFn1 = arr => {
let filterArr = []
// id
arr.map(item => {
// pid
arr.map((item1,i) => {
if(item.id == item1.pid ){
// console.log(item,item1,'item')
if(!item.children){
item.children = []
// arr.splice(i,1)
}
// console.log(item,'item')
// console.log(item1,'item1')
// console.log(arr,'arr')
// console.log(i,'i')
// console.log('==================================')
item.children.push(item1)
filterArr.push(i)
// arr.splice(i,1)
}
})
})
return deleteArr(arr,filterArr)
}
const deleteArr = (arr,filterArr) => {
console.log(arr,filterArr)
return arr.filter((item,index) => {
// console.log(filterArr.indexOf(index))
return filterArr.indexOf(index) == -1
})
}
ArrFn1( arr )
console.log( ArrFn1( arr ) )
本文探讨如何以直观方式处理从后台接收到的路由数据。通过JavaScript,我们将解析、组织和利用这些数据来构建动态应用程序。理解这些数据对于前端开发者至关重要,因为它允许我们根据用户的操作无缝导航和更新页面。
1万+

被折叠的 条评论
为什么被折叠?



