Phân tích sự luân phiên giữa X và O

Trong bài học này, tôi muốn chỉ cho bạn cách thực hiện sự luân phiên giữa X và O chỉ trong một dòng code. Rất có thể, bạn đã làm một cái gì đó như thế này:

function start(cells) {
	let i = 0; // giá trị bắt đầu của bộ đếm
	
	for (let cell of cells) {
		cell.addEventListener('click', function() {
			if (i % 2 == 0) {
				this.textContent = 'X';
			} else {
				this.textContent = '0';
			}
			
			i++; // tăng bộ đếm
		});
	}
}

Tôi sẽ đề xuất giải quyết bài toán ngắn gọn hơn. Hãy tạo mảng các 'người chơi' của chúng ta:

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

Như bạn thấy, trong mảng này, X có khóa 0, và O - khóa 1. Điều tương tự cũng có thể nói về i % 2 - đối với X, số dư sẽ là 0, và đối với O - 1.

Tức là, thứ này có thể được sử dụng thay cho khóa:

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

console.log(gamers[key]);

Hoặc thậm chí ngắn hơn:

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

Hoặc thậm chí ngắn hơn nữa:

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

Bây giờ hãy đơn giản hóa code hàm start của chúng ta:

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

Tự mình, không nhìn vào code của tôi, hãy áp dụng chỉnh sửa đã mô tả.

Hiện tại, có thể nhấp không giới hạn vào bất kỳ ô nào, thay đổi, ví dụ, X thành O. Hãy sửa lỗi này.