如何将API返回的特定JavaScript数组转换为目标二维数组？

原始API数据格式 #

假设你从API获取到的数据结构如下：

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

目标格式 #

需要转换成如下二维数组：

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

实现方法 #

方法1：数组高阶函数实现（简洁高效）

这种方法适用于所有字段的data数组长度一致的场景，代码简洁可读性高：

// 提取所有字段的data数组
const dataArrays = apiData.fields.map(field => field.values.data);

// 转置数组得到目标格式
const d = dataArrays[0].map((_, idx) => dataArrays.map(arr => arr[idx]));

方法2：兼容数组长度不一致的场景

如果API返回的各字段data数组长度可能不同，可以取最短数组的长度生成结果，避免索引越界：

const dataArrays = apiData.fields.map(field => field.values.data);
// 获取所有数组中最短的长度
const minLen = Math.min(...dataArrays.map(arr => arr.length));

// 生成目标数组
const d = Array.from({ length: minLen }, (_, idx) => 
  dataArrays.map(arr => arr[idx])
);

方法3：传统for循环实现（新手友好）

如果更习惯用循环逻辑，这种方式步骤清晰，容易理解：

const fields = apiData.fields;
// 以第一个字段的data数组长度为基准
const rowCount = fields[0].values.data.length;
const d = [];

for (let i = 0; i < rowCount; i++) {
  const currentRow = [];
  // 遍历每个字段，取对应索引的元素
  for (let j = 0; j < fields.length; j++) {
    currentRow.push(fields[j].values.data[i]);
  }
  d.push(currentRow);
}

以上三种方法都能得到你需要的二维数组格式，可根据实际场景选择合适的实现方式。

内容的提问来源于stack exchange，提问作者user4061275