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

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

我正在使用一个数组，其中包含一些 JavaScript 对象，然后将其显示在 HTML 元素上，这可以通过将它们放入 for 循环中来实现，如果团队赢得比赛并且团队输掉了比赛，则类会发生变化匹配。

但是，我想知道是否有办法将 long 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",match: "Belgium 2-0 England",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;

非常感谢。

解决方法

考虑使用 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",match: "Belgium 2-0 England",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>

,

var guide = [{
    result: "won",}
]

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>

,

你可以，它不会为你节省很多，但你去吧：

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

,

查看我的评论...

这是您想要的完整可读的 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
   }
})