JavaScript 实现数组与树形结构相互转换

原始数组如下：

const arr = [
  { id: 1, title: '中国', pid: 0 },
  { id: 2, title: '俄罗斯', pid: 0 },
  { id: 3, title: '陕西省', pid: 1 },
  { id: 4, title: '西安市', pid: 3 },
  { id: 5, title: '雁塔区', pid: 4 },
  { id: 6, title: '重庆市', pid: 1 },
  { id: 7, title: '莫斯科', pid: 2 },
]

数组转树形结构

        可以选择使用递归或者循环来做，通过对其他资料的查询发现，使用递归时，在数据量特别大的情况容易出现栈溢出，因此选择使用循环来做。

function arrToTree(arr) {
    let res = []  // 存放返回数组
    if (!Array.isArray(arr)) return res // 判断是否为数组格式
    let map = {}
    arr.forEach(item => {
        map[item.id] = item
    })
    arr.forEach(item => {
        let parent = map[item.pid]
        if (parent) {
            (parent.children || (parent.children = [])).push(item)
        } else {
            res.push(item)
        }
    })
    return result
}

var tree = arrToTree(arr)
console.log(tree)

其树形结构如下所示：

树形结构转换成数组

使用上述的树形结构进行数组转换。进行树形转换使用递归算法结合reduce，更好理解一点吧。

function treeToArr(tree) {
    return res.reduce((pre, cur) => {
        if (!cur.children) {
            // 如果不存在 children 节点，则直接保存下来，否则进行递归调用
            pre.push(cur)
        } else {
            let child = treeToArr(cur.children)
            delete cur.children
            pre.push(cur, ...child)
        }
        return pre
    }, [])
}

var array = treeToArr(tree)
console.log(array)

其结果如下：

 参考：数组转树/树转数组_Float544的博客-CSDN博客