Analyse av veksling mellom X og O

I denne leksjonen vil jeg vise deg hvordan du gjør veksling mellom X og O i én kodelinje. Du har sannsynligvis gjort noe slik:

function start(cells) {
	let i = 0; // startverdi for teller
	
	for (let cell of cells) {
		cell.addEventListener('click', function() {
			if (i % 2 == 0) {
				this.textContent = 'X';
			} else {
				this.textContent = '0';
			}
			
			i++; // øker telleren
		});
	}
}

Jeg foreslår å løse oppgaven kortere. La oss lage en array med våre 'spillere':

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

Som du ser, i denne arrayen har X nøkkelen 0, og O - nøkkelen 1. Det samme kan sies om i % 2 - for X vil resten være 0, og for O - 1.

Det betyr at vi kan bruke denne i stedet for nøkkel:

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

console.log(gamers[key]);

Eller enda kortere:

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

Eller enda kortere:

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

La oss forenkle koden til funksjonen start nå:

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

Uavhengig, uten å kikke på koden min, utfør den beskrevne endringen.

For øyeblikket kan man gjøre et ubegrenset antall klikk på en hvilken som helst celle, og for eksempel endre X til O. Fiks dette.