Vòng lặp for…of trong JavaScript được giải thích: Cú pháp, ví dụ và các thực tiễn tốt nhất

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Giới thiệu

Khi làm việc với dữ liệu trong JavaScript, việc lặp lại là thiết yếu. Để xử lý dữ liệu như mảng và chuỗi theo thứ tự, JavaScript cung cấp một số cú pháp vòng lặp. Trong số đó, câu lệnh for…of nổi bật như một lựa chọn đơn giản nhưng mạnh mẽ.

Trong bài viết này, chúng tôi sẽ giải thích chi tiết câu lệnh for…of của JavaScript — từ những kiến thức cơ bản đến các trường hợp sử dụng nâng cao. Chúng tôi sẽ bắt đầu với các ví dụ thân thiện cho người mới và sau đó đề cập đến các mẫu thực tiễn được sử dụng ở mức trung cấp và trong phát triển thực tế. Sau khi đọc xong, bạn sẽ có thể sử dụng câu lệnh for…of một cách tự tin mà không gặp khó khăn khi viết vòng lặp.

2. Câu lệnh for…of của JavaScript là gì? Cách sử dụng cơ bản

2.1 Tổng quan về câu lệnh for…of

Câu lệnh for…of của JavaScript là một cú pháp cho phép bạn lặp qua các đối tượng có thể lặp lại một cách sạch sẽ và đơn giản. Nó được thiết kế để xử lý hiệu quả các cấu trúc dữ liệu như mảng, chuỗi, Map và Set.

2.2 Cú pháp cơ bản của câu lệnh for…of

Sử dụng cú pháp sau để xử lý từng phần tử của một đối tượng có thể lặp lại theo thứ tự.

for (const element of arrayOrObject) {
  // 반복 처리
}

Cú pháp này hữu ích khi bạn muốn dễ dàng lấy từng phần tử từ một mảng hoặc chuỗi.

2.3 Các ví dụ thực tế

Ví dụ 1: In các phần tử của mảng theo thứ tự

const fruits = ['Apple', 'Banana', 'Orange'];
for (const fruit of fruits) {
  console.log(fruit);
}

Kết quả:

Apple  
Banana  
Orange

Ví dụ 2: In từng ký tự của một chuỗi

const word = 'JavaScript';
for (const char of word) {
  console.log(char);
}

Kết quả:

J  
a  
v  
a  
S  
c  
r  
i  
p  
t

2.4 Các kiểu dữ liệu được hỗ trợ

Câu lệnh for…of có thể được sử dụng với các đối tượng có thể lặp lại sau:

1. Mảng (Array)
2. Chuỗi (String)
3. Đối tượng Map
4. Đối tượng Set
5. Đối tượng arguments (một đối tượng được truyền làm đối số cho hàm)
6. Đối tượng NodeList (một tập hợp các phần tử HTML)

Lưu ý: Bạn không thể áp dụng nó trực tiếp lên các literal object (chúng tôi sẽ giải thích cách khắc phục sau).

3. Sự khác biệt và so sánh với các cú pháp vòng lặp khác

3.1 Sự khác biệt giữa for…of và for…in

Ví dụ: Sử dụng for…in

const obj = { a: 1, b: 2, c: 3 };
for (const key in obj) {
  console.log(key); // a, b, c
}

Lưu ý quan trọng:
Vì for…in có thể liệt kê các thuộc tính từ chuỗi prototype, bạn cần cẩn thận — đặc biệt khi lặp qua các đối tượng.

3.2 Sự khác biệt giữa for…of và forEach

Ví dụ: Sử dụng forEach

const arr = [1, 2, 3];
arr.forEach(num => {
  console.log(num);
});

Lưu ý quan trọng:
Vì forEach không thể dừng vòng lặp sớm, nên câu lệnh for…of được khuyến nghị khi luồng điều khiển quan trọng.

4. Các ví dụ thực tế và kỹ thuật nâng cao

4.1 Lọc một mảng

Ví dụ sau sẽ chỉ xuất ra các số chẵn.

const numbers = [1, 2, 3, 4, 5];
for (const num of numbers) {
  if (num % 2 === 0) console.log(num); // Output only even numbers
}

Kết quả:

2  
4

4.2 Lấy khóa và giá trị từ một Map

Ví dụ này cho thấy cách lấy khóa và giá trị bằng đối tượng Map.

const map = new Map([
  ['name', 'Taro'],
  ['age', 25]
]);
for (const [key, value] of map) {
  console.log(`${key}: ${value}`);
}

Kết quả:

name: Taro  
age: 25

4.3 Kết hợp với xử lý bất đồng bộ

Dưới đây là một ví dụ về xử lý các thao tác bất đồng bộ với câu lệnh for…of.

const urls = ['url1', 'url2', 'url3'];

async function fetchData() {
  for (const url of urls) {
    const response = await fetch(url);
    const data = await response.json();
    console.log(data);
  }
}
fetchData();

Trong ví dụ này, mỗi yêu cầu API được thực thi theo thứ tự, vì vậy bạn có thể lấy dữ liệu trong khi duy trì trình tự thực thi.

5. Ghi chú và Khắc phục sự cố

5.1 Khi Bạn Gặp Lỗi với Đối tượng

Câu lệnh for…of không thể được sử dụng với các literal đối tượng. Thay vào đó, hãy dùng Object.entries().

Ví dụ: Xử lý với Object.entries()

const obj = { a: 1, b: 2 };
for (const [key, value] of Object.entries(obj)) {
  console.log(key, value);
}

Kết quả:

a 1  
b 2

Với cách tiếp cận này, bạn có thể duyệt hiệu quả các khóa và giá trị của một đối tượng.

