Gennemgang af skifte mellem kryds og bolle

I denne lektion vil jeg vise dig, hvordan man laver skifte mellem kryds og bolle i én linje kode. Du har højst sandsynligt gjort noget som dette:

javascriptfunction start(cells) {
  let i = 0; // startværdi for tæller
  
  for (let cell of cells) {
    cell.addEventListener('click', function() {
      if (i % 2 == 0) {
        this.textContent = 'X';
      } else {
        this.textContent = '0';
      }
      
      i++; // øger tælleren
    });
  }
}

Jeg foreslår at løse opgaven kortere. Lad os lave et array med vores 'spillere':

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

Som du kan se, har kryds i dette array nøglen 0, og bolle - nøglen 1. Det samme kan siges om i % 2 - for kryds vil resten være 0, og for bolle - 1.

Det betyder, at vi kan bruge denne ting i stedet for nøglen:

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

console.log(gamers[key]);

Eller endnu kortere:

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

Eller endnu kortere:

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

Lad os nu forenkle koden for vores funktion start:

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