Analyse der Abwechslung von Kreuz und Kreis

In dieser Lektion möchte ich Ihnen zeigen, wie man die Abwechslung von Kreuz und Kreis in einer Zeile macht. Sie haben höchstwahrscheinlich so etwas gemacht:

javascriptfunction start(cells) {
  let i = 0; // Anfangswert des Zählers
  
  for (let cell of cells) {
    cell.addEventListener('click', function() {
      if (i % 2 == 0) {
        this.textContent = 'X';
      } else {
        this.textContent = '0';
      }
      
      i++; // Zähler erhöhen
    });
  }
}

Ich schlage vor, die Aufgabe kürzer zu lösen. Lassen Sie uns ein Array unserer 'Spieler' machen:

javascriptlet gamers = ['X', 'O'];

Wie Sie sehen können, hat das Kreuz in diesem Array den Schlüssel 0 und der Kreis - den Schlüssel 1. Dasselbe kann man auch über i % 2 sagen - für das Kreuz wird der Rest 0 sein, und für den Kreis - 1.

Das heißt, man kann dieses Ding anstelle des Schlüssels verwenden:

javascriptlet gamers = ['X', 'O'];
let key = i % 2;

console.log(gamers[key]);

Oder noch kürzer:

javascriptlet gamers = ['X', 'O'];
console.log(gamers[i % 2]);

Oder noch kürzer:

javascriptconsole.log(['X', 'O'][i % 2]);

Vereinfachen wir nun den Code unserer Funktion start:

javascriptfunction start(cells) {
  let i = 0;
  
  for (let cell of cells) {
    cell.addEventListener('click', function() {
      this.textContent = ['X', 'O'][i % 2];
      i++;
    });
  }
}