Javascript 树结构数据转换，用循环代替递归防止栈溢出

用循环代替递归防止栈溢出

有些场景可能需要我们把平级的数据转换成树结构，例如：

let data = [
    { id: 1, pid: 0 },
    { id: 2, pid: 1 },
    { id: 3, pid: 2 },
    { id: 4, pid: 3 },
    { id: 5, pid: 3 },
    { id: 6, pid: 3 },
    { id: 4, pid: 10 },
    { id: 7, pid: 10 },
    { id: 10, pid: 20 }
]  

这样的数据我们一般想到的就是一个递归就搞定，但是递归嵌套太多会出现性能问题。所有可以用循环来代替递归例如：

  function computedTree(treeData, id, pid) {
    let arr = []
    treeData.forEach((item, index) => {
        let isParent = false
        treeData.forEach(item2 => {
            if (item[pid] === item2[id]) {
                isParent = true
                !Array.isArray(item2.children) && (item2.children = [])
                item2.children.push(item)
            }
        })
        !isParent && arr.push(index)
    })
    return treeData.filter((item, index) => arr.indexOf(index) > -1)
}
let result = computedTree(data, 'id', 'pid')

console.log(JSON.stringify(result))

//result
[{"id": 1,"pid": 0,
    "children": [
        {"id": 2,"pid": 1,"children": [
            {"id": 3,"pid": 2,"children": [
                {"id": 4,"pid": 3}, 
                {"id": 5,"pid": 3}, 
                {"id": 6,"pid": 3}
            ]}
        ]}
    ]}, 
    {"id": 10,"pid": 20,"children": [{"id": 4,"pid": 10}, {"id": 7,"pid": 10}]
}]

这里的原理很简单，就是利用对象的 浅拷贝，把所有子父关系做一个转换就得到结果。然后把没有父级的做为顶级返回就得到想要的数据，若不想污染数据源可先 cloneDeep后再做计算，