Kiểm soát luồng trong JavaScript: Vòng lặp for và while

Bài viết trước đã đề cập đến các câu lệnh điều kiện if và switch trong JavaScript. Trong bài viết này, chúng ta sẽ tìm hiểu về các câu lệnh vòng lặp trong JavaScript, chủ yếu là vòng lặp for và vòng lặp while.

Vòng lặp for

Vòng lặp for trong JavaScript được chia thành nhiều loại: vòng lặp for đơn giản, vòng lặp for...in, và vòng lặp for...of. Trong đó, vòng lặp for...of là tính năng mới được thêm vào trong ES6 và chúng ta sẽ thảo luận về nó trong bài viết về ES6. Bài này sẽ tập trung vào vòng lặp for đơn giản và vòng lặp for...in.

1. Vòng lặp for đơn giản

Vòng lặp cho phép thực thi một khối mã số lần xác định.

// Cú pháp:
// for (câu lệnh 1; câu lệnh 2; câu lệnh 3) {
//    câu lệnh 4;
// }
// Câu lệnh 1: Khởi tạo một giá trị
// Câu lệnh 2: Điều kiện kiểm tra
// Câu lệnh 3: Tăng (++) hoặc giảm (--)
// Câu lệnh 4: Mã cần thực thi lặp lại

// Nếu chúng ta muốn chạy cùng một đoạn mã nhiều lần với các giá trị khác nhau, ví dụ:
console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);
console.log(6);
console.log(7);

// Chúng ta có thể sử dụng vòng lặp:
for (var counter = 1; counter < 8; counter++) {
    console.log(counter);
}
// Chỉ với ba dòng mã, vòng lặp for có thể thực hiện được công việc của đoạn mã trên

Lưu ý: Thứ tự thực thi mã trong vòng lặp for là: câu lệnh 1, sau đó câu lệnh 2, câu lệnh 4, và cuối cùng là câu lệnh 3. Đồng thời cần biết rằng, câu lệnh 1 và câu lệnh 2 trong vòng lặp for chủ yếu được sử dụng để xác định số lần lặp.

Biểu thức dấu phẩy

Biểu thức dấu phẩy có thể được sử dụng trong điều kiện kiểm tra. Đơn giản là khi có nhiều điều kiện trong kiểm tra, chỉ điều kiện cuối cùng có hiệu lực.

for (var x = 0, y = 0; x < 10, y < 20; x++, y++) {
    console.log(x + y); // 38
}

if (10 > 5, 10 < 5) {
    console.log(true);
} else {
    console.log(false);
}
// In ra false

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

Vòng lặp for...in trong JavaScript được sử dụng để duyệt qua các thuộc tính của đối tượng (hoặc mảng).

var person = {
    name: "Nguyễn Văn A",
    age: 30,
    occupation: "Lập trình viên"
};
console.log(person.name); // Nguyễn Văn A
console.log(person["name"]); // Nguyễn Văn A

for (key in person) {
    console.log(key); // key (tên thuộc tính)
    // name age occupation
    
    console.log(key + ": " + person[key]);
    // name: Nguyễn Văn A age: 30 occupation: Lập trình viên
}

var numbers = [10, 20, 30, 40, 50];
for (index in numbers) {
    console.log(numbers[index]); // 10 20 30 40 50
}

Vòng lặp while

Câu lệnh vòng lặp while có chức năng tương tự như vòng lặp for. Cả hai đều chứa điều kiện kiểm tra và khối mã thực thi khi điều kiện đúng.

1. Vòng lặp while đơn giản

// Cú pháp:
// Khởi tạo giá trị ban đầu
// while (điều kiện) {
//     // Mã thực thi (tương tự như câu lệnh 4 trong for)
//     // Tăng/giá trị (tương tự như câu lệnh 3 trong for)
// }

var counter = 0;
while (counter < 10) {
    console.log(counter);
    counter++;
}
// In ra 0 1 2 3 4 5 6 7 8 9 trong console của trình duyệt

2. Vòng lặp do...while

// Cú pháp:
// do {
//     // Mã thực thi
// } while (điều kiện)

var counter = 0;
do {
    console.log(counter);
    counter++;
} while (counter < 10);
// In ra 0 1 2 3 4 5 6 7 8 9 trong console của trình duyệt

Sự khác biệt giữa vòng lặp while và do...while là vòng lặp while kiểm tra điều kiện trước khi thực thi, trong khi vòng lặp do...while thực thi mã trước rồi mới kiểm tra điều kiện.

Sự khác biệt giữa vòng lặp for và while

Khi số lần lặp đã được xác định trước, việc sử dụng vòng lặp for hay while không có nhiều khác biệt. Tuy nhiên, khi số lần lặp không xác định, việc sử dụng vòng lặp while thường thuận tiện và dễ hiểu hơn.