Cách sử dụng vòng lặp for...in trong JavaScript

numbers.forEach(value => console.log(value));

for (let i = 0; i < numbers.length; i++) {
    console.log(i + ": " + numbers[i]);
}

for...in lặp qua cả thuộc tính kế thừa

Trong JavaScript, một Object có thể kế thừa các thuộc tính từ prototype. Khi sử dụng for...in, vòng lặp sẽ duyệt qua cả các thuộc tính kế thừa từ prototype, điều này có thể gây ra kết quả không mong muốn.

Ví dụ minh họa

function Person(name, age) {
    this.name = name;
    this.age = age;
}

Person.prototype.country = "Vietnam"; // Thêm thuộc tính vào prototype

const person = new Person("John", 30);

for (let key in person) {
    console.log(key + ": " + person[key]);
}

Kết quả:

name: John  
age: 30  
country: Vietnam   (Thuộc tính không mong muốn từ prototype)

Vấn đề:

• country không phải là thuộc tính trực tiếp của person, nhưng nó vẫn xuất hiện khi sử dụng for...in.
• Nếu Object có nhiều thuộc tính từ prototype, chúng ta sẽ nhận kết quả không mong muốn.

Cách khắc phục: Dùng hasOwnProperty() để kiểm tra chỉ lấy các thuộc tính riêng của Object.

for (let key in person) {
    if (person.hasOwnProperty(key)) {
        console.log(key + ": " + person[key]);
    }
}

Kết quả mong muốn:

name: John  
age: 30  

for...in có thể lặp qua cả thuộc tính không phải số trong mảng

Do JavaScript coi mảng là một loại Object đặc biệt, nếu bạn gán thuộc tính tùy chỉnh vào một mảng, vòng lặp for...in sẽ duyệt qua cả thuộc tính đó.

Ví dụ minh họa:

const numbers = [10, 20, 30];
numbers.customProperty = "Extra Data"; // Thêm thuộc tính vào mảng

for (let index in numbers) {
    console.log(index + ": " + numbers[index]);
}

Kết quả:

0: 10  
1: 20  
2: 30  
customProperty: Extra Data   (Thuộc tính không mong muốn)

Cách khắc phục:

• Dùng hasOwnProperty() để kiểm tra chỉ mục hợp lệ (ít phổ biến).
• Sử dụng for...of thay vì for...in để tránh lỗi này.

Kết quả

Vòng lặp for...in là một công cụ hữu ích trong JavaScript khi cần duyệt qua các thuộc tính của Object. Nó giúp chúng ta dễ dàng truy cập tên thuộc tính và giá trị tương ứng, đặc biệt khi làm việc với các đối tượng có nhiều key. Tuy nhiên, khi sử dụng for...in, cần lưu ý một số hạn chế quan trọng, đặc biệt là:

• Không nên dùng for...in để duyệt mảng, vì nó không đảm bảo thứ tự và có thể lặp qua cả thuộc tính tùy chỉnh.
• for...in cũng duyệt cả các thuộc tính kế thừa từ prototype, nên cần dùng hasOwnProperty() để lọc thuộc tính mong muốn.
• Khi làm việc với mảng, nên ưu tiên sử dụng for...of, forEach() hoặc vòng lặp for truyền thống để đảm bảo hiệu suất và tính chính xác.

Tóm lại, for...in là một vòng lặp quan trọng trong JavaScript, nhưng nó chỉ nên được sử dụng trong các trường hợp phù hợp. Hiểu rõ ưu và nhược điểm của nó sẽ giúp bạn viết mã JavaScript hiệu quả, tối ưu hơn.