Vòng lặp for of trong javascript

Vòng lặp dùng để thực thi một hành động lặp đi lặp lại. Bên cạnh đó, các bài toán từ đơn giản đến phức tạp, không bài nào là không bắt gặp vòng lặp. Nó xuất hiện ở mọi bài toán, mọi vấn đề. Trong bài viết này, mình sẽ đào sâu vào vòng lặp for trong Javascript.

Cũng như những ngôn ngữ lập trình khác, Javascript có rất nhiều cấu trúc lặp khác nhau while, for, do...while,... Tuy nhiên, trong Javascript có cung cấp cho chúng ta 2 cấu trúc lặp rất đặc biệt, có cú pháp ngắn gọn và dễ sử dụng. Đó chính là for...of và for...in.

Trước hết, chúng ta cùng xem lại cấu trúc của vòng lặp for và cách sử dụng của nó.

1. Vòng lặp for

Cú pháp

Vòng lặp for of trong javascript

let i = 0 : khởi tạo biến cho vòng lặp

i < 10 : điều kiện để vòng lặp thực hiện

i++ : tăng giá trị biến chạy lên 1 mỗi khi thực hiện xong hành động

Bạn có thể bỏ trống giá trị ban đầu trong cú pháp của vòng lặp for nếu trước đó đã gán giá trị của biến chạy

Vòng lặp for of trong javascript

Bạn cũng có thể bỏ trống giá trị thứ hai trong cú pháp của vòng lặp for. Lúc này, nếu giá trị thứ hai trả về giá trị true thì vòng lặp tiếp tục thực thi, nếu là false thì vòng lặp sẽ dừng lại.

Vòng lặp for of trong javascript

Nếu bỏ trống giá trị thứ hai thì bắt buộc trong vòng lặp phải có lệnh break, nếu không thì vòng lặp sẽ chạy mãi không dừng lại.

Giá trị thứ ba trong cú pháp vòng lặp for cũng không thực sự cần thiết nếu như bạn thay đổi giá trị của biến chạy trong vòng lặp.

Vòng lặp for of trong javascript

Tuy nhiên, việc bỏ trống các giá trị trong cú pháp của vòng lặp for không nên. Dù ngắn gọn nhưng nếu dùng không đúng lúc sẽ khiến code của chúng ta khó đọc lại.

Ví dụ

Vòng lặp for of trong javascript

Kết quả in ra

Vòng lặp for of trong javascript

Đoạn code trên là ví dụ của vòng lặp for trong Javascript, rất dễ sử dụng phải không nào. Nhưng cú pháp này khá dài, liệu có cách nào rút gọn hơn không ?

Câu trả lời là có. Như ở đầu bài mình có đề cập, chúng ta sẽ sử dụng for...of và for...in

2. Vòng lặp for...of

Vòng lặp này được ra mắt ở phiên bản ES6. Tương tự như for, vòng lặp này được sử dụng để duyệt từng phần tử của đối tượng duyệt. Số lượng lặp bằng với số phần tử của đối tượng.

Cú pháp

Vòng lặp for of trong javascript

let student: khai báo biến chạy

students: một Array, String, Map, WeakMap, Set (không có Object)

Ví dụ

Giờ chúng ta sẽ thử vòng lặp for...of với ví dụ ở trên.

Vòng lặp for of trong javascript

Kết quả

Vòng lặp for of trong javascript

Và kết quả cũng giống như chúng ta sử dụng vòng lặp for nhưng có thể thấy cú pháp của for...of tường minh, dễ hiểu hơn là for.

Tuy nhiên for...of không duyệt theo kiểu giảm dần giống như trong for được.

3. Vòng lặp for...in

Vòng lặp này thường được sử dụng với mục đích là lặp trong một object chứ không phải trong array hay string giống như hai vòng lặp trên. Số lượng lặp tương ứng với số thuộc tính của object mà ta duyệt.

Cú pháp

Vòng lặp for of trong javascript

let key: khai báo biến chạy

obj: đối tượng duyệt (thường là object)

Ví dụ

Vòng lặp for of trong javascript

Kết quả

Vòng lặp for of trong javascript

Kết quả in ra là những thuộc tính của object

for...in cũng có thể dùng với array, lúc này các thuộc tính của mỗi phần từ trong array chính là index.

Vòng lặp for of trong javascript

Kết quả

Vòng lặp for of trong javascript

4. Lời khuyên

Đối với những người mới lập trình thì nên sử dụng vòng lặp for bình thường vì các biến chạy, điều kiện, tăng giảm biến chạy đều thực hiện trên cùng một dòng, do đó dễ dàng sửa lỗi.

  • Không nên bỏ trống các giá trị trong cú pháp của vòng lặp for.
  • Chỉ nên sử dụng vòng lặp for...in khi cần lặp qua object, không nên sử dụng với array.
  • Vòng lặp for...of không dùng được với object.

Với những người đã quen với vòng lặp for thì nên sử dụng linh hoạt hai vòng lặp for...of  và for...in, vì có thể sử dụng trong nhiều trường hợp và khiến cho code của chúng ta dễ đọc hơn. Bên cạnh đó, khi thao tác với kiểu dữ liệu JSONthì 2 vòng lặp này có thể duyệt dễ dàng.

Tạm kết

Trên đây là những kiến thức của mình với vòng lặp for trong Javascript. Hi vọng sẽ có ích với các bạn. Đừng ngần ngại để lại ý kiến đóng góp ở phần bình luận để kiến thức được hoàn chỉnh và sâu hơn nữa nhé các bạn. Cảm ơn các bạn.