0

0

JavaScript 深度优先排序:按嵌套层级与子节点数量递归排序树形结构

心靈之曲

心靈之曲

发布时间:2026-02-18 14:24:02

|

266人浏览过

|

来源于php中文网

原创

JavaScript 深度优先排序:按嵌套层级与子节点数量递归排序树形结构

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

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

在构建组织架构、菜单导航、文件目录或任务依赖图等树形数据结构时,常需按“结构复杂度”对节点排序:深层嵌套的分支往往语义上更“细化”或“具体”,应优先展示;若深度相同,则子项更多者通常更具展开价值。这种排序不能仅靠单层 sort() 实现,而需自底向上计算每个节点的最大深度(max depth),再自顶向下稳定排序并清理临时字段

笔灵降AI
笔灵降AI

论文降AI神器,适配知网及维普!一键降至安全线,100%保留原文格式;无口语化问题,文风更学术,降后字数控制最佳!

下载

核心思路:两阶段递归处理

  1. 深度标注阶段(setDepth)
    为每个节点注入 depth 属性,表示其子树的最大嵌套深度(即从该节点出发,沿任意 children 路径能到达的最远层级数)。注意:叶子节点(children: [])深度为 0;仅含空数组的节点深度为 0;有子节点的节点深度 = 1 + 子树最大深度。

  2. 排序与清理阶段(sort)
    对当前层级所有节点按 (b.depth - a.depth) 降序(深度大者靠前),深度相同时按 (b.children.length - a.children.length) 降序(子节点多者靠前);随后递归排序每个节点的 children 数组,最后删除临时 depth 字段,保持数据纯净。

完整可运行代码示例

const treeData = [{
  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: [] }]
        }]
      }]
    }
  ]
}];

// 步骤1:递归计算每个节点的子树最大深度
function setDepth(nodes, depth = 0) {
  if (!Array.isArray(nodes) || nodes.length === 0) return 0;

  // 为每个子节点计算其子树深度,并赋值给 child.depth
  nodes.forEach(child => {
    child.depth = setDepth(child.children);
  });

  // 当前层级最大深度 = 所有子节点 depth 的最大值 + 1(自身到子节点这一层)
  const maxChildDepth = Math.max(...nodes.map(child => child.depth), 0);
  return maxChildDepth + 1;
}

// 步骤2:递归排序(深度优先 + 同深比子量)并清理 depth 字段
function sortTree(nodes) {
  if (!Array.isArray(nodes)) return;

  // 主排序:深度降序 → 子节点数降序
  nodes.sort((a, b) => (b.depth ?? 0) - (a.depth ?? 0) || b.children.length - a.children.length);

  // 递归排序每个子节点的 children
  nodes.forEach(node => {
    sortTree(node.children);
    delete node.depth; // 清理临时字段,保持原始结构干净
  });
}

// 执行流程
setDepth(treeData);
sortTree(treeData);

console.log(JSON.stringify(treeData, null, 2));
// 输出结果中,'1.3'(深度4)排第一,'1.2'(深度3)次之,'1.1'(深度2)最后 —— 符合预期

关键注意事项

  • 深度定义明确:depth 表示“以该节点为根的子树最大层数”,非节点自身所在层级(即不计算父链)。例如 '1.3.1.1.1' 是叶子,其 depth = 0;其父节点 '1.3.1.1' 的 depth = 1。
  • 稳定性保障:排序使用 || 短路逻辑,确保深度相同时严格按 children.length 排序;递归调用保证每层独立有序。
  • ⚠️ 避免副作用:setDepth 直接修改原对象。如需不可变操作,请先深拷贝(如 structuredClone(treeData))。
  • ⚠️ 边界防护:代码已加入 Array.isArray() 和空数组判断,防止 children: undefined 或非数组值导致运行时错误。
  • ? 扩展提示:若需升序(浅层优先),将排序比较函数中的 b.depth - a.depth 改为 a.depth - b.depth 即可。

该方案时间复杂度为 O(N)(两次遍历,N 为总节点数),空间复杂度为 O(H)(递归栈深度 H),适用于中大型树形结构,是生产环境中兼顾可读性与性能的稳健实践。

热门AI工具

更多
DeepSeek
DeepSeek

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

豆包大模型
豆包大模型

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

通义千问
通义千问

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

腾讯元宝
腾讯元宝

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

文心一言
文心一言

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

讯飞写作
讯飞写作

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

即梦AI
即梦AI

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

ChatGPT
ChatGPT

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

相关专题

更多
sort排序函数用法
sort排序函数用法

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

401

2023.09.04

treenode的用法
treenode的用法

​在计算机编程领域,TreeNode是一种常见的数据结构,通常用于构建树形结构。在不同的编程语言中,TreeNode可能有不同的实现方式和用法,通常用于表示树的节点信息。更多关于treenode相关问题详情请看本专题下面的文章。php中文网欢迎大家前来学习。

541

2023.12.01

C++ 高效算法与数据结构
C++ 高效算法与数据结构

本专题讲解 C++ 中常用算法与数据结构的实现与优化,涵盖排序算法(快速排序、归并排序)、查找算法、图算法、动态规划、贪心算法等,并结合实际案例分析如何选择最优算法来提高程序效率。通过深入理解数据结构(链表、树、堆、哈希表等),帮助开发者提升 在复杂应用中的算法设计与性能优化能力。

27

2025.12.22

深入理解算法:高效算法与数据结构专题
深入理解算法:高效算法与数据结构专题

本专题专注于算法与数据结构的核心概念,适合想深入理解并提升编程能力的开发者。专题内容包括常见数据结构的实现与应用,如数组、链表、栈、队列、哈希表、树、图等;以及高效的排序算法、搜索算法、动态规划等经典算法。通过详细的讲解与复杂度分析,帮助开发者不仅能熟练运用这些基础知识,还能在实际编程中优化性能,提高代码的执行效率。本专题适合准备面试的开发者,也适合希望提高算法思维的编程爱好者。

39

2026.01.06

堆和栈的区别
堆和栈的区别

堆和栈的区别:1、内存分配方式不同;2、大小不同;3、数据访问方式不同;4、数据的生命周期。本专题为大家提供堆和栈的区别的相关的文章、下载、课程内容,供大家免费下载体验。

419

2023.07.18

堆和栈区别
堆和栈区别

堆(Heap)和栈(Stack)是计算机中两种常见的内存分配机制。它们在内存管理的方式、分配方式以及使用场景上有很大的区别。本文将详细介绍堆和栈的特点、区别以及各自的使用场景。php中文网给大家带来了相关的教程以及文章欢迎大家前来学习阅读。

594

2023.08.10

length函数用法
length函数用法

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

950

2023.09.19

undefined是什么
undefined是什么

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

5628

2023.07.31

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

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

561

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号