在实际开发中,我们常遇到这样一个需求:从后端 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] } }
];
期望的输出是对数据执行数组转置操作——将每个字段中相同索引位置的数值组合成新的子数组。最终格式如下:
[[1, 6], [2, 7], [3, 8], [4, 9], [5, 10]]
这一过程本质上就是矩阵转置。原始数据可视为一个两行五列的矩阵(行对应字段 A 和 B,列对应索引位置),转置后变为五行两列的新矩阵。
✅ 推荐一套健壮的通用工具函数实现方案
下面这个函数能够动态处理任意数量的字段(不限于两个),且内置长度一致性校验,避免因数据参差不齐而静默出错。
首先提取第一个字段中 data 数组的长度作为基准,然后逐一检查所有字段中 data 数组的长度是否一致——只要发现不一致,立即抛出错误,便于调试定位。
核心算法采用双重循环结构:外层循环逐一遍历索引位置,内层循环遍历所有字段,将同一索引下的各字段数值收集为一个行数组,最终合并到结果数组。
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');
}
if (fields.some(field =>
!Array.isArray(field.values?.data) ||
field.values.data.length !== length
)) {
throw new Error('All fields must ha ve 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;
}
