Sự Khác Biệt Giữa for...in và for...of Trong JavaScript

Sự Khác Biệt Giữa for...in và for...of Trong JavaScript

Cả for...in và for...of đều là các cấu trúc lặp được sử dụng trong JavaScript, nhưng chúng có mục đích và cách thức hoạt động khác nhau. Dưới đây là sự khác biệt chính giữa chúng:

for...in

• Mục đích: Dùng để lặp qua các thuộc tính liệt kê được (enumerable properties) của một đối tượng (object), bao gồm cả các thuộc tính được thừa kế từ prototype.

• Cú pháp:

  for (key in object) {
    // code to be executed
  }
  

• Ví dụ:

  let person = {
    name: "Alice",
    age: 25,
    city: "New York"
  };
  
  for (let key in person) {
    console.log(key + ": " + person[key]);
  }
  // Output:
  // name: Alice
  // age: 25
  // city: New York
  

for...of

• Mục đích: Dùng để lặp qua các giá trị của các đối tượng lặp lại được (iterable objects), chẳng hạn như mảng (array), chuỗi (string), Map, Set, và các cấu trúc dữ liệu lặp khác.

• Cú pháp:

  for (element of iterable) {
    // code to be executed
  }
  

• Ví dụ:

  let arr = [10, 20, 30, 40];
  
  for (let value of arr) {
    console.log(value);
  }
  // Output:
  // 10
  // 20
  // 30
  // 40
  

So Sánh Chi Tiết

1. Phạm Vi Lặp

• for...in:

  • Lặp qua tất cả các thuộc tính liệt kê được của một đối tượng, bao gồm cả các thuộc tính thừa kế từ prototype.
  • Phù hợp để lặp qua các đối tượng thông thường.

• for...of:

  • Lặp qua các giá trị của các đối tượng lặp lại được (iterable objects).
  • Phù hợp để lặp qua các cấu trúc dữ liệu có thể lặp như mảng, chuỗi, Map, Set.

2. Sử Dụng

• for...in:

  • Lặp qua đối tượng:

    let person = { name: "Alice", age: 25 };
    for (let key in person) {
      console.log(key + ": " + person[key]);
    }
    // Output:
    // name: Alice
    // age: 25
    

  • Không phù hợp để lặp qua mảng:

    let arr = [10, 20, 30];
    for (let index in arr) {
      console.log(index + ": " + arr[index]);
    }
    // Output:
    // 0: 10
    // 1: 20
    // 2: 30
    

• for...of:

  • Lặp qua mảng:

    let arr = [10, 20, 30];
    for (let value of arr) {
      console.log(value);
    }
    // Output:
    // 10
    // 20
    // 30
    

  • Lặp qua chuỗi:

    let str = "hello";
    for (let char of str) {
      console.log(char);
    }
    // Output:
    // h
    // e
    // l
    // l
    // o
    

Tổng Kết

• for...in:

  • Dùng để lặp qua các thuộc tính liệt kê được của một đối tượng.
  • Phù hợp để làm việc với đối tượng thông thường.
  • Không nên sử dụng cho mảng vì nó lặp qua cả các thuộc tính thừa kế.

• for...of:

  • Dùng để lặp qua các giá trị của các đối tượng lặp lại được.
  • Phù hợp để làm việc với các cấu trúc dữ liệu có thể lặp như mảng, chuỗi, Map, Set.
  • Không thể sử dụng cho đối tượng thông thường.

Hiểu rõ sự khác biệt giữa for...in và for...of sẽ giúp bạn lựa chọn cấu trúc lặp phù hợp với tình huống cụ thể.