瞬息万变的JavaScript树型数据与一维数组间的无缝转换

前端

2023-11-08 19:58:44

数据结构是编程必备基石，其中，树型数据与一维数组，常用于存储与组织复杂的数据。本篇文章将深入剖析二者的转换过程，探究它们之间的内在逻辑，让读者从概念理解到实战应用，一气呵成。

壹．构建认识基础

何为树型数据与一维数组？

树型数据：

树型数据，以节点和边为基本要素，形成层次结构。节点代表数据项，边表示节点间的联系。广泛用于父子关系、组织结构、文件系统等。
一维数组：

一维数组，又称线性数组，本质上为一个连续存储空间，存储元素按照顺序排列。元素间无直接关系，适用于存储同类型的数据集合。

贰．转换必要性与技巧

为何需要进行转换？

数据格式兼容：

不同场景对数据格式有不同要求，转换可确保兼容性，方便数据处理。
数据结构优化：

转换可优化数据结构，提升查询和更新效率。

转换技巧有哪些？

深度优先遍历：

从根节点出发，逐层遍历，将子节点依次加入结果数组。
广度优先遍历：

从根节点开始，逐层遍历，将所有同层节点加入结果数组，再遍历下一层。
递归算法：

利用函数嵌套，将复杂问题分解成更小的子问题，不断递归直至问题解决。

叁．图文并茂实践

下面，我们将通过一个实际案例，用图文并茂的方式展示转换过程。

原始数据：

假设我们有一个一维数组，存储父子关系数据：

[
    { id: 1, name: '张三', pid: null },
    { id: 2, name: '李四', pid: 1 },
    { id: 3, name: '王五', pid: 1 },
    { id: 4, name: '赵六', pid: 2 },
    { id: 5, name: '孙七', pid: 2 },
    { id: 6, name: '周八', pid: 3 }
]

构建树型数据：

使用深度优先遍历，将一维数组转换成树型数据：

function convertToTree(data) {
    // 创建根节点
    const root = data.find(item => item.pid === null);

    // 递归构建子树
    const buildTree = (node) => {
        const children = data.filter(item => item.pid === node.id);
        if (children.length > 0) {
            node.children = children;
            children.forEach(child => buildTree(child));
        }
    };

    // 构建根节点的子树
    buildTree(root);

    return root;
}

转换结果：

转换后的树型数据：

{
    id: 1,
    name: '张三',
    pid: null,
    children: [
        {
            id: 2,
            name: '李四',
            pid: 1,
            children: [
                {
                    id: 4,
                    name: '赵六',
                    pid: 2
                },
                {
                    id: 5,
                    name: '孙七',
                    pid: 2
                }
            ]
        },
        {
            id: 3,
            name: '王五',
            pid: 1,
            children: [
                {
                    id: 6,
                    name: '周八',
                    pid: 3
                }
            ]
        }
    ]
}

重新转换为一维数组：

若需要将树型数据转换回一维数组，可使用广度优先遍历：

function convertToArray(tree) {
    // 创建结果数组
    const result = [];

    // 队列存储当前层的节点
    const queue = [tree];

    // 遍历队列
    while (queue.length > 0) {
        // 取出当前层的节点
        const level = queue.shift();

        // 将当前层的节点加入结果数组
        result.push(...level);

        // 将当前层的节点的子节点加入队列
        level.forEach(node => queue.push(...node.children));
    }

    return result;
}

转换结果：

转换回的一维数组：

[
    { id: 1, name: '张三', pid: null },
    { id: 2, name: '李四', pid: 1 },
    { id: 4, name: '赵六', pid: 2 },
    { id: 5, name: '孙七', pid: 2 },
    { id: 3, name: '王五', pid: 1 },
    { id: 6, name: '周八', pid: 3 }
]