一、扁平转树形

在 JavaScript 中,可以使用递归算法将扁平的数据转换为树形结构。

扁平数据通常是一个带有 parentId 属性的数组,而树形结构通常是一个带有 children 属性的对象。

下面是一个简单的例子,它演示了如何将扁平数组转换为树形对象:

let data = [
    { id: 1, pid: 0, name: '沃尔玛' },
    { id: 2, pid: 0, name: '生鲜区' },
    { id: 3, pid: 1, name: '日用品区' },
    { id: 4, pid: 2, name: '鱼' },
    { id: 5, pid: 2, name: '牛肉' },
    { id: 6, pid: 13, name: '卫生纸' },
    { id: 7, pid: 3, name: '牙刷' },
    { id: 8, pid: 7, name: '电动牙刷' },
    { id: 9, pid: 7, name: '普通牙刷' }
];

function convertToTree(flatData) {
    let treeData = [];
    let map = new Map(); 
    let outputObj, pid;
    for (let i = 0; i < flatData.length; i++) {
        pid = flatData[i].pid;
        if (map.has(pid)) {
            if (!map.get(pid).childrens)
                map.get(pid).childrens = [];
            let obj = new Object(flatData[i]);
            map.get(pid).childrens.push(obj);
            map.set(flatData[i].id, obj);
        } else if (!map.has(pid) && pid == 0) {
            outputObj = new Object(flatData[i]);
            treeData.push(outputObj);
            map.set(flatData[i].id, outputObj);
        }
    }
    return treeData;
}

let TreeData = convertToTree(data);
console.log(TreeData);

 

、树形转扁平

let data = [{
    id: 1, pid: 0, name: '沃尔玛', childrens: [
        {
            id: 2, pid: 1, name: '生鲜区', childrens: [
                { id: 4, pid: 2, name: '鱼' },
                { id: 5, pid: 2, name: '牛肉' }
            ]
        },
        {
            id: 3, pid: 1, name: '日用品区', childrens: [
                { id: 6, pid: 3, name: '卫生纸' },
                { id: 7, pid: 3, name: '牙刷' }
            ]
        }
    ]
}];

function convertToFlat(treeData) {
    let flatData = [];
    for (let i = 0; i < treeData.length; i++) {
        if (treeData[i].childrens) {
            flatData.push(...convertToFlat(treeData[i].childrens));
            delete treeData[i].childrens;
        }
        flatData.push({ ...treeData[i] });
    }
    return flatData;
}

let flatData = convertToFlat(data);
console.log(flatData);