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

本文详解如何将按“国家-月份-数值”组织的行式数组，高效转换为以国家为行、月份为列的宽表格式，并自动补零缺失组合，适用于报表聚合与前端数据可视化预处理。

本文详解如何将按“国家-月份-数值”组织的行式数组，高效转换为以国家为行、月份为列的宽表格式，并自动补零缺失组合，适用于报表聚合与前端数据可视化预处理。

在数据处理尤其是前端报表渲染中，常需将“长格式”（long format）数据（如 [ {Country, Month, Total} ]）重塑为“宽格式”（wide format），即每个唯一维度（如 Country）作为一行，每个分类指标（如 Month）作为独立列，对应值填入，缺失项补零。该操作在 SQL 中称为 PIVOT，在 JavaScript 中则需手动聚合与结构重组。

以下是一个健壮、可扩展的实现方案，核心思路分为三步：提取所有月份 → 按国家初始化模板 → 填充并合并数据。

✅ 步骤一：提取全量月份并初始化默认值

首先遍历原始数据，收集所有出现过的 Month 值，并构建一个以月份为键、0 为值的对象 months。这确保后续每国对象都具备完整月份字段，避免遗漏：

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

// 提取所有唯一月份，初始化为 0
const months = {};
for (const { Month } of data) {
  months[Month] = 0;
}
// → { Jan: 0, Feb: 0 }

✅ 步骤二：按国家分组并填充数据

使用普通对象 out 作为临时聚合容器，键为 Country 名。利用 Nullish Coalescing Assignment (??=) 算子，仅当某国家首次出现时，才为其创建初始对象：包含 Country 字段 + 所有月份字段（值均为 0）。随后直接赋值 out[Country][Month] = Total，覆盖对应月份的默认零值：

javascript-pro

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

下载

const out = {};

for (const { Country, Month, Total } of data) {
  // 若 out[Country] 不存在或为 null/undefined，则初始化
  out[Country] ??= { Country, ...months };
  out[Country][Month] = Total;
}

// → {
//      America: { Country: "America", Jan: 200, Feb: 100 },
//      India:   { Country: "India",   Jan: 0,   Feb: 100 }
//    }

? 提示：??= 是现代 JS 的安全赋值语法，比 if (!out[Country]) out[Country] = {...} 更简洁且语义明确，兼容性需注意（支持 ES2020+，主流浏览器及 Node.js ≥ 14）。

✅ 步骤三：输出标准化数组

最后调用 Object.values(out) 将字典转为纯数组，得到目标结构：

const finalArray = Object.values(out);
console.log(finalArray);
// → [
//      { Country: "America", Jan: 200, Feb: 100 },
//      { Country: "India",   Jan: 0,   Feb: 100 }
//    ]