JavaScript 数组转置：将嵌套字段数据以索引合并为二维数组

本文介绍如何将来自 API 的多字段嵌套数组（如字段 A、B 各含等长数值数组）按索引位置“垂直对齐”，高效转置为形如 [[1,6],[2,7],...] 的二维数组，支持任意数量字段及长度校验。

本文介绍如何将来自 api 的多字段嵌套数组（如字段 a、b 各含等长数值数组）按索引位置“垂直对齐”，高效转置为形如 `[[1,6],[2,7],...]` 的二维数组，支持任意数量字段及长度校验。

在实际前端开发中，我们常从后端 API 获取结构类似如下格式的字段数据：

const fields = [  { name: "A", values: { data: [1, 2, 3, 4, 5] } },  { name: "B", values: { data: [6, 7, 8, 9, 10] } }];

目标是将其按索引转置（transpose），即把每个字段中相同下标位置的元素组合成新子数组，最终得到：

[[1, 6], [2, 7], [3, 8], [4, 9], [5, 10]]

这本质上是一个矩阵转置操作：原始数据可视为两行（A 和 B）、五列的矩阵，转置后变为五行、两列。

✅ 推荐实现：健壮的 transpose 工具函数

以下函数支持动态字段数量（不限于两个），并内置长度一致性校验，避免运行时静默错误：

立即学习“Java免费学习笔记（深入）”；

function transpose(fields) {  // 提取首个字段的数据长度，作为基准  const length = fields[0]?.values?.data?.length;  if (typeof length !== 'number' || length < 0) {    throw new Error('Invalid or empty first field data');  }  // 校验所有字段 data 数组长度是否一致  if (fields.some(field =>     !Array.isArray(field.values?.data) ||     field.values.data.length !== length  )) {    throw new Error('All fields must have arrays of equal length in values.data');  }  // 构建转置结果：外层循环遍历索引，内层循环收集各字段对应位置值  const result = [];  for (let i = 0; i < length; i++) {    const row = [];    for (const field of fields) {      row.push(field.values.data[i]);    }    result.push(row);  }  return result;}

? 使用示例

const fields = [  { name: "A", values: { data: [1, 2, 3, 4, 5] } },  { name: "B", values: { data: [6, 7, 8, 9, 10] } },  { name: "C", values: { data: [11, 12, 13, 14, 15] } }];console.log(transpose(fields));// 输出：[[1,6,11], [2,7,12], [3,8,13], [4,9,14], [5,10,15]]

⚠️ 注意事项

• 必须保证所有 field.values.data 是同长度数组，否则抛出明确错误，便于调试；
• 函数使用可选链（?.）提升容错性，但不掩盖结构缺失问题——建议配合 TypeScript 或运行时 Schema 校验；
• 若字段数量极少且固定（如仅 A/B），也可用 map + 解构简化（但牺牲通用性）：

  const [a, b] = fields;const d = a.values.data.map((val, i) => [val, b.values.data[i]]);

✅ 总结

该 transpose 实现兼顾可读性、健壮性与扩展性：适用于任意数量字段，自动校验输入一致性，并以清晰的双循环逻辑完成索引对齐。将其封装为工具函数，可复用于图表坐标生成、表格行列转换、多维度数据聚合等典型场景。