0

0

深度优先 + 子节点数优先:JavaScript 递归排序嵌套树结构

霞舞

霞舞

发布时间:2026-02-18 16:09:11

|

628人浏览过

|

来源于php中文网

原创

深度优先 + 子节点数优先:JavaScript 递归排序嵌套树结构

本文介绍如何对具有嵌套 children 数组的树形对象数组进行深度感知排序:先按最大嵌套深度降序排列,深度相同时按直接子节点数量降序排列,并递归应用于每一层。

本文介绍如何对具有嵌套 children 数组的树形对象数组进行深度感知排序:先按最大嵌套深度降序排列,深度相同时按直接子节点数量降序排列,并递归应用于每一层。

在处理树形数据(如菜单、组织架构、文件目录)时,常需按“结构复杂度”重新排序——即优先展示嵌套更深、分支更丰富的节点。本教程提供一种纯 JavaScript 递归方案,无需第三方库,支持任意深度嵌套,并严格满足两大排序规则:

  1. 主序:按最大嵌套深度(depth)降序 —— 深度越大越靠前;
  2. 次序:深度相同时,按当前节点的 children.length 降序 —— 子节点越多越靠前。

✅ 关键洞察:所谓“深度”,指从当前节点向下延伸的最长路径长度(叶子节点深度为 0,仅含空 children 的节点深度为 1),而非层级索引。

核心实现逻辑

我们分两步完成:

Unreal Images
Unreal Images

免费的AI图片库

下载
  • 第一步:标注深度 —— 使用 setDepth() 递归计算每个节点的 depth 属性(表示其子树最大深度);
  • 第二步:原地排序 —— 使用 sort() 递归排序:先按 depth 降序,再按 children.length 降序,最后清理临时属性。

以下是完整、可直接运行的代码:

立即学习Java免费学习笔记(深入)”;

function setDepth(nodes, depth = 0) {
  if (!Array.isArray(nodes) || nodes.length === 0) return 0;

  let maxChildDepth = 0;
  for (const node of nodes) {
    // 递归计算子树深度
    const childDepth = setDepth(node.children);
    node.depth = childDepth + 1; // 当前节点深度 = 子树最大深度 + 1
    maxChildDepth = Math.max(maxChildDepth, node.depth);
  }
  return maxChildDepth;
}

function sortTree(nodes) {
  if (!Array.isArray(nodes)) return;

  // 主排序:depth 降序;次排序:children.length 降序
  nodes.sort((a, b) => (b.depth || 0) - (a.depth || 0) || (b.children?.length || 0) - (a.children?.length || 0));

  // 递归排序每个子树
  for (const node of nodes) {
    sortTree(node.children);
    delete node.depth; // 清理临时 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)最后 —— 符合预期

注意事项与最佳实践

  • depth 定义一致性:本方案中 depth 表示「该节点向下可达的最大层数」(根节点自身计为第 1 层)。例如:{value:'x', children:[]} → depth = 1;{value:'y', children:[{children:[]}]} → depth = 2。
  • 空 children 安全:代码显式检查 node.children?.length,兼容 children: undefined 或 null 场景。
  • 原地排序 & 无副作用:sortTree() 直接修改原数组,且自动删除 depth,避免污染业务数据。
  • 性能提示:时间复杂度为 O(N × D)(N 为总节点数,D 为最大深度),适用于中等规模树(≤ 10k 节点)。超大规模建议结合 Memoization 缓存深度值。
  • 扩展建议:如需升序、或增加第三级排序(如按 value 字典序),只需调整 sort() 回调函数即可。

通过此方法,你将获得一个结构清晰、语义明确、可复用的树排序工具,轻松支撑动态菜单折叠、可视化层级渲染、AI 思维链排序等高级场景。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
c语言中null和NULL的区别
c语言中null和NULL的区别

c语言中null和NULL的区别是:null是C语言中的一个宏定义,通常用来表示一个空指针,可以用于初始化指针变量,或者在条件语句中判断指针是否为空;NULL是C语言中的一个预定义常量,通常用来表示一个空值,用于表示一个空的指针、空的指针数组或者空的结构体指针。

244

2023.09.22

java中null的用法
java中null的用法

在Java中,null表示一个引用类型的变量不指向任何对象。可以将null赋值给任何引用类型的变量,包括类、接口、数组、字符串等。想了解更多null的相关内容,可以阅读本专题下面的文章。

766

2024.03.01

sort排序函数用法
sort排序函数用法

sort排序函数的用法:1、对列表进行排序,默认情况下,sort函数按升序排序,因此最终输出的结果是按从小到大的顺序排列的;2、对元组进行排序,默认情况下,sort函数按元素的大小进行排序,因此最终输出的结果是按从小到大的顺序排列的;3、对字典进行排序,由于字典是无序的,因此排序后的结果仍然是原来的字典,使用一个lambda表达式作为key参数的值,用于指定排序的依据。

401

2023.09.04

length函数用法
length函数用法

length函数用于返回指定字符串的字符数或字节数。可以用于计算字符串的长度,以便在查询和处理字符串数据时进行操作和判断。 需要注意的是length函数计算的是字符串的字符数,而不是字节数。对于多字节字符集,一个字符可能由多个字节组成。因此,length函数在计算字符串长度时会将多字节字符作为一个字符来计算。更多关于length函数的用法,大家可以阅读本专题下面的文章。

950

2023.09.19

undefined是什么
undefined是什么

undefined是代表一个值或变量不存在或未定义的状态。它可以作为默认值来判断一个变量是否已经被赋值,也可以用于设置默认参数值。尽管在不同的编程语言中,undefined可能具有不同的含义和用法,但理解undefined的概念可以帮助我们更好地理解和编写程序。本专题为大家提供undefined相关的各种文章、以及下载和课程。

5628

2023.07.31

网页undefined是什么意思
网页undefined是什么意思

网页undefined是指页面出现了未知错误的意思,提示undefined一般是在开发网站的时候定义不正确或是转换不正确,或是找不到定义才会提示undefined未定义这个错误。想了解更多的相关内容,可以阅读本专题下面的文章。

3214

2024.08.14

网页undefined啥意思
网页undefined啥意思

本专题整合了undefined相关内容,阅读下面的文章了解更多详细内容。后续继续更新。

1217

2025.12.25

pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法
pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法

本专题系统整理pixiv网页版官网入口及登录访问方式,涵盖官网登录页面直达路径、在线阅读入口及快速进入方法说明,帮助用户高效找到pixiv官方网站,实现便捷、安全的网页端浏览与账号登录体验。

472

2026.02.13

微博网页版主页入口与登录指南_官方网页端快速访问方法
微博网页版主页入口与登录指南_官方网页端快速访问方法

本专题系统整理微博网页版官方入口及网页端登录方式,涵盖首页直达地址、账号登录流程与常见访问问题说明,帮助用户快速找到微博官网主页,实现便捷、安全的网页端登录与内容浏览体验。

157

2026.02.13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 5.2万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 3万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.4万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号