Vòng lặp có vai trò rất quan trọng và vô cùng tiện dụng cho việc chạy đi chạy lại cùng một mã, mỗi lần với một giá trị khác nhau.

Vòng lặp for

Ta cùng xem qua ví dụ sau:

Thay vì viết:

text += fruits[0] + "<br>";
text += fruits[1] + "<br>";
text += fruits[2] + "<br>";
text += fruits[3] + "<br>";
text += fruits[4] + "<br>";
text += fruits[5] + "<br>";

Ta có thể viết ngắn gọn như sau:

for (let i = 0; i < fruits.length; i++) {
  text += fruits[i] + "<br>";
}

Ta dùng vòng lặp for để thực thi thay vì phải viết từng câu lệnh như đoạn mã đầu tiên, chưa kể số lượng phần tử trong fruits lên tới hàng trăm hoặc hàng nghìn hay lớn hơn ta chắc chắn không thể thực hiện được. Vòng lặp for sẽ giúp bài toán của chúng ta đơn giản hơn rất nhiều.

Syntax

for (statement1; statement2; statement3) {
  // code block to be executed
}

• statement1: Câu lệnh 1 được thực hiện (một lần) trước khi khối mã thực thi.
• statement2: Câu lệnh 2 xác định điều kiện để thực thi khối mã.
• statement3: Câu lệnh 3 được thực hiện (mọi lúc) sau khi khối mã đã được thực hiện.

Ví dụ:

for (let i = 0; i < 5; i++) {
  text += "The number is " + i + "<br>";
}

Giải thích:

• Câu lệnh 1 đặt một biến trước khi vòng lặp bắt đầu (cho i = 0).
• Câu lệnh 2 xác định điều kiện để chạy vòng lặp (i phải nhỏ hơn 5).
• Câu lệnh 3 tăng một giá trị (i ++) mỗi khi khối mã trong vòng lặp được thực thi.

Loop Scope

Using var:

var i = 3;

for (var i = 0; i < 10; i++) {
  // some code
}

// Here i is 10

using let:

let i = 3;

for (let i = 0; i < 10; i++) {
  // some code
}

// Here i is 3

Ẩn các câu lệnh

Trong Javascript, ta có thể ẩn đi các câu lệnh trong vòng lặp for. Chúng đều là optional.

Ví dụ 1: Ẩn câu lệnh 1 (điều kiện là các biến sử dụng trong vòng lặp phải được khai báo trước)

let i = 2;
let leng = fruits.length;
let text = "";
for (; i < len; i++) {
  text += fruits[i] + "<br>";
}

Ví dụ 2: Ẩn câu lệnh 2.
Nhớ rằng: Nếu câu lệnh 2 trả về true, vòng lặp sẽ bắt đầu lại, nếu nó trả về false, vòng lặp sẽ kết thúc. Nếu không đặt điều kiện thì hãy đặt break bên trong, nếu không sẽ dẫn tới vòng lặp vô hạn và gây ra crash trên trình duyệt!

for (let i = 0;; i++) {
  console.log(i);
  if(i === 5) break; // Must have break!!!
}

Ví dụ 3: Ẩn câu lệnh 3.

Câu lệnh này cũng là optional, nếu bỏ đi câu lệnh 3, hãy đặt nó xuống cuối cùng của for block!

let i = 0;
let len = fruits.length;
let text = "";
for (; i < len; ) {
  text += fruits[i] + "<br>";
  i++;
}

Hẹn gặp lại các bạn trong các bài viết tiếp theo!