JavaScript中树形结构扁平化处理的两种方法

简介

在前端开发中，我们经常会遇到树形结构的数据，这些数据可能来自后端API或其他数据源。为了更方便地处理这样的数据，我们需要将其转换成扁平化的结构，以便于展示或其他操作。在本篇博客中，我们将介绍JavaScript中树形结构扁平化处理的两种方法：递归处理和非递归处理。

---

数据示例

首先，我们给出一个示例数据，它表示一个树形结构的数据，每个节点都有id、parentId和name属性。

const data = [
    { id: 1, parentId: 0, name: 'A' },
    { id: 2, parentId: 0, name: 'B' },
    { id: 3, parentId: 1, name: 'A-1' },
    { id: 4, parentId: 1, name: 'A-2' },
    { id: 5, parentId: 2, name: 'B-1' },
    { id: 6, parentId: 3, name: 'A-1-1' },
    { id: 7, parentId: 3, name: 'A-1-2' },
    { id: 8, parentId: 6, name: 'A-1-1-1' },
    { id: 9, parentId: 2, name: 'B-2' }
];

方法一：递归处理

递归处理是一种常见的处理树形结构的方法。它的基本思想是从根节点开始，逐层遍历树的每个节点，将子节点添加到对应的父节点的children属性中。

function formatDataTree (data){
    let parents = data.filter(p => p.parentId == 0),
        children = data.filter(c => c.parentId != 0);

    dataToTree(parents, children);
    return parents;

    function dataToTree (parents, children) {
        parents.map(p => {
            children.map((c, i) => {
                if (c.parentId == p.id) {
                    let _c = JSON.parse(JSON.stringify(children));
                    _c.splice(i, 1);
                    dataToTree([c], _c);
                    // if(p.children)
                    //     p.children.push(c);
                    // else
                    //     p.children = [c];
                    typeof p.children !== 'undefined' ? p.children.push(c) : p.children = [c];
                }
            });
        });
    }
}

代码解析

• 首先，我们定义了 formatDataTree 函数，它接受一个树形结构数据的数组作为参数。
• 我们用 filter 方法分别筛选出根节点和非根节点，得到 parents 和 children 数组。
• 然后，我们调用 dataToTree 函数进行递归处理。在 dataToTree 函数中，我们使用 map 方法遍历每个父节点，并使用 map 方法遍历每个子节点，寻找其父节点并构建树结构。递归过程中，我们使用 JSON.parse(JSON.stringify(children)) 来复制 children 数组，避免对原数据的修改。
• 如果找到父节点，我们将子节点从 children 数组中删除，并将子节点添加到父节点的 children 属性中

方法二：非递归处理

非递归处理是一种使用栈或队列等数据结构来处理树形结构的方法。它避免了递归调用的性能开销，通常执行速度较快。

function formatDataTree (data){
    let _data= JSON.parse(JSON.stringify(data));
    return _data.filter(p => {
        const _arr= _data.filter(c => c.parentId === p.id);
        _arr.length && (p.children= _arr);
        return p.parentId === 0;
    });
}

代码解析

• 我们定义了 formatDataTree 函数，它接受一个树形结构数据的数组作为参数。
• 首先，我们使用 JSON.parse(JSON.stringify(data)) 复制一份数据 _data，以避免对原数据的修改。
• 然后，我们使用 filter 方法对 _data 进行筛选。对于每个父节点，我们通过 filter 方法找到其所有子节点 _arr，并将子节点赋值给父节点的 children 属性。
• 最后，我们返回根节点，即 parentId 为 0 的节点。

运行结果

无论是采用递归处理还是非递归处理，运行结果将得到一个树形结构的数组，其中每个节点都包含children属性，用于存储其子节点。对于给定的示例数据，两种方法都将得到相同的结果。

总结

本篇博客介绍了JavaScript中树形结构扁平化处理的两种方法：递归处理和非递归处理。递归处理是一种常用的方法，但在数据较大时可能存在性能问题。非递归处理使用栈或队列等数据结构，避免了递归调用的性能开销，通常速度较快。根据实际需求和数据规模，您可以选择合适的方法来处理树形结构的数据，以便更好地应用于前端开发中。