一、將扁平的數(shù)據(jù)轉為樹形結構

在 js中，可以使用遞歸算法將扁平的數(shù)據(jù)轉換為樹形結構。

扁平數(shù)據(jù)通常是一個帶有 parentId 屬性的數(shù)組，而樹形結構通常是一個帶有 children 屬性的對象。

1、方法一

下面是一個簡單的例子，演示如何將扁平數(shù)組轉換為樹形對象：

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) {
            // '&& pid === 0' 判斷條件是為了只將 pid 為 0 作為根節(jié)點，其它值不作為根節(jié)點。
            // 如需將其它值也作為根節(jié)點，可將 'else if (!map.has(pid) && pid === 0)' 改為 'else'

            outputObj = new Object(flatData[i]);
            treeData.push(outputObj);
            map.set(flatData[i].id, outputObj);
        }
    }
    return treeData;
}

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

2、方法二

使用遞歸算法將扁平數(shù)組轉換為樹形對象：

const flatData = [
    { id: 1, name: 'Node 1', parentId: null },
    { id: 2, name: 'Node 2', parentId: 1 },
    { id: 3, name: 'Node 3', parentId: 2 },
    { id: 4, name: 'Node 4', parentId: 3 },
    { id: 5, name: 'Node 5', parentId: 3 }
];

function convertToTree(flatData, parentId = null) {
    const children = flatData.filter(node => node.parentId === parentId);
    if (!children.length) {
        return null;
    }
    return children.map(node => ({
        ...node,
        children: convertToTree(flatData, node.id)
    }));
}

const treeData = convertToTree(flatData);
console.log(treeData);

該算法的流程為：

• 使用 filter() 函數(shù)過濾出所有的子節(jié)點。
• 使用 map() 函數(shù)構造每個子節(jié)點的新結構，并使用遞歸來處理子節(jié)點的 children 屬性。

3、方法三

還有一些第三方庫可以幫助你轉換扁平數(shù)據(jù)為樹形結構，例如 lodash 中的 _.groupBy() 和 _.mapValues() 方法可以幫助你將扁平數(shù)據(jù)轉換為樹形數(shù)據(jù)。

const flatData = [
    { id: 1, name: 'Node 1', parentId: null },
    { id: 2, name: 'Node 2', parentId: null },
    { id: 3, name: 'Node 3', parentId: 1 },
    { id: 4, name: 'Node 4', parentId: 2 },
    { id: 5, name: 'Node 5', parentId: 2 }
];

const tree = _(flatData)
    .groupBy('parentId')
    .mapValues((children, parentId) => ({
        id: parentId || 'root',
        children: children.map(({ id, name, parentId }) => ({ id, name, parentId }))
    }))
    .values()
    .value();

console.log(tree)

在這種情況下，假設parentId為null的數(shù)據(jù)項是根節(jié)點,那么所有其它的數(shù)據(jù)項的 parentId 分別對應它的父節(jié)點，我們可以使用 groupBy() 來將所有節(jié)點根據(jù)它們的 parentId 分組，然后我們可以使用 mapValues() 來構造每個組的新結構。

4、方法四

const flatData = [
    { id: 1, name: 'Node 1', value: 1, parentId: null },
    { id: 2, name: 'Node 2', value: 2, parentId: 1 },
    { id: 3, name: 'Node 3', value: 3, parentId: 2 },
    { id: 4, name: 'Node 4', value: 4, parentId: 3 },
    { id: 5, name: 'Node 5', value: 5, parentId: 3 }
];

/**
 * 將扁平數(shù)組轉換為樹形對象，
 * 適用于來自同一個表的數(shù)據(jù)，即idName的數(shù)據(jù)不重復
 * 
 * @param {*} flatData 同級數(shù)組數(shù)據(jù)
 * @param {*} idName 唯一id
 * @param {*} pidName 父級id
 * @param {*} nameName 自定義(Cascader 級聯(lián)選擇器)鍵名稱
 * @param {*} valueName 自定義(Cascader 級聯(lián)選擇器)值名稱
 * @returns 樹形結構數(shù)組數(shù)據(jù)，適用于Cascader 級聯(lián)選擇器組件
 */
