Angular中如何将嵌套数组对应元素提取为目标格式新数组？

原数组与目标格式 #

原数组：

const newItem = [['ID', ['item 1A','item 1B','item 1C']], ['Address',['item 2A','item 2B','item 2C']], ['Req',['item 3A', 'item 3B', 'item 3C']]]

目标格式：

const newArr = [['item 1A', 'item 2A', 'item 3A'], ['item 1B', 'item 2B', 'item 3B'], ['item 1C', 'item 2C', 'item 3C']]

可行实现方案 #

方法一：基于map的转置操作

核心思路是先提取所有的item子数组，再通过索引匹配完成转置：

const newItem = [['ID', ['item 1A','item 1B','item 1C']], ['Address',['item 2A','item 2B','item 2C']], ['Req',['item 3A', 'item 3B', 'item 3C']]];

// 提取所有包含item的子数组
const itemGroups = newItem.map(entry => entry[1]);
// 转置：按索引收集不同组的对应元素
const newArr = itemGroups[0].map((_, idx) => itemGroups.map(group => group[idx]));

console.log(newArr);

方法二：用Array.from动态创建结果数组

如果需要兼容更复杂的场景（比如不确定第一个分组是否存在），可以用Array.from来初始化结果数组长度：

const newItem = [['ID', ['item 1A','item 1B','item 1C']], ['Address',['item 2A','item 2B','item 2C']], ['Req',['item 3A', 'item 3B', 'item 3C']]];

const itemGroups = newItem.map(entry => entry[1]);
const newArr = Array.from({ length: itemGroups[0].length }, (_, idx) => 
  itemGroups.map(group => group[idx])
);

console.log(newArr);

逻辑说明 #

1. 提取item分组：用map遍历原数组，取出每个子数组的第二个元素（也就是存放item的数组），得到一个二维数组[item组1, item组2, item组3]。
2. 转置数组：以第一个item组的长度为基准（假设所有组长度一致），遍历每个索引位置，从每个item组中取出对应索引的元素，组合成新的子数组，最终得到行和列互换的目标数组。

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