Javascript树型数据扁平化与扁平化数组转树型结构数据

前言

在前端开发中，我们经常会遇到树型结构的数据，也可能会遇到已经被扁平化了的数据，为了更方便的操作这些数据
我们就需要两个方法“扁平化数据”、“扁平化数据转树型数据”。

测试树型数据

const dataList = [
    {
        id: 1,
        name: '菜单A',
        children: [
            {
                id: 5,
                parentId: 1,
                name: '菜单A - 1'
            },
            {
                id: 6,
                parentId: 1,
                name: '菜单A - 2',
                children: [
                    {
                        id: 10,
                        parentId: 6,
                        name: '菜单A - 2 - 1'
                    }
                ]
            }
        ]
    },
    {
        id: 2,
        name: '菜单B',
        children: [
            {
                id: 7,
                parentId: 2,
                name: '菜单B - 1',
                children: [
                    {
                        id: 11,
                        parentId: 7,
                        name: '菜单B - 1 - 1'
                    }
                ]
            }
        ]
    },
    {
        id: 3,
        name: '菜单C',
        children: [
            {
                id: 8,
                parentId: 3,
                name: '菜单C - 1'
            }
        ]
    },
    {
        id: 4,
        name: '菜单D',
        children: [
            {
                id: 9,
                parentId: 4,
                name: '菜单D - 1'
            }
        ]
    }
]

扁平化数组方法

// 判断数组是否可用
const isAvailableArray = (arr) => Array.isArray(arr) && arr.length > 0;

function flatTree(array, parentId) {
    return array.reduce((tree, cur) => {
        // 拿到遍历数据的 children
        const children = cur.children
        // return 返回新的数组
        return [
            ...tree, // 解构 tree
            parentId ? { ...cur, parentId } : cur,
            // 判断当前的children是否可用，可用时直接继续调用flatTree方法，否则就是空数组
            ...(isAvailableArray(children) ? flatTree(children, cur.id) : [])
        ]
    }, [])
}

console.log(flatTree(dataList))

输出结果以下

扁平化数组转树型结构

const flatArray = [
    {
        "id": 1,
        "name": "菜单A",
    },
    {
        "id": 5,
        "parentId": 1,
        "name": "菜单A - 1"
    },
    {
        "id": 6,
        "parentId": 1,
        "name": "菜单A - 2",
    },
    {
        "id": 10,
        "parentId": 6,
        "name": "菜单A - 2 - 1"
    },
    {
        "id": 2,
        "name": "菜单B",
    },
    {
        "id": 7,
        "parentId": 2,
        "name": "菜单B - 1",
    },
    {
        "id": 11,
        "parentId": 7,
        "name": "菜单B - 1 - 1"
    },
    {
        "id": 3,
        "name": "菜单C",
    },
    {
        "id": 8,
        "parentId": 3,
        "name": "菜单C - 1"
    },
    {
        "id": 4,
        "name": "菜单D",
    },
    {
        "id": 9,
        "parentId": 4,
        "name": "菜单D - 1"
    }
]

function convertTree(flatArrayData, parentId, list = []) {
    flatArrayData.forEach((item) => {
        item.children = flatArrayData.filter((i) => i.parentId == item.id)
        if (item.parentId == parentId) {
            list.push(item)
        }
    })
    return list
}

console.log(convertTree(flatArray))

输出结果以下