function convertToTree(flatData, idName, pidName, nameName, valueName) {
    let treeData = [];
    if (!Array.isArray(flatData)) {
        return treeData;
    }
    flatData.forEach((item) => {
        delete item.children;
    });
    let map = {};
    flatData.forEach((item) => {
        // 深拷貝，該方式將使該轉換方法失效
        // map[item[idName]] = JSON.parse(JSON.stringify(item));
        // 淺拷貝，將對 item 的引用傳遞給 map
        map[item[idName]] = item;
    });
    flatData.forEach((item) => {
        // 深拷貝，該方式將使該轉換方法失效
        // let parent = JSON.parse(JSON.stringify(map[item[pidName]]));
        // 淺拷貝，將對 map 的引用傳遞給 parent
        let parent = map[item[pidName]];
        if (parent) {
            // 利用了淺拷貝的引用傳遞，最終 flatData 中的 item 將會改變
            (parent.children || (parent.children = [])).push(
                nameName && valueName ? Object.assign(item, { label: item[nameName], id: item[valueName] }) : item);
        } else {
            treeData.push(
                nameName && valueName ? Object.assign(item, { label: item[nameName], id: item[valueName] }) : item);
        }
    });
    return treeData;
}

const treeData = convertToTree(flatData, 'id', 'parentId', 'name', 'value');
console.log(treeData);

二、樹形轉扁平

1、方法一

在 js中，可以使用遞歸算法將樹形結構數(shù)據(jù)轉換為扁平數(shù)組。

下面是一個簡單的例子，它演示了如何將樹形數(shù)據(jù)轉換為扁平數(shù)組：

const treeData = [{
    id: 1,
    name: 'Node 1',
    children: [
        { id: 2, name: 'Node 2', children: [{ id: 3, name: 'Node 3' }, { id: 4, name: 'Node 4' }] },
        { id: 5, name: 'Node 5' }
    ]
}];

function convertToFlat(data, parentId = null) {
    return data.reduce((acc, curr) => {
        acc.push({ ...curr, parentId });
        if (curr.children) {
            acc = acc.concat(convertToFlat(curr.children, curr.id));
        }
        return acc;
    }, []);
}

const flatData = convertToFlat(treeData);
console.log(flatData);

該算法的流程為：

• 使用 reduce() 函數(shù)遍歷每個節(jié)點，并將父節(jié)點的 id 作為參數(shù)傳遞給遞歸函數(shù)。
• 使用 push() 函數(shù)將當前節(jié)點添加到結果數(shù)組中。
• 使用 concat() 函數(shù)將遞歸調(diào)用的結果與結果數(shù)組連接在一起。
• 如果當前節(jié)點有 children 屬性，則遞歸調(diào)用 convertToFlat() 函數(shù)，并將當前節(jié)點的 id 作為父節(jié)點傳遞給函數(shù)。

注意：該方法返回的扁平結構數(shù)據(jù)未將 children屬性刪除，因此存在冗余的數(shù)據(jù)。

這是一種將樹形結構數(shù)據(jù)轉換為扁平數(shù)組的方法，如果有其他特定的需求，還可以使用其他方法來轉換數(shù)據(jù)，例如使用廣度優(yōu)先遍歷算法，使用隊列存儲節(jié)點。

2、方法二

const treeData = [
    {
        id: 1,
        name: 'Node 1',
        children: [
            {
                id: 2,
                name: 'Node 2',
                children: [
                    { id: 3, name: 'Node 3' },
                    { id: 4, name: 'Node 4' },
                ]
            },
            { id: 5, name: 'Node 5' },
        ]
    },
    {
        id: 6,
        name: 'Node 6',
        children: [
            { id: 7, name: 'Node 7' }
        ]
    },
];

function convertToFlat(treeData, parentId = null) {
    let flatData = [];
    for (let node of treeData) {
        flatData.push({ id: node.id, name: node.name, parentId });
        if (node.children) {
            flatData = flatData.concat(convertToFlat(node.children, node.id));
        }
    }
    return flatData;
}

const flatData = convertToFlat(treeData);
console.log(flatData);

該算法的流程為：

- 創(chuàng)建一個空的扁平數(shù)組。

- 遞歸遍歷樹形數(shù)組中的每個節(jié)點，將當前節(jié)點添加到扁平數(shù)組中。

- 對于當前節(jié)點的子節(jié)點，繼續(xù)使用遞歸，并將子節(jié)點添加到扁平數(shù)組中。

- 返回扁平數(shù)組

注意：該方法需要手動構造push 到扁平數(shù)組的對象，通用性較差。

3、方法三

在 js中，可以使用遞歸算法將樹形結構數(shù)據(jù)轉換為扁平數(shù)組。

下面是一個簡單的例子，它演示了如何將樹形數(shù)據(jù)轉換為扁平數(shù)組：

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);

該方法通用性較強，對樹形結構數(shù)組數(shù)據(jù)內(nèi)部具體的屬性名稱要求較小（除 childrens）。文章來源地址http://www.zghlxwxcb.cn/news/detail-530400.html

到了這里，關于js處理扁平數(shù)組和樹結構相互轉換的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！