트 리 데이터 구조 와 평면 데이터 상호 변환
23772 단어 js
평면 데이터 구조: 다음 과 같다.
1. 납작한 나무 모양
var data=[
{pid:0,id:'a',value:' '},
{pid:'a',id:01,value:' '},
{pid:01,id:301,value:' '},
{pid:01,id:302,value:' '},
{pid:'a',id:02,value:' '},
{pid:'a',id:03,value:' '},
{pid:0,id:'b',value:' '},
{pid:'b',id:11,value:' '},
{pid:'b',id:12,value:' '},
{pid:'b',id:13,value:' '},
{pid:0,id:'c',value:' '},
{pid:'c',id:21,value:' '},
{pid:'c',id:22,value:' '},
{pid:'c',id:23,value:' '},
];
function toTree(data){
let cloneData = JSON.parse(JSON.stringify(data)) //
let tree = cloneData.filter((father)=>{ //
let branchArr = cloneData.filter((child)=>{
return father.id == child.pid;//
});
if(branchArr.length>0){
father.children = branchArr; // , children ,
}
return father.pid==0;//
});
return tree; //
}
var tree=toTree(data);
console.log(tree);
// :
function toTree(data) {
// children,
data.forEach(function (item) {
delete item.children;
});
// id KEY map
var map = {};
data.forEach(function (item) {
map[item.id] = item;
});
var val = [];
data.forEach(function (item) {
// , pid, map id
var parent = map[item.pid];
// , , , ,
if (parent) {
(parent.children || ( parent.children = [] )).push(item);
} else {
// map ID, item val ,
val.push(item);
}
});
return val;
}
console.log(toTree(data))
2. 나무 모양 이 납작 하 게 변 한다.
var data=[
{id: "a",pid: 0,value: " ",children:[
{id: 01,pid: "a",value: " "},
{id: 02,pid: "a",value: " "},
{id: 03,pid: "a",value: " "},
]},
{id: "b",pid: 0,value: " ",children:[
{id: 11,pid: "b",value: " "},
{id: 12,pid: "b",value: " "},
{id: 13,pid: "b",value: " "},
]},
{id: "c",pid: 0,value: " ",children:[
{id: 21,pid: "c",value: " "},
{id: 22,pid: "c",value: " "},
{id: 23,pid: "c",value: " "},
]},
];
function toLine(data){
return data.reduce((arr, {id, value, pid, children = []}) =>
arr.concat([{id, value, pid}], toLine(children)), [])
return result;
}
var listarr=toLine(data);
console.log(listarr);
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.