JavaScript实现数组按索引映射：为数组元素添加关联属性

嘿，这个需求很清晰，我给你几种简单的实现方式，都是JavaScript里常用的方法～

方法一：使用Array.map()（推荐） #

map方法天生适合这种“遍历数组并生成新数组”的场景，它可以同时拿到当前元素和对应的索引，刚好能匹配上两个数组的对应关系：

const result1 = [ 
  [{name:"a",fruit:"apple"},{name:"b",fruit:"banana"}], 
  [{name:"o",fruit:"orange"}], 
  [{name:"g",fruit:"grapes"},{name:"s",fruit:"strawberries"}] 
];
const result2 =[ 
  {country:"japan",color:"red"}, 
  {country:"NewZealand",colour:"yellow"}, 
  {country:"srilanka",colour:"green"} 
];

// 自定义新属性名，这里用fruitsList，你可以改成任何你需要的名字
const result3 = result2.map((item, index) => {
  // 用扩展运算符复制原对象的所有属性，再添加新属性
  return { ...item, fruitsList: result1[index] };
});

console.log(result3);

小优化：处理数组长度不一致的情况 #

如果担心两个数组长度可能不匹配（比如result1比result2短），可以加个默认值避免出现undefined：

const result3 = result2.map((item, index) => {
  return { 
    ...item, 
    fruitsList: result1[index] || [] // 对应位置没有值时用空数组兜底
  };
});

方法二：使用for循环（适合新手理解） #

如果觉得map有点抽象，用最基础的for循环也能实现，逻辑更直观：

const result1 = [ 
  [{name:"a",fruit:"apple"},{name:"b",fruit:"banana"}], 
  [{name:"o",fruit:"orange"}], 
  [{name:"g",fruit:"grapes"},{name:"s",fruit:"strawberries"}] 
];
const result2 =[ 
  {country:"japan",color:"red"}, 
  {country:"NewZealand",colour:"yellow"}, 
  {country:"srilanka",colour:"green"} 
];

const result3 = [];
for (let i = 0; i < result2.length; i++) {
  // 先复制原对象，避免直接修改result2里的原元素
  const newItem = { ...result2[i] };
  // 添加新属性
  newItem.fruitsList = result1[i];
  // 把新对象放进结果数组
  result3.push(newItem);
}

console.log(result3);

说明 #

两种方法的核心逻辑都是：遍历result2的每个元素，将result1对应索引的数组作为新属性添加到元素中，最终生成新的数组result3。推荐用map方法，代码更简洁优雅，符合现代JS的写法。

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