javascript - 有没有一种方法可以使用更少的代码来过滤数组并将其转换为 SWAL 选择做好准备？

Question

假设你有:

this.group.players = [{id:1,name:'Joe Bloggs'},
                      {id:2,name:'Jane Bloggs'},
                       ...
                      ];

现在假设您有所有玩家的列表(通过 ajax 加载):

newPlayers = [0:{id:1,name:'Joe Bloggs'},
              1:{id:2,name:'Jane Bloggs'},
              2:{id:3,name:'Jeffery Bloggs'},
              3:{id:4,name:'Jared Bloggs'},
              ...
              ];

用户想要向 this.group.players 添加一个新玩家，所以我向他们展示了一个选择(使用 SWAL)，它以 value 的形式获取数据:名称。我想跳过 this.group.players 中已有的玩家。所以我想结束这个:

selectOptions = [3:'Jeffery Bloggs',
                 4:'Jared Bloggs',
                 ...
                ];

这是我刚才用来实现此目的的代码:

  let playerIDs = this.group.players.map((player)=>{ return parseInt(player.id); });

  axios.get(route('player.index'))
       .then(async (response)=>{
               let selectOptions = response.data.reduce((result,player)=> {
                  if (playerIDs.includes(player.id)) { return result; }
                  result[player.id] = player.name;
                  return result;
               },{});
        })
        .catch( ...

这感觉可以大大改进吗？有什么建议吗？

Answer 1

你可以先filter播放器 ID，然后是 map玩家名称和 ID，这将为您提供一个包含玩家名称和 ID 的数组:

response.data
    .filter(({id})=> playerIDs.includes(id))
    .map(({id, name}) => {id, name})

您也可以轻松地 sort如果你愿意，可以通过 ids:

response.data
    .filter(({id})=> playerIDs.includes(id))
    .map(({id, name}) => {id, name})
    .sort((player1, player2) => player1.id - player2.id)

最后，如果您想要您在问题中描述的确切格式，即以 id 作为键和名称作为值的对象，我相信您将不得不使用 reduce 并以更冗长的函数结束:

response.data
    .filter(({id})=> playerIDs.includes(id))
    .reduce((players, player) => ({...players, [player.id]: player.name}), {})