JavaScript 数组转置：将嵌套字段数据按索引合并为二维数组-js教程-PHP中文网

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）、五列的矩阵，转置后变为五行、两列。

Gradle 9.8.0

下载

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

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

function transpose(fields) {
  // 提取首个字段的数据长度，作为基准
  const length = fields[0]?.values?.data?.length;
  if (typeof length !== 'number' || length  
    !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 <h3>? 使用示例</h3><pre class="brush:php;toolbar:false;">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]]);
```