TypeScript 树形结构转数组对象-多跟节点无限层级不用递归

169 阅读1分钟

使用迭代的方式将 TypeScript 的树转换为列表:

/**
 * 声明一个树形结构接口
 */
interface TreeNode {
    id: number;
    children?: TreeNode[];
    parentId: number
    name: string;
}

function multiTreeToList(root: TreeNode[]): TreeNode[] {
    /**
     * stack 的数组,该数组的元素类型为 TreeNode。数组被初始化为 root 的引用
     */
    const stack: TreeNode[] = root.slice();

    const list: TreeNode[] = [];


    /**
     * 遍历stack
     */
    while (stack.length > 0) {
        const node = stack.pop()!;


        if (!node.children || node.children.length === 0) {
            // 如果节点没有子节点,就将它添加到列表中
            list.push(node);
        } else {
            /**
             * 结构节点把children初始化为[]
             */
            const parentNode: TreeNode = { ...node, children: [] };
            /**
             * 把父节点添加到列表
             */
            list.push(parentNode);
            // 如果节点有子节点,就将子节点入栈
            for (let i = node.children.length - 1; i >= 0; i--) {

                stack.push(node.children[i]);
            }
        }
    }

    return list;
}


const root: TreeNode[] = [{
    "id": 1,
    "parentId": 0,
    "name": "0-1",
    "children": [
        {
            "id": 2,
            "parentId": 1,
            "name": "1-2",
            "children": [
                {
                    "id": 4,
                    "parentId": 2,
                    "name": "2-4",
                    "children": []
                },
                {
                    "id": 5,
                    "parentId": 2,
                    "name": "2-5",
                    "children": []
                }
            ]
        },
        {
            "id": 3,
            "parentId": 1,
            "name": "1-3",
            "children": [
                {
                    "id": 6,
                    "parentId": 3,
                    "name": "3-6",
                    "children": []
                }
            ]
        }
    ]
}, {
    "id": 7,
    "parentId": 0,
    "name": "0-7",
    "children": [
        {
            "id": 8,
            "parentId": 7,
            "name": "7-8",
            "children": [
                {
                    "id": 10,
                    "parentId": 8,
                    "name": "8-10",
                    "children": []
                },
                {
                    "id": 11,
                    "parentId": 8,
                    "name": "8-11",
                    "children": []
                }
            ]
        },
        {
            "id": 9,
            "parentId": 7,
            "name": "7-9",
            "children": [
                {
                    "id": 12,
                    "parentId": 9,
                    "name": "9-12",
                    "children": []
                }
            ]
        }
    ]
}];

const list = multiTreeToList(root);
console.log(list);

输出:

[{
  "id": 7,
  "parentId": 0,
  "name": "0-7",
  "children": []
}, {
  "id": 8,
  "parentId": 7,
  "name": "7-8",
  "children": []
}, {
  "id": 10,
  "parentId": 8,
  "name": "8-10",
  "children": []
}, {
  "id": 11,
  "parentId": 8,
  "name": "8-11",
  "children": []
}, {
  "id": 9,
  "parentId": 7,
  "name": "7-9",
  "children": []
}, {
  "id": 12,
  "parentId": 9,
  "name": "9-12",
  "children": []
}, {
  "id": 1,
  "parentId": 0,
  "name": "0-1",
  "children": []
}, {
  "id": 2,
  "parentId": 1,
  "name": "1-2",
  "children": []
}, {
  "id": 4,
  "parentId": 2,
  "name": "2-4",
  "children": []
}, {
  "id": 5,
  "parentId": 2,
  "name": "2-5",
  "children": []
}, {
  "id": 3,
  "parentId": 1,
  "name": "1-3",
  "children": []
}, {
  "id": 6,
  "parentId": 3,
  "name": "3-6",
  "children": []
}]