js 트 리 데이터 구조 변환, 메뉴 트 리 데이터 구조 변환, 무한 삽입 가능

3674 단어
var list = [
{
	"parent_id" : "a",
	"id" : "a_1",
	"name" : "a_1"
},{
	"id":"a",
	"name": "a"
},{
	"parent_id" : "a",
	"id" : "a_2",
	"name" : "a_2"
},{
	"parent_id" : "a",
	"id" : "a_3",
	"name" : "a_3"
},{
	"parent_id" : "b",
	"id":'b_1',
	"name": "b_1"
},{
	"parent_id" : "b_1",
	"id": "b_1_1",
	"name": "b_1_1"
},{
	"parent_id" : "b_1_1",
	"id": "b_1_1_1",
	"name": "b_1_1_1"
},{
	"id": "b",
	"name": "b"
},{
	"parent_id" : "c",
	"id": "c_1",
	"name": "c_1"
}];

원시 데이터 구 조 는 위 와 같 습 니 다. 배열 의 상하 관 계 는 무질서 합 니 다. 트 리 구조 로 전환 하 는 것 은 다음 과 같은 두 가지 방식 을 사용 할 수 있 습 니 다. 1. 이중 순환 을 사용 하 는 동시에 변수의 인용 관 계 를 이용 하여 각 항목 에 대응 하 는 하위 노드 를 찾 고 인용 관 계 를 추가 할 수 있 습 니 다. 코드 는 다음 과 같 습 니 다.
function fomartToTree(list){
  //filter          ,   children     ,                 
  //  ,        for  
  return list.filter(function(parent){
	//         ,           
	let branchArr = list.filter(function(child){
		return parent.id == child.parent_id;
	});
	//        children  
	parent.children = branchArr;
	return !parent.parent_id; //      
  });
}

let time=Date.now();
let result= fomartToTree(list);
console.log('  :'+(Date.now()-time)+'ms');
console.log('        :',JSON.stringify(result,null,2));

위의 이런 방법 은 코드 의 양 이 적 고 효율 도 높 아서 문 제 를 완벽 하 게 해결 할 수 있다.관심 이 있 으 면 두 번 째 방법 을 보 셔 도 됩 니 다.
2. 순환 + 재 귀 를 사용 합 니 다. 이것 은 비교적 직접적인 방법 이지 만 사용 할 수 있 습 니 다. 잘못된 노드 를 걸 러 낼 수 있 습 니 다. 코드 는 다음 과 같 습 니 다.
function formatList(data) {
	var findParent=function (child,rsArr) {
		var isfind=false;
		for(var i=0,len=rsArr.length;i

실행 결과:
        : [
  {
    "id": "a",
    "name": "a",
    "children": [
      {
        "parent_id": "a",
        "id": "a_2",
        "name": "a_2",
        "children": []
      },
      {
        "parent_id": "a",
        "id": "a_3",
        "name": "a_3",
        "children": []
      },
      {
        "parent_id": "a",
        "id": "a_1",
        "name": "a_1",
        "children": []
      }
    ]
  },
  {
    "id": "b",
    "name": "b",
    "children": [
      {
        "parent_id": "b",
        "id": "b_1",
        "name": "b_1",
        "children": [
          {
            "parent_id": "b_1",
            "id": "b_1_1",
            "name": "b_1_1",
            "children": [
              {
                "parent_id": "b_1_1",
                "id": "b_1_1_1",
                "name": "b_1_1_1",
                "children": []
              }
            ]
          }
        ]
      }
    ]
  }
]

좋은 웹페이지 즐겨찾기