5.2 Các cân nhắc về hiệu năng

Câu lệnh for…of thường cung cấp hiệu năng đủ cho các trường hợp sử dụng thông thường, nhưng bạn nên cẩn thận khi làm việc với bộ dữ liệu lớn. Nếu cần, hãy cân nhắc sử dụng vòng lặp for dựa trên chỉ mục hoặc vòng lặp while.

Ví dụ: Vòng lặp for dựa trên chỉ mục

const largeArray = Array(1000000).fill(1);
for (let i = 0; i < largeArray.length; i++) {
  // Performance-focused processing
  console.log(largeArray[i]);
}

5.3 Thêm Xử lý Lỗi

Khi kết hợp xử lý bất đồng bộ với câu lệnh for…of, hãy chắc chắn bao gồm xử lý lỗi thích hợp.

Ví dụ: Xử lý lỗi với try…catch

const urls = ['url1', 'url2', 'url3'];

async function fetchData() {
  for (const url of urls) {
    try {
      const response = await fetch(url);
      const data = await response.json();
      console.log(data);
    } catch (error) {
      console.error('An error occurred:', error);
    }
  }
}
fetchData();

6. Phần Câu hỏi Thường gặp

Câu hỏi 1: Câu lệnh for…of có hoạt động trên mọi trình duyệt không?

Đáp án 1:
Câu lệnh for…of được giới thiệu trong ES6 (ECMAScript 2015). Nó được hỗ trợ trên các trình duyệt hiện đại, nhưng không hoạt động trên Internet Explorer.

Trình duyệt được hỗ trợ:

• Google Chrome 38 hoặc mới hơn
• Firefox 36 hoặc mới hơn
• Safari 7.1 hoặc mới hơn
• Edge 12 hoặc mới hơn

Nếu bạn cần hỗ trợ các trình duyệt cũ hơn, hãy sử dụng Babel để chuyển đổi mã của bạn hoặc chọn một cú pháp vòng lặp khác.

Câu hỏi 2: Làm sao để lấy chỉ mục khi sử dụng for…of?

Đáp án 2:
Với for…of, bạn không thể truy cập trực tiếp vào chỉ mục, nhưng có thể dùng phương thức entries() để lấy cả chỉ mục và giá trị cùng một lúc.

Ví dụ:

const fruits = ['Apple', 'Banana', 'Orange'];
for (const [index, fruit] of fruits.entries()) {
  console.log(index, fruit);
}

Kết quả:

0 Apple  
1 Banana  
2 Orange

Câu hỏi 3: Tôi có thể sử dụng for…of với các literal đối tượng không?

Đáp án 3:
Không. Câu lệnh for…of chỉ dành cho các đối tượng có thể lặp. Các literal đối tượng không thể lặp, nhưng bạn có thể duyệt qua các khóa và giá trị bằng Object.entries().

Ví dụ:

const obj = { a: 1, b: 2 };
for (const [key, value] of Object.entries(obj)) {
  console.log(key, value);
}

Kết quả:

a 1  
b 2

Câu hỏi 4: Tôi có thể sử dụng for…of với các thao tác bất đồng bộ không?

Đáp án 4:
Có. Bạn có thể sử dụng nó cùng với async/await.

Ví dụ:

const urls = ['url1', 'url2', 'url3'];

async function fetchData() {
  for (const url of urls) {
    const response = await fetch(url);
    const data = await response.json();
    console.log(data);
  }
}
fetchData();

Câu hỏi 5: Sự khác biệt giữa for…of và forEach là gì?

Đáp án 5:
Bảng dưới đây tóm tắt các khác biệt.

7. Tóm tắt

Trong bài viết này, chúng tôi đã đề cập đến các điểm chính sau về câu lệnh for…of của JavaScript.

• Cách hiểu cú pháp cơ bản và các ví dụ sử dụng và áp dụng nó để lặp qua mảng và chuỗi
• Các khác biệt và trường hợp sử dụng tốt nhất so với các cú pháp vòng lặp khác như for…in và forEach
• Các ví dụ nâng cao bao gồm các đối tượng Map và Set, cũng như kết hợp nó với xử lý bất đồng bộ
• Một phần FAQ thực tế để giải đáp các câu hỏi thường gặp

7.1 Lợi ích của câu lệnh for…of

• Đơn giản và dễ đọc
• Hỗ trợ linh hoạt cho các đối tượng có thể lặp
• Dễ kiểm soát vòng lặp vì nó hỗ trợ break và continue

8. Những gì nên học tiếp

Khi bạn đã thành thạo câu lệnh for…of, việc học các tính năng sau đây sẽ là bước tiếp theo tốt.

1. Spread Syntax (…)

• Một tính năng hữu ích để mở rộng và hợp nhất mảng và đối tượng.

2. Destructuring Assignment

• Một kỹ thuật để dễ dàng trích xuất giá trị từ mảng và đối tượng.

3. Promises và async/await chi tiết hơn

• Học các cách hiệu quả để viết mã bất đồng bộ.

Kết hợp các tính năng này, bạn sẽ có thể xây dựng các chương trình JavaScript nâng cao hơn.

Kết luận

Bài viết này cung cấp hướng dẫn toàn diện về câu lệnh for…of của JavaScript, bao gồm mọi thứ từ cơ bản đến các trường hợp sử dụng thực tế cho phát triển thực tế.

Các hành động mẫu cho bước tiếp theo của bạn:

• Áp dụng câu lệnh for…of trong mã của bạn và thử nghiệm với nó.
• Thử xử lý mảng, Map và Set để nâng cao hiểu biết của bạn.
• Thách thức bản thân với các tính năng ES6 nâng cao hơn để nâng cấp kỹ năng của bạn.