如何将数组的 For 循环更改为 forEach？

Question

我正在使用一个数组，该数组在 JavaScript 中有一些对象，然后将其显示到 HTML 元素上，这可以通过将它们放在 for 循环中和 classOST 来实现，如果团队 WON 比赛失败。

但是，我想知道是否有办法将长 for 循环更改为 forEach。

下面是我的 HTML 代码和 JavaScript 代码。

HTML：

<div class="form-guide">
  <div class="england-form-guide" id="englandFormGuide">
    <p class="scores" id="scores"></p>
  </div>
</div>

JavaScript：

var guide = [{
    result: "won",
    match: "England 2-1 Belgium",
  },
  {
    result: "lost",
    match: "England 0-1 Denmark",
  },
  {
    result: "won",
    match: "England 3-0 Republic of Ireland",
  },
  {
    result: "lost",
    match: "Belgium 2-0 England",
  },
  {
    result: "won",
    match: "England 4-0 Iceland",
  }
]

var text = "";

for (var i = 0; i < guide.length; i++) {
  text += guide[i].match + "<br>";

  if (guide[i].result == "won") {
    text += '<span class="colour-green"><span class="green-circle">W</span>' + guide[i].match + '</span><br>';
  } else if (guide[i].result == "lost") {
    text += '<span class="colour-red"><span class="red-circle">L</span>' + guide[i].match + '</span><br>';
  }
}

document.getElementById("scores").innerHTML = text;

非常感谢。

Answer 1

考虑使用 DOM api 而不是生成原始 html。

 var guide = [ { result: "won", match: "England 2-1 Belgium", }, { result: "lost", match: "England 0-1 Denmark", }, { result: "won", match: "England 3-0 Republic of Ireland", }, { result: "lost", match: "Belgium 2-0 England", }, { result: "won", match: "England 4-0 Iceland", } ]; function createRowElement(game) { var rowElement = document.createElement('div'); var rowClassName = game.result === 'won'? 'row-green': 'row-red'; rowElement.setAttribute('class', rowClassName); var statusCircleElement = document.createElement('span'); statusCircleElement.setAttribute('class', 'circle'); statusCircleElement.innerHTML = circleClassName = game.result === 'won'? 'W': 'L'; var matchNameElement = document.createElement('span'); matchNameElement.innerHTML = game.match; rowElement.appendChild(statusCircleElement); rowElement.appendChild(matchNameElement); return rowElement; } function removeChildren(element) { Array.from(element.children).forEach(function(child) { child.remove(); }); } function renderResults(results) { var scoresElement = document.getElementById('scores'); removeChildren(scoresElement); results.map(createRowElement).forEach(function(resultElement) { scoresElement.appendChild(resultElement); }); } renderResults(guide);

 .row-green, .row-red { line-height: 2em; }.row-green { color: green; }.row-red { color: red; }.circle { margin-right: 1em; border-radius: 50%; color: white; }.row-green.circle { background-color: green; padding: 2px 3px; }.row-red.circle { background-color: red; padding: 2px 6px; }

 <div id="scores"></div>

Answer 2

 var guide = [{ result: "won", match: "England 2-1 Belgium", }, { result: "lost", match: "England 0-1 Denmark", }, { result: "won", match: "England 3-0 Republic of Ireland", }, { result: "lost", match: "Belgium 2-0 England", }, { result: "won", match: "England 4-0 Iceland", } ] var text = ""; guide.forEach(el => { if (el.result == "won") { text += '<span class="colour-green"><span class="green-circle">W</span>' + el.match + '</span><br>'; } else if (el.result == "lost") { text += '<span class="colour-red"><span class="red-circle">L</span>' + el.match + '</span><br>'; } })

 <div class="form-guide"> <div class="england-form-guide" id="englandFormGuide"> <p class="scores" id="scores"></p> </div> </div>

Answer 3

你可以，它不会为你节省很多，但在这里你 go：

guide.forEach(function(g) {
    text += g.match + "<br>";
    if (g.result == "won") {
        text += '<span class="colour-green"><span class="green-circle">W</span>' + g.match + '</span><br>';
    } else if (g.result == "lost") {
        text += '<span class="colour-red"><span class="red-circle">L</span>' + g.match + '</span><br>';
    }
});

Answer 4

检查我的评论...

这是您想要的完整可读的 foreach：

guide.foreach ((game,i) => {
   text += game[i].match + "<br>";

   switch(game[i].result){
   case ("won"):
        text += '<span class="colour-green"><span class="green-circle">W</span>' + game[i].match + '</span><br>';
   case ("lost"):
       text += '<span class="colour-red"><span class="red-circle">L</span>' + game[i].match + '</span><br>';
   default: null
   }
})