Kryžiuko ir nuliuko kaitaliojimo analizė

Šioje pamokoje noriu jums parodyti, kaip padaryti kryžiuko ir nuliuko kaitaliojimą vienoje eilutėje. Jūs greičiausiai padarėte kažką panašaus:

javascriptfunction start(cells) {
  let i = 0; // pradinė skaitiklio reikšmė
  
  for (let cell of cells) {
    cell.addEventListener('click', function() {
      if (i % 2 == 0) {
        this.textContent = 'X';
      } else {
        this.textContent = '0';
      }
      
      i++; // didiname skaitiklį
    });
  }
}

Aš siūlysiu išspręsti užduotį trumpiau. Sukurkime mūsų 'žaidėjų' masyvą:

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

Kaip matote, šiame masyve kryžiukas turi raktą 0, o nuliukas - raktą 1. Tą patį galima pasakyti ir apie i % 2 - kryžiukui liekana bus 0, o nuliukui - 1.

Tai yra šį dalyką galima panaudoti vietoj rakto:

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

console.log(gamers[key]);

Arba dar trumpiau:

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

Arba dar trumpiau:

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

Dabar supaprastinkime mūsų funkcijos start kodą:

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