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

Question

我正在使用 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 语句，将 class .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 循环，但得到了相同的结果。

Answer 1

做地图时你应该return一些东西。

Answer 2

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

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('');

Answer 3

我不确定你的 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>`
    }
 })

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

Placing an if statement within a map or forEach function

javascript

arrays

foreach

dictionary