在 map 或 forEach 函数中放置 if 语句答案

【问题标题】：Placing an if statement within a map or forEach function在 map 或 forEach 函数中放置 if 语句
【发布时间】：2022-01-21 05:01:41
【问题描述】：

我正在使用 Node.js、Express 和 Socket.io 构建一个小型词链回合制游戏。玩家和他们的分数通过这个功能随时刷新：

function updatePlayersList(players) {
  const players_list = document.getElementById('players_list');
  players_list.innerHTML = players.map(player => `<li id="${player.id}">${player.name} - ${player.score}</li>`).join('');
}

这是players 数组：

[
  {
    id: 'opYbiuXzExmymRPvAAAV',
    name: 'Paul',
    score: 0,
    room: 'room',
    playing: true
},
{
    id: 'uvs4wxpZwsmaQ3G4AAAX',
    name: 'Ezio',
    score: 0,
    room: 'room',
    playing: true
  }
]

工作正常并显示this。轮到的玩家的名字带有边框。这是一个只有两个玩家但可以玩更多玩家的游戏。

在这个想法中，我想打出在比赛中输球的球员的名字。他们的名字仍然会显示，所以每个人都知道谁还在，谁在外面，但他们显然不能再玩了，继续看吧。

所以我在考虑 map 函数中的 if 语句，将 .not-playing 类添加到具有 playing: false 的玩家名称（每回合后在服务器端更新）。但是无论哪种方式我都做错了，还是我必须使用其他东西？这是修改后的代码，但是没有更多的玩家被显示，无论是正在播放的还是未播放的。显然不是我想要的。

players_list.innerHTML = players.map(player => {
    if (player.playing) {
      `<li id="${player.id}">${player.name} - ${player.score}</li>`
    } else {
      `<li id="${player.id}" class="not-playing">${player.name} - ${player.score}</li>`
    }
  }).join('');

我也尝试了forEach 循环，但得到了相同的结果。

【问题讨论】：

parameter => value 返回value。 parameter => { value; } 不...
您在if() 版本中缺少return 语句。第一个版本在没有大括号时使用隐式返回 { }

标签： javascript arrays dictionary foreach

【解决方案1】：

我不确定你的 forEach 是什么样子，但我想我得到了你正在寻找的功能：

players.forEach(player => {
    if (player.playing) {
        players_list.innerHTML += `<li id="${player.id}">${player.name} - ${player.score}</li>`
    } else {
        players_list.innerHTML += `<li id="${player.id}" class="not-playing">${player.name} - ${player.score}</li>`
    }
 })

【讨论】：

【解决方案2】：

在您修改后的代码中，您不会从 map 调用中返回任何内容。只要你不打开花括号，你就会隐式返回映射到的值（这是 JavaScript 提供给你的一些语法糖），但是一旦你打开一个块，你需要从它显式返回：

players_list.innerHTML = players.map(player => {
    if (player.playing) {
        return `<li id="${player.id}">${player.name} - ${player.score}</li>`;
    } else {
        return `<li id="${player.id}" class="not-playing">${player.name} - ${player.score}</li>`;
    }
}).join('');

【讨论】：

【解决方案3】：

做地图的时候应该返回一些东西。

【讨论】：