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

Question

我正在使用一个数组，该数组在 JavaScript 中包含一些对象，然后将其显示到一个 HTML 元素上，这通过将它们放在一个 for 循环中来工作，并且如果团队赢得了比赛并且如果团队输了匹配。

但是，我想知道是否有办法将长 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

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

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