JavaScript將具有父子關系的原始數據格式化成樹形結構數據(id,pid)

前幾天遇到一個樹型組件（類似樹形菜單）數據格式化的問題，由於后台把原始查詢的數據直接返回給前端，父子關系並未構建，因此需要前端JS來完成，后台返回的數據和下面的測試數據相似。

var data=[
{id:1,pid:0,text:'A'},
{id:2,pid:4,text:"E[父C]"},
{id:3,pid:7,text:"G[父F]"},
{id:4,pid:1,text:"C[父A]"},
{id:5,pid:6,text:"D[父B]"},
{id:6,pid:0,text:'B'},
{id:7,pid:4,text:"F[父C]"}
];

我們可以發現上面的測試數據有幾個特點，父節點與子節點不是順序排列的，也就是說按照id的順序，並不是先有父節點，然后有下面的子節點，順序是混亂的，再就是父子層級有很多，這里是3層。總結為：順序混亂，層級未知。

如果是順序排列，層級固定，可以投機取巧，寫法相對簡單，但是這里恰恰相反。因此給格式化造成了一定的困難，當遇到層級未知的時候，一般都會想到遞歸的寫法，這里我感覺用遞歸也不好做，因此我也就沒有向這方面去深入思考，這里就也不做多的說明。

那么我的做法比起遞歸來講更容易理解，先看下代碼。

function toTreeData(data){
    var pos={};
    var tree=[];
    var i=0;
    while(data.length!=0){
        if(data[i].pid==0){
            tree.push({
                id:data[i].id,
                text:data[i].text,
                children:[]
            });
            pos[data[i].id]=[tree.length-1];    
            data.splice(i,1);
            i--;
        }else{
            var posArr=pos[data[i].pid];
            if(posArr!=undefined){
                
                var obj=tree[posArr[0]];
                for(var j=1;j<posArr.length;j++){
                    obj=obj.children[posArr[j]];
                }

                obj.children.push({
                    id:data[i].id,
                    text:data[i].text,
                    children:[]
                });
                pos[data[i].id]=posArr.concat([obj.children.length-1]);
                data.splice(i,1);
                i--;
            }
        }
        i++;
        if(i>data.length-1){
            i=0;
        }
    }
    return tree;
}

前面的測試數據經過上面代碼中的方法格式化后如下：

[
    {
        "id": 1,
        "text": "A",
        "children": [
            {
                "id": 4,
                "text": "C[父A]",
                "children": [
                    {
                        "id": 7,
                        "text": "F[父C]",
                        "children": [
                            {
                                "id": 3,
                                "text": "G[父F]",
                                "children": []
                            }
                        ]
                    },
                    {
                        "id": 2,
                        "text": "E[父C]",
                        "children": []
                    }
                ]
            }
        ]
    },
    {
        "id": 6,
        "text": "B",
        "children": [
            {
                "id": 5,
                "text": "D[父B]",
                "children": []
            }
        ]
    }
]

原理很簡單，使用一個死循環來遍歷數組，循環跳出的條件是數組的長度為0，也就是說，循環內部會引起數組長度的改變。這里就幾個關鍵點做一下說明。

1. 為什么要用死循環？順序混亂，如果單次循環，子節點出現在父節點之前，子節點不好處理，這里做一個死循環相當於先把父節點全部找出，但是這里又不是簡單的先把所有的父節點找出，找的同時，如果這個節點父節點已經找到，那么可以繼續做后續操作;
2. 如何建立層級關系？代碼中有一個變量pos，這個用於保存每個已添加到tree中的節點在tree中位置信息，比如上面測試數據父節點A添加到tree后，那么pos中增加一條數據，pos={”1“:[0]}，1就是父節點A的id，這樣寫便於查找，[0]表示父節點A在tree的第一個元素，即tree[0]，如果某個位置信息為[1,2,3]，那么表示這個節點在tree[1].children[2].children[3]，這里的位置關系其實就是父子的層級關系。

上面的測試數據的pos信息如下：

{
    "1":[0],
    "2":[0,0,1],
    "3":[0,0,0,0],
    "4":[0,0],
    "5":[1,0],
    "6":[1],
    "7":[0,0,0]
}