如何将键数组与对象数组转换为指定结构数组？代码返回undefined

我有两个数组如下：

const firstarray = ['prop1', 'prop2', 'prop3']

const secondArray = [
       {
         id: 'prop1',
         values:['teste1', 'teste2', 'teste3']
       },
    {
         id: 'prop2',
         values:['value1', 'value2', 'value3']
       },
    {
         id: 'prop3',
         values:['anotherValue1', 'anotherValue2', 'anotherValue3']
       }
]

希望转换为结构如下的新数组：

const array = [
{prop1: 'teste1', prop2: 'value1', prop3: 'anotherValue1' },
{prop1: 'teste2', prop2: 'value2', prop3: 'anotherValue2' },
{prop1: 'teste3', prop2: 'value3', prop3: 'anotherValue3' }
]

我尝试了以下代码，但得到的是一个由undefined组成的数组：

const newArray = this.firstArray.map((key:string) => {
const obj = this.secondArray.find((element:any) => element.id ==key)
obj.values.map((value:any) => {key: value});
})

请问该如何解决？

你的代码存在两个关键问题：

• 外层firstArray.map的回调函数没有返回值，每一次迭代都会默认返回undefined，最终得到全是undefined的数组。
• 逻辑方向错误：你是按firstArray的每个key遍历，但目标是构建对应索引位置的对象数组，应该以values的索引为基准循环，而非按key循环。

这里提供两种可行的实现方式：

方法一：基于映射+索引循环（高效推荐） #

先把secondArray转换成id到values的映射表，避免重复调用find，再按索引构建每个对象：

// 构建id与对应values数组的映射
const valueMap = new Map(secondArray.map(item => [item.id, item.values]));
// 确定结果数组的长度（取第一个key对应的values长度）
const resultLength = valueMap.get(firstarray[0])?.length || 0;

const newArray = Array.from({ length: resultLength }, (_, index) => {
  return firstarray.reduce((obj, key) => {
    obj[key] = valueMap.get(key)[index];
    return obj;
  }, {});
});

方法二：简化版（适合已知所有values长度一致的场景） #

如果可以确定所有values数组的长度相同，也可以直接基于第一个元素的values长度循环：

const newArray = secondArray[0].values.map((_, idx) => {
  return firstarray.reduce((acc, key) => {
    const targetItem = secondArray.find(el => el.id === key);
    acc[key] = targetItem.values[idx];
    return acc;
  }, {});
});

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