Javascript 循环通过两个对象数组将匹配值推送到新数组在React中不起作用，但在JS FIDLE中起作用

我有两个长度不同的数据集。我需要遍历这两个数组，并将匹配玩家ID的照片url推送到一个新数组。我是在API数据加载到我的React组件之后才这样做的，所以似乎还没有加载数据的问题。我可以对这两个数据集进行console.log，并查看它们是否成功地从API返回。所有这些都在下面的JS Fiddle链接中起作用，但不起作用。所以我很难追踪到底发生了什么

这是我的数据集，所有数据集都明显缩短了：

此对象数组从保存所有播放器信息（如ID、照片URL等）的API端点返回。这是1200多个对象：

playerInfo = [
 {PlayerID: 123, PhotoURL: url123},
 {PlayerID: 345, PhotoURL: url345},
 {PlayerID: 678, PhotoURL: url678},
 {PlayerID: 910, PhotoURL: url910},
 {PlayerID: 1112, PhotoURL: "url1112"},
 {PlayerID: 1213, PhotoURL: "url1213"}
];

此数据从单独的API端点返回，该端点列出了当前的前导返回前40个前导：

playerIDs = [123, 345, 678, 910]

不幸的是，这个排行榜数据不包括照片URL和返回的玩家ID，所以我必须比较两个数组中的玩家ID，然后从上面匹配的playerInfo数组推送照片URL

我的方法如下：我可能会为此使用某种类型的ES6功能，因此如果是这样，请告诉我：

let leaderPhotos = [];

for(let i = 0; i < playerInfo.length; i++) {
  if(playerInfo[i].PlayerID === playerIDs[i]) {
    leaderPhotos.push(playerInfo[i].PhotoURL);
  }
}

果不其然，这会像预期的那样，在没有for循环的情况下，将匹配对的照片url推送到leaderPhotos。我很难理解为什么for循环不起作用，即使在jsfiddle中它证明了这应该返回期望的结果。提前谢谢你的提示

试试这个

let leaderPhotos = playerInfo.filter(plr => playerIDs.indexOf(plr.PlayerID) !== -1).map( t => t.PhotoURL);

---

确保两个阵列基于playerId的顺序相同

否则，您需要使用两个循环：

let leaderPhotos = [];

for(let i = 0; i < playerInfo.length; i++) {
  for(let j = 0; j < playerIDs.length; j++ )
    if(playerInfo[i].PlayerID === playerIDs[j]) {
      leaderPhotos.push(playerInfo[i].PhotoURL);
    }
}

简洁版

注意：只是想让您知道这是一个嵌套循环。其中map是一个通过领导委员会的循环，find是一个通过玩家的循环。时间复杂度为*m，其中n是总用户数，m是领导委员会的长度

不过，如果用户总数不是很大，那也没关系，只要代码看起来干净易懂，那就更好了：

如果你有大量的用户，你想拥有最高效的代码。您应该做的是将playerInfo存储在地图/对象中，其中键是playerId，值是playerURL。这样，它只需要在你的对象中循环一次，就可以对玩家的照片进行O1检索

有效版本

---

这个问题的时间复杂度最多取决于其中n是玩家的数量

与其他答案相比，这是最短的解决方案：

let leaderPhotos = playerInfo.filter((info) => playerIDs.includes(info.PlayerID)).map(id => id.PhotoURL);

---

您能提供react组件代码吗？您的第一个解决方案在JSFIDLE中给出了一个错误。你能用代码检查一下吗？哎呀！谢谢我主要是尝试编写伪代码，但没有看到JSFIDDLE，这对我来说是完美的。我感谢你的解释。

const leaderPhotos = playerIDs.map(id => 
    playerInfo.find(({ PlayerID }) => PlayerID === id).PhotoURL
);

const playerMap = {};

playerInfo.forEach((player) => {
  playerMap[player.PlayerID] = player.PhotoURL;
});

const leaderPhotos = playerIDs.map(leaderId => playerMap[leaderId]);

let leaderPhotos = playerInfo.filter((info) => playerIDs.includes(info.PlayerID)).map(id => id.PhotoURL);