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