JavaScript 对象数组按指定属性层级分组生成嵌套树结构

梦杰吖_4275

梦杰吖_4275

2026-02-08

766人浏览

原创

JavaScript 对象数组按指定属性层级分组生成嵌套树结构

本文介绍如何将 javascript 对象数组依据给定属性顺序(如 `['a', 'b', 'c', 'd']`)递归分组,生成符合图表库要求的嵌套树形结构(每个节点含 `name` 与可选 `children` 数组)。

在数据可视化场景中(如 ECharts、D3 或自定义层级图),常需将扁平的原始数据转换为深度嵌套的树状结构。本教程提供一种健壮、可复用的解决方案:根据用户指定的属性键序列(如 ['A', 'B', 'C', 'D']),对对象数组进行多级分组,并输出标准的 name + children 树形格式。

核心思路分为两步:

  1. 构建嵌套哈希表:遍历每条数据,按 keys 顺序逐层下钻,用对象字面量模拟“路径”,最终形成类似 { "1": { "5": { "7": { "67": {}, "69": {} } } } } 的中间结构;
  2. 递归转为目标树形:通过 Object.entries() 和递归映射,将嵌套对象自动展开为带 name 和 children 的数组结构——叶子节点无 children,非叶子节点则递归处理子对象。

以下是完整实现代码(已优化可读性与健壮性):

前端设计引擎
前端设计引擎

使用此技能可创建独具特色、具备生产级质量的前端界面,设计品质高。当用户要求构建网页组件、页面、产物、海报或应用程序时(例如:网站、落地页、仪表盘、React 组件、HTML/CSS 布局,或对任意 Web UI 进行样式优化与视觉美化),请启用该能力。输出需为富有创意、精雕细琢的代码与 UI 设计,避免千篇一律的 AI 风格。

下载
function groupByKeys(data, keys) {
  if (!Array.isArray(data) || data.length === 0 || !Array.isArray(keys) || keys.length === 0) {
    return {};
  }

  // Step 1: 构建嵌套对象树(使用空对象作为叶子占位符)
  const root = {};
  for (const item of data) {
    let node = root;
    for (const key of keys) {
      const value = item[key];
      // 使用 ??= 确保深层嵌套对象被安全创建
      node = (node[value] ??= {});
    }
  }

  // Step 2: 递归转换为 name/children 格式
  const buildTree = (obj) => {
    return Object.entries(obj).map(([name, child]) => {
      // 若 child 为空对象(即无子属性),视为叶子节点
      if (Object.keys(child).length === 0) {
        return { name: Number(name) || name }; // 自动转数字(可选)
      }
      // 否则递归构建 children
      return {
        name: Number(name) || name,
        children: buildTree(child)
      };
    });
  };

  const result = buildTree(root);
  return result.length > 0 ? result[0] : {};
}

// ✅ 示例 1:相同 A/B/C,不同 D
const data1 = [
  { A: 1, B: 5, C: 7, D: 67 },
  { A: 1, B: 5, C: 7, D: 69 }
];
console.log(groupByKeys(data1, ['A', 'B', 'C', 'D']));
// 输出:{ name: 1, children: [{ name: 5, children: [{ name: 7, children: [{ name: 67 }, { name: 69 }] }] }] }

// ✅ 示例 2:C 层级出现分支
const data2 = [
  { A: 1, B: 5, C: 4, D: 67 },
  { A: 1, B: 5, C: 7, D: 69 }
];
console.log(groupByKeys(data2, ['A', 'B', 'C', 'D']));
// 输出:{ name: 1, children: [{ name: 5, children: [{ name: 4, children: [{ name: 67 }] }, { name: 7, children: [{ name: 69 }] }] }] }

⚠️ 注意事项:

  • 键名一致性:确保 keys 中每个属性在所有对象中均存在,否则会因 item[key] 为 undefined 导致意外分组(建议预校验或使用默认值);
  • 类型处理:示例中 Number(name) || name 尝试将纯数字字符串转为数值,如需严格保留原始类型(如字符串 '01'),请移除该转换;
  • 性能考量:该算法时间复杂度为 O(n × k)(n 为数据量,k 为 keys 长度),适用于万级以内数据;超大规模时可考虑 Map 替代普通对象提升查找效率;
  • 空值/重复处理:当前逻辑不自动去重或过滤 null/undefined,如需支持,可在 for (const item of data) 循环内添加预处理逻辑。

此方案简洁、无外部依赖,可直接集成至任意前端项目,轻松满足各类层级图表的数据准备需求。

Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南

相关专题

更多
ECharts是什么
ECharts是什么

ECharts是基于JavaScript的开源可视化库,能够帮助开发者轻松地实现各种复杂的数据可视化效果,提供了丰富的图表类型和交互功能。本专题为大家提供ECharts是什么的相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.04

892

5

echarts自适应大小设置
echarts自适应大小设置

使用ECharts的自适应大小设置可以使图表能够根据不同屏幕尺寸和设备进行自适应。一种是使用resize事件,在图表容器大小改变时重新渲染图表;另一种是使用CSS样式,通过设置图表容器的宽度和高度为百分比值,使图表容器根据父元素的大小进行自适应。根据实际需求选择合适的方法,可以使图表在不同设备上都能够良好地显示和交互 。

2023.09.13

4965

8

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

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

2023.09.22

549

3

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

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

2024.03.01

1698

6

c语言const用法
c语言const用法

const是关键字,可以用于声明常量、函数参数中的const修饰符、const修饰函数返回值、const修饰指针。详细介绍:1、声明常量,const关键字可用于声明常量,常量的值在程序运行期间不可修改,常量可以是基本数据类型,如整数、浮点数、字符等,也可是自定义的数据类型;2、函数参数中的const修饰符,const关键字可用于函数的参数中,表示该参数在函数内部不可修改等等。

2023.09.20

2358

7

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.03

1858

5

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

2023.09.04

2964

5

java基础知识汇总
java基础知识汇总

java基础知识有Java的历史和特点、Java的开发环境、Java的基本数据类型、变量和常量、运算符和表达式、控制语句、数组和字符串等等知识点。想要知道更多关于java基础知识的朋友,请阅读本专题下面的的有关文章,欢迎大家来php中文网学习。

2023.10.24

6264

49

字符串介绍
字符串介绍

字符串是一种数据类型,它可以是任何文本,包括字母、数字、符号等。字符串可以由不同的字符组成,例如空格、标点符号、数字等。在编程中,字符串通常用引号括起来,如单引号、双引号或反引号。想了解更多字符串的相关内容,可以阅读本专题下面的文章。

2023.11.24

6189

6

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.4万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.8万人学习