JavaScript：如何修改代码为匹配数组项添加available及team字段？

你的问题根源在于，原来的代码只提取了hobbies里的id数组，丢失了对应的team信息，所以没办法把team值赋给匹配的sports项。咱们可以通过构建一个id到team的映射表来解决这个问题，这样既能快速匹配运动名称，又能拿到对应的team值。

推荐实现方式（不修改原sports数组） #

这种方式会返回一个新的结果数组，保留原数组不变，是更符合函数式编程的做法：

// 把kids的hobbies转换成 { [运动id]: 对应team } 的映射表
const hobbyTeamMap = kids.extra.hobbies.reduce((acc, hobby) => {
  acc[hobby.id] = hobby.team;
  return acc;
}, {});

// 遍历sports数组，生成新的结果数组
const result = sports.map(sport => {
  // 检查当前运动是否在孩子的爱好列表里
  if (hobbyTeamMap.hasOwnProperty(sport.name)) {
    // 扩展原对象，添加available和team字段
    return {
      ...sport,
      available: true,
      team: hobbyTeamMap[sport.name]
    };
  }
  // 不匹配的话返回原对象的浅拷贝（避免后续修改影响原数组）
  return {...sport};
});

console.log(result);

如果需要直接修改原sports数组 #

如果你不需要保留原数组，想直接修改它，可以用forEach遍历：

const hobbyTeamMap = kids.extra.hobbies.reduce((acc, hobby) => {
  acc[hobby.id] = hobby.team;
  return acc;
}, {});

sports.forEach(sport => {
  const matchedTeam = hobbyTeamMap[sport.name];
  if (matchedTeam) {
    sport.available = true;
    sport.team = matchedTeam;
  }
});

console.log(sports);

为什么这样更优？ #

1. 保留关联信息：用reduce构建的映射表，同时保存了运动id和对应team的关系，解决了你之前丢失team的问题。
2. 效率更高：映射表的查找是O(1)时间复杂度，比原来用indexOf的O(n)查找更快，当数据量变大时差异更明显。
3. 代码更清晰：逻辑拆分明确，先构建映射表再处理数组，可读性更强。

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