Analys av alternering av kryss och ring

I den här lektionen vill jag visa dig hur man gör alternering av kryss och ring på en rad. Du har förmodligen gjort något sånt här:

javascriptfunction start(cells) {
  let i = 0; // initialt värde på räknaren
  
  for (let cell of cells) {
    cell.addEventListener('click', function() {
      if (i % 2 == 0) {
        this.textContent = 'X';
      } else {
        this.textContent = '0';
      }
      
      i++; // ökar räknaren
    });
  }
}

Jag föreslår att vi löser uppgiften kortare. Låt oss skapa en array med våra 'spelare':

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

Som du ser har krysset nyckeln 0 i denna array, och ring - nyckeln 1. Samma sak kan sägas om i % 2 - för kryss blir resten 0, och för ring - 1.

Det betyder att vi kan använda denna sak istället för nyckeln:

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

console.log(gamers[key]);

Eller ännu kortare:

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

Eller ännu kortare:

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

Låt oss nu förenkla koden för vår funktion start:

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