Lỗi Duyệt Mảng Bằng Vòng Lặp for-in Trong JavaScript

Để duyệt mảng, nên sử dụng vòng lặp for-of. Tuy nhiên, đôi khi người mới bắt đầu sai lầm thử áp dụng vòng lặp for-in. Hãy xem các dấu hiệu đặc trưng của lỗi này.

Giả sử chúng ta có một mảng:

let arr = ['a', 'b', 'c'];

Hãy duyệt qua các phần tử của mảng này và ghi chúng thành một chuỗi.

Một lập trình viên nào đó đã giải quyết nhiệm vụ này, nhưng lại sai lầm khi sử dụng vòng lặp for-in. Hãy xem anh ta đã làm được gì:

let res = '';

for (let elem in arr) {
	res += elem;
}

console.log(res); // sẽ hiển thị '012'

Vậy là, kết quả thu được là chuỗi '012', mà không phải 'abc'. Hãy cùng tìm hiểu lý do tại sao lại xảy ra như vậy.

Tại sao mảng lại có thể được duyệt bằng vòng lặp for-in? Vấn đề là, mảng trong JavaScript là một trường hợp đặc biệt của đối tượng. Vì vậy, thực chất về mặt này thì đây là mã hợp lệ. Nhưng không nên làm như vậy.

Vấn đề là for-in trong một số điều kiện có thể bắt được những thứ thừa, và ngoài các phần tử mảng, bạn có thể nhận được thêm một số thứ ký sinh nào đó khi duyệt. Chỉ nên duyệt mảng bằng for-of.

Bây giờ hãy tìm hiểu tại sao chúng ta thấy một kết quả kỳ lạ như vậy. Vấn đề là, khi duyệt bằng for-in thì thực chất biến elem sẽ nhận được các khóa, bất chấp tên biến gây nhầm lẫn này.

Hãy sửa lỗi đã mắc phải và viết mã chính xác:

let arr = ['a', 'b', 'c'];
let res = '';

for (let elem of arr) {
	res += elem;
}

console.log(res); // sẽ hiển thị 'abc'