在 vue.js 中加入 2 个具有相同字段名称的对象答案

【问题标题】：join 2 objects with the same field name in vue.js在 vue.js 中加入 2 个具有相同字段名称的对象
【发布时间】：2021-12-28 09:16:18
【问题描述】：

我正在尝试按键连接 2 个对象，这些对象中有 2 个名称相同但值不同的字段。

var players = [{ id : 'a', name : "player1",team:1},{ id : 'b', name : "player2",team:1}, { id : 'c', name : "player3",team:2}]
var teams = [{ id : 1, name : "LA"}, {id : 2, name: "IL"}]

我希望能够得到类似的结果：

var mergedList = [{ id : 'a', name : "player1",team.id:1, team.name: "LA"},
          { id : 'b', name : "player2",team__id:1, team_name: "LA"},
          { id : 'c', name : "player3",team__id:2, team_name: "US"}]

这是我目前尝试过的：

const mergedList = players.map((player) => ({
        ...player,
        ...teams.find((team) => team__id === player_team),
      }));

但是球员的姓名字段被球队的姓名取代。

【问题讨论】：

标签： javascript node.js vue.js join

【解决方案1】：

您需要为teams 中的字段设置新的属性键。请记住，密钥不允许包含.

const mergedList = players.map((player) => {
    const team = teams.find((team) => team.id === player.team);
    return {
        ...player,
        team_id: team?.id,
        team_name: team?.name,
    }
});

【讨论】：

我可以在一行中将整个团队的文件名改为“team_filedname”而不是直接说明吗？
@David 没有办法做到这一点。您不能在一行中传播对象并重命名其键

【解决方案2】：

名称将被替换，因为 Player 和 Team 对象都具有 name 属性，并且解决方案在组合对象时会覆盖 name。

由于您想分别使用team.id 和team.name 访问team 对象的id 和name，因此一种合适的解决方案可能是将团队对象放在玩家对象中，例如：

var players = [{ id : 'a', name : "player1",team:1},{ id : 'b', name : "player2",team:1}, { id : 'c', name : "player3",team:2}]

var teams = [{ id : 1, name : "LA"}, {id : 2, name: "IL"}]

const mergedList = players.map((player) => ({
  ...player,
  team: teams.find((team) => team.id === player.team),
}));

mergedList.forEach(ele => {
 console.log(`${ele.id}, ${ele.name} is in team ${ele.team.id}, ${ele.team.name}`);
});

【讨论】：