本文介绍如何对具有嵌套 children 数组的树形对象数组，进行全层级递归排序：优先按最大嵌套深度降序排列，深度相同时按直接子节点数量（children.length）降序排列，并确保每一层子树均遵循相同规则。
本文介绍如何对具有嵌套 `children` 数组的树形对象数组，进行**全层级递归排序**：优先按最大嵌套深度降序排列，深度相同时按直接子节点数量（`children.length`）降序排列，并确保每一层子树均遵循相同规则。
在构建树形 UI（如目录导航、组织架构图、可折叠菜单）时，常需对节点进行结构化排序——不仅要求顶层节点有序，其所有后代节点也需按统一逻辑逐层排序。本教程提供一种健壮、可复用、无副作用的 JavaScript 实现方案，核心目标是：
- ✅ 计算每个节点的最大嵌套深度（即从该节点向下延伸的最长路径长度）；
- ✅ 在每一层级上，先按 depth 降序排列（深度越大越靠前），深度相同时按 children.length 降序排列（子节点越多越靠前）；
- ✅ 递归应用该逻辑至所有 children 子数组；
- ✅ 排序完成后自动清理临时字段（如 depth），避免污染原始数据。
实现原理与关键步骤
整个流程分为两阶段：深度标注 → 递归排序与清理。
-
setDepth(children, depth = 0)
该函数为每个节点注入 depth 属性，表示以该节点为根的子树最大深度（叶子节点深度为 0，仅含空 children 的节点深度为 1，依此类推）。注意：此处 depth 指子树高度（height），而非节点所在层级（level）。计算方式为：- 若 children 为空数组，返回 0；
- 否则，递归计算每个子节点的子树高度，取最大值 maxDepth，再加 1（当前节点自身贡献一层）。
-
sort(children)
对当前层级 children 数组执行原地排序：- 主排序键：b.depth - a.depth → 深度降序（深度大的排前面）；
- 次排序键：b.children.length - a.children.length → 子节点数降序；
- 排序后，递归调用 sort(child.children) 处理下一层；
- 最后 delete child.depth 清理临时属性，保证输出纯净。
完整可运行代码
function setDepth(nodes, base = 0) {
if (!Array.isArray(nodes) || nodes.length === 0) return 0;
let maxChildDepth = 0;
for (const node of nodes) {
// 递归计算子树深度，并赋值给 node.depth
node.depth = setDepth(node.children);
maxChildDepth = Math.max(maxChildDepth, node.depth);
}
// 当前节点所在子树的深度 = 最深子树深度 + 1（当前层）
return maxChildDepth + 1;
}
function sortTree(nodes) {
if (!Array.isArray(nodes)) return;
// 主排序：深度降序，深度相同时子节点数降序
nodes.sort((a, b) => (b.depth ?? 0) - (a.depth ?? 0) || (b.children?.length ?? 0) - (a.children?.length ?? 0));
// 递归排序每个子节点的 children
for (const node of nodes) {
sortTree(node.children);
// 清理临时 depth 字段
delete node.depth;
}
}
// 使用示例
const tree = [{
value: '1',
children: [
{
value: '1.1',
children: [{ value: '1.1.1', children: [] }]
},
{
value: '1.2',
children: [{
value: '1.2.1',
children: [
{ value: '1.2.1.1', children: [] },
{ value: '1.2.1.2', children: [] }
]
}]
},
{
value: '1.3',
children: [{
value: '1.3.1',
children: [{
value: '1.3.1.1',
children: [{ value: '1.3.1.1.1', children: [] }]
}]
}]
}
]
}];
// 执行深度标注与排序
setDepth(tree);
sortTree(tree);
console.log(JSON.stringify(tree, null, 2));
// 输出中，'1.3'（深度4）排最前，其次'1.2'（深度3），最后'1.1'（深度2）注意事项与最佳实践
- ? 不可变性提醒：本实现为原地排序（mutating），若需保持原始数据不变，请先深拷贝：const sorted = JSON.parse(JSON.stringify(originalTree)) 或使用结构化克隆（structuredClone，现代环境支持）。
- ? 空 children 安全：代码中使用 ?? 0 和可选链 ?.length，能安全处理 children: undefined 或 null 的边界情况。
- ? 性能考量：时间复杂度为 O(N × D)，其中 N 是总节点数，D 是平均树深度。对万级节点以下的常规业务树结构完全适用；超大规模场景建议结合缓存或 Web Worker 异步处理。
- ? 扩展建议：如需升序排列，将 b.depth - a.depth 改为 a.depth - b.depth 即可；如需按 value 字符串二次排序，可在 || 后追加 (a.value || '').localeCompare(b.value || '')。
通过这套方法，你不仅能精准控制树形结构的视觉呈现顺序，还能为后续的扁平化（flattening）、路径查找、权限校验等操作奠定清晰的数据基础。
