列表形式数据转换为树形结构数据

用递归将父节点id传递给下一层,直至list.parent与parent.id没有匹配项后结束递归返回,将子节点添加到父节点上

//列表形式数据展示
let data = [
    { id: '1', name: '广东省', parent: null },
    { id: '10', name: '深圳市', parent: '1' },
    { id: '11', name: '广州市', parent: '1' },
    { id: '100', name: '南山区', parent: '10' },
    { id: '101', name: '评山区', parent: '10' },
    { id: '1000', name: '粤海街道', parent: '100' }
]

//递归法
function listToTree(list, parentId = null) {
    return list.filter(item => item.parent === parentId).map(item => {
        let children = listToTree(list, item.id)
        if (children.length > 0) {
            return {
                ...item,
                children
            }
        } else {
            return {
                ...item
            }
        }
    })
}

转换后树形结构如图

将树形结构数据转换回列表形式

深度优先遍历,将子节点遍历完后再遍历叶子节点

//递归法
function TreetoList(tree, newArr = []) {
    tree.forEach(item => {
        const { children } = item
        if (children) {
            delete item.children
            if (children.length) {
                newArr.push(item)
                return TreetoList(children, newArr)
            }
        }
        newArr.push(item)
    })
    console.log(newArr)
    return newArr
}