把帶有父子關係的數組轉換成tree

先來看一下數據格式

content: [
    { 'name': '拉祜族', 'code': '24', 'parentCode': '2'},
    {'name': '哈薩克族', 'code': '17', 'parentCode': '1'},
    {'name': '水族', 'code': '25', 'parentCode': '2'},
    {'name': '漢族', 'code': '1' },
    {'name': '郾城', 'code': '5', 'parentCode': '4' },
    {'name': '朝鮮族', 'code': '10', 'parentCode': '1'},
    {'name': '河南', 'code': '3', 'parentCode': '25' },
    {'name': '漯河', 'code': '4', 'parentCode': '3'},
    { 'name': '蒙古族', 'code': '2'}
  ]
複製代碼

媽呀累死了，爲了讓看到的人能有更好的理解，格式化這樣的數據也是費老鼻子勁了，首先 code = 1 和 code = 2 是 root 和 個有兩個children code = 5 的 parent 是 code = 4 , code = 4 的 parent code = 3 , code = 3 的 parent code = 25,關係就是這樣的了。

封裝公共方法須要的考慮幾個點

• 須要 list 數據 content
• 經過 parentCode 來找關係
• code 是來作惟一的值若是用id呢
• 找到葉節點用什麼做爲key呢

因此在調用方法的時候須要傳遞content 和 配置項，沒明白下邊結合代碼會更容易理解

// 第一個參數數據， 第二個參數就是上邊總結的 3個點 怎麼經過配置形式
    buildTree(content, {
      code: 'code',
      parentCode: 'parentCode',
      children: 'children'
    })
複製代碼

想到這個地方不少人會想到用遞歸的形式，可是遞歸會很小號內存的，好比有有1000條數據，若是是遞歸的話 有1000條數據，須要循環1000 次 那就是 執行 1000 * 1000 , 在設計場景中 1000 條數據並不算多， 就會形成瀏覽器卡頓很長時間甚至，卡死的，直接上代碼。

buildTree (data, config) {
    // 設置 三個變量就是爲了 動態的查找 data 的數據
    let code = config.code
    let parentCode = config.parentCode
    let children = config.children
    // idMap 利用 code的值 做爲key, 由於 parentCode 的值指向的 key
    let idMap = {}
    // 最終要返回的數據
    let jsonTree = []
    // 若是有1000 條數據，最多才循環了 2000 次，瀏覽器執行 2000 次的速度是很是快的
    data.forEach(item => {
        // 這個地方就是爲了作一張地圖， 能經過 parentCode 不經過循環快速查找
        idMap[item[code]] = item
    })
    data.forEach(item => {
        // item 的 parentCode 其實 就是 parent 的 code 因此 在 idMap 中能快速定位
        let parent = idMap[item[parentCode]]
        if (parent) {
            // 若是 parent[children] 不存在就 等於 空數組
            !parent[children] && (parent[children] = [])
            parent[children].push(item)
        } else {
            // 走到這裏說明沒有 parent
            jsonTree.push(item)
        }
    })
}
複製代碼

看到這裏可能還有同窗會疑問，上邊明明就查找了一級爲啥會造成一棵樹呢， 這裏就運用到了 javascript 的 引用類型的 特性， 第二個循環list 中每一個值都會循環一遍的，因此 code = 5 的 對象 是 push 到了code = 4 對象中, 當 循環到 code = 4 的 時候 code = 4 的 對象中已經多了一個 children 屬性，最重要的理解就在這裏