将行数据转换为列结构：JavaScript 实现动态透视表（Pivot）-js教程-PHP中文网

将行数据转换为列结构：JavaScript 实现动态透视表（Pivot）

本文介绍如何将包含国家、月份和总量的扁平化数组，转换为以国家为行、月份为列的透视结构，缺失月份自动补零，代码简洁高效且具备扩展性。

本文介绍如何将包含国家、月份和总量的扁平化数组，转换为以国家为行、月份为列的透视结构，缺失月份自动补零，代码简洁高效且具备扩展性。

在数据处理与前端报表开发中，常需将“长格式”（long format）数据（即每行代表一个观测值，含维度+指标）转为“宽格式”（wide format），例如将按国家-月份分组的销售记录，聚合为每个国家一行、各月份作为独立字段的表格结构。这种操作本质上是轻量级的数据透视（Pivot），无需依赖外部库，纯 JavaScript 即可优雅实现。

核心思路分为三步：

提取所有唯一月份，构建默认值为 0 的模板对象；
按国家分组聚合，使用对象字面量作为哈希表（key 为国家名），初始化时展开月份模板；
填充实际数值，遍历原始数据，将 Total 写入对应国家对象的 Month 字段。

以下是完整、可直接运行的实现：

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

const data = [
  { Country: "America", Total: 200, Month: "Jan" },
  { Country: "America", Total: 100, Month: "Feb" },
  { Country: "India",  Total: 100, Month: "Feb" }
];

// 步骤 1：收集全部唯一月份，并初始化为 { "Jan": 0, "Feb": 0 }
const months = {};
for (const { Month } of data) {
  months[Month] = 0;
}

// 步骤 2 & 3：按 Country 分组，初始化 + 填充
const grouped = {};
for (const { Country, Month, Total } of data) {
  // 若该 Country 尚未存在，则创建新对象：{ Country, ...months }
  grouped[Country] ??= { Country, ...months };
  // 覆盖对应月份的实际值
  grouped[Country][Month] = Total;
}

// 步骤 4：转换为数组格式（符合预期输出）
const result = Object.values(grouped);
console.log(result);
// 输出：
// [
//   { Country: "America", Jan: 200, Feb: 100 },
//   { Country: "India",  Jan: 0,   Feb: 100 }
// ]

✅ 关键特性说明：

自动补零：未出现的月份（如 "India" 缺少 "Jan"）在初始化阶段已设为 0，确保结果完整性；
无重复覆盖风险：使用 ??=（Nullish Coalescing Assignment）安全初始化，避免误覆写已有数据；
可扩展性强：若新增 "Mar" 数据，仅需一次遍历即可纳入模板与结果，无需修改逻辑；
时间复杂度优：O(n + m)，其中 n 为原始数据长度，m 为唯一国家数，远优于嵌套循环方案。

⚠️ 注意事项：

若原始数据中同一国家+月份出现多次（如两条 "America"/"Jan"），后出现的 Total 将覆盖前者；如需累加，请将 grouped[Country][Month] = Total 改为 grouped[Country][Month] += Total，并初始化为 0（注意此时 ??= 仍适用，但字段赋值需改为累加逻辑）；
月份顺序不保证与原始数据一致（因 Object.keys() 无序），如需固定列序（如 "Jan" 在 "Feb" 前），最终生成数组后可对每个对象按预定义月份数组重映射字段；
本方案假设 Country 和 Month 字段值均为字符串类型，若存在空值或 undefined，建议前置校验或使用 String(Country) 做兜底。

此方法兼顾可读性、性能与健壮性，是前端数据整形场景中的推荐实践。

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