使用迭代的方式将 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": []
}]