對象數組轉爲樹結構

在平時的業務中，相信咱們必定都遇到過須要將後臺傳過來的一維數組轉爲樹結構。

var arr = [
  { id: 1, pid: -1, },
  { id: 2, pid: -1, },
  { id: 3, pid: -1, },
  { id: 4, pid: 1, },
  { id: 5, pid: 2, },
  { id: 6, pid: 3, },
  { id: 7, pid: 5, },
];

// 轉換以後的樹結構
var tree = [
  {
    "id": 1,
    "pid": -1,
    "children": [
      {
        "id": 4,
        "pid": 1
      }
    ]
  },
  {
    "id": 2,
    "pid": -1,
    "children": [
      {
        "id": 5,
        "pid": 2,
        "children": [
          {
            "id": 7,
            "pid": 5
          }
        ]
      }
    ]
  },
  {
    "id": 3,
    "pid": -1,
    "children": [
      {
        "id": 6,
        "pid": 3
      }
    ]
  }
]
複製代碼

簡單的方法

前提是層級固定，好比最多隻有3層，那麼咱們可能會寫出以下的代碼：

var arr = [
  { id: 1, pid: -1, },
  { id: 2, pid: -1, },
  { id: 3, pid: -1, },
  { id: 4, pid: 1, },
  { id: 5, pid: 2, },
  { id: 6, pid: 3, },
  { id: 7, pid: 5, },
];

function toTree(data) {
  var arr = [...data];
  // 查找一級
  var tree = arr.filter(v => v.pid == -1);
  tree.map(v => {
    // 查找二級
    v.children = arr.filter(({ pid }) => pid == v.id);
    if (v.children.length == 0) delete v.children;
    else {
      v.children.map(item => {
      // 查找三級
        item.children = arr.filter(({ pid }) => pid == item.id);
        if (item.children.length == 0) delete item.children;
        return item;
      });
    }
    
    return v;
  });

  return tree;
}
JSON.stringify(toTree(arr), null, ' ')
複製代碼

若是樹結構的層級固定，咱們能夠直接使用filter和map經過簡單的循環來生成樹結構。如此一來，代碼是簡單了，效率卻很是的低，由於肯定每一個元素的父子關係時都得遍歷一次原數組，當原數組很長的時候，執行時間就會變得很長。

另一個問題就是，樹結構的層級被寫死了，當樹結構的深度大於咱們的層級時，沒法遞歸生成樹結構。

那麼，怎麼解決這個問題呢？

可共用的函數

後來我想到了一個辦法，就是

• 先肯定第一層的子節點A，在肯定的時候就將其從原數組中刪去。
• 此時若是原數組非空，再遍歷全部的子節點A，查找屬於它的子節點，並將這些元素從原數組中刪去，此時得到了A的子節點B；若是爲空，就中止遞歸。
• 此時再判斷原數組是否非空，是的話再遍歷全部的子節點B，查找屬於它的子節點，並將這些元素從原數組中刪去；若是爲空，就中止遞歸。
• 遞歸判斷便可。

這裏主要使用的就是數組的splice方法，讓一維數組逐漸減小，直至數組爲空結束遞歸。

還有一個知識點就是**使用了對象的引用，在沒有拷貝對象的狀況，修改函數傳過去的對象就能夠改變原對象。**平時講究的都是純函數，這裏則剛好藉助了非純函數。

代碼以下：

var arr = [
  { id: 1, pid: -1, },
  { id: 2, pid: -1, },
  { id: 3, pid: -1, },
  { id: 4, pid: 1, },
  { id: 5, pid: 2, },
  { id: 6, pid: 3, },
  { id: 7, pid: 5, },
];

// @params data 一維數組
// @params pid 父id字段名
// @params id id字段名
// @return Array
function toTree(data, pid = 'pid', id = 'id') {
  var arr = [...data];
  var tree = [];
  for(let i = 0, len = arr.length; i < len; i++) {
    if (arr[i][pid] == -1) {
      tree.push(arr[i]);
      arr.splice(i, 1);
      // 這裏注意，刪除數組的其中一個元素後，下次索引不要 +1 便可訪問下一個元素，因此這裏 -1 以抵消 +1
      i = i - 1;
    }
  }

  getChild(arr, tree, pid, id);
  return tree;
}

function getChild(originArr, mapArr, pid, id) {
  // 若是一維數組爲空，則結束遞歸
  if (originArr.length == 0 || !mapArr) return ;

  for(let j = 0, len = mapArr.length; j < len; j++) {
    let item = mapArr[j];

    item.children = [];
    for(let i = 0; i < originArr.length; i++) {
      let obj = originArr[i];

      if (item[id] == obj[pid]) {
        item.children.push(obj);
        originArr.splice(i, 1);
        // 這裏注意，刪除數組的其中一個元素後，下次索引不要 +1 便可訪問下一個元素，因此這裏 -1 以抵消 +1
        i = i - 1;
      }
    }
    // 若是沒有子節點，就刪除children屬性
    if (item.children.length == 0) {
      delete item.children;
    } else {
      // 若是有子節點，就遞歸獲取下一級子節點
      getChild(originArr, item.children, pid, id);
    }
  }
}

toTree(arr)

JSON.stringify(toTree(arr), null, ' ')
複製代碼