Javascript Basic | Vòng lặp trong JavaScript

Xem thêm

Lập Trình JavaScript Cơ Bản | Basic JavaScript programming

Trong JavaScript, vòng lặp được sử dụng để lặp qua một tập hợp các dòng mã hoặc thực hiện một khối mã nhiều lần cho đến khi điều kiện lặp không còn đúng. Dưới đây là một số loại vòng lặp phổ biến trong JavaScript:

1. Vòng lặp for

Vòng lặp for là vòng lặp được sử dụng lặp lại một nhiệm vụ nhất định với số lần lặp cho trước.

Để hiểu cách hoạt động của vòng lặp for ta có sơ đồ sau:

Sơ đồ hoạt động của vòng lặp for trong JavaScript

Như bạn thấy, khi bắt đầu thì ta sẽ khởi tạo biến lặp cho biết số lần lặp chính xác luôn.

Cú pháp của vòng lặp for như sau:

for (khoiTaoBienLap; bieuThucDieuKien; capNhatBienLap) {
    // Các câu lệnh thực thi này sẽ được lặp lại
}

Trong đó:

• for: Là từ khóa

• khoiTaoBienLap: Là khởi tạo một biến để đếm số lần lặp

• bieuThucDieuKien: Là biểu thức kiểm tra số lần lặp (giới hạn)

• capNhatBienLap: Là biểu thức cập nhật biến lặp để đếm số lần lặp

Vòng lặp for là cách phổ biến để lặp qua một dãy số cố định.

Ví dụ:

for (let i = 0; i < 5; i++) {
    console.log(i);
}

//kết quả
0
1
2
3
4

2. Vòng lặp while

Vòng lặp while thường được sử dụng để lặp đi lặp lại một khối lập mà không biết trước số lần lặp. Sơ đồ dưới đây mô tả hoạt động của vòng lặp while:

Sơ đồ hoạt động của vòng lặp while trong JavaScript

Như bạn thấy trong sơ đồ, khi bắt đầu chương trình, vòng lặp while sẽ kiểm tra điều kiện trước.

• Nếu đúng thì thực thi khối lệnh.

• Nếu sai thì thoát khỏi vòng lặp

Cú pháp:

while (bieuThucDieuKien) {
    // Các câu lệnh thực thi nếu điều kiện đúng
}

Trong đó:

• while: Là từ khóa

• bieuThucDieuKien: Là biểu thức kiểm tra điều kiện

Vòng lặp while lặp qua một khối mã khi điều kiện là true.

let i = 0;
while (i < 5) {
    console.log(i);
    i++;
}

//kết quả
0
1
2
3
4

• let i = 0;: Khởi tạo biến i với giá trị 0.
• while (i < 5) {: Bắt đầu vòng lặp, kiểm tra điều kiện i < 5.
• console.log(i);: In giá trị của i ra console.
• i++;: Tăng giá trị của i lên 1 sau mỗi vòng lặp.
• Nếu i < 5 là true, vòng lặp tiếp tục; nếu không, thoát khỏi vòng lặp.

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

Vòng lặp do...while tương tự như vòng lặp while, nhưng nó đảm bảo rằng khối mã sẽ thực thi ít nhất một lần trước khi kiểm tra điều kiện.

Sơ đồ hoạt động của vòng lặp do while trong JavaScript

Cú pháp:

do {
    // Các câu lệnh cần thực thi
} while (bieuThucDieuKien);

Trong đó:

• do ... while: là từ khóa

• bieuThucDieuKien: Là biểu thức kiểm soát vòng lặp

Ví dụ:

let i = 0;
do {
    console.log(i);
    i++;
} while (i < 5);

//kết quả
0
1
2
3
4
5

• let i = 0;: Khởi tạo biến i với giá trị 0.
• do {: Bắt đầu khối mã của vòng lặp do...while.
• console.log(i);: In giá trị của i ra console.
• i++;: Tăng giá trị của i lên 1 sau mỗi vòng lặp.
• } while (i < 5);: Kiểm tra điều kiện i < 5. Nếu là true, tiếp tục vòng lặp; nếu không, thoát khỏi vòng lặp.

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

Vòng lặp for...of được sử dụng để lặp qua các phần tử của một mảng hoặc các giá trị có thể lặp qua.

const arr = [1, 2, 3, 4, 5];
for (const element of arr) {
    console.log(element);
}

//kết quả
1
2
3
4
5

• const arr = [1, 2, 3, 4, 5];: Khởi tạo một mảng.
• for (const element of arr) {: Bắt đầu vòng lặp for...of, lặp qua các phần tử của mảng.
• console.log(element);: In giá trị của từng phần tử ra console.
• Nếu có nhiều phần tử trong mảng, vòng lặp sẽ tiếp tục cho đến khi đã lặp qua tất cả các phần tử.

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

Vòng lặp for...in được sử dụng để lặp qua các thuộc tính của một đối tượng.

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

//kết quả
a 1
b 2
c 3

• const obj = { a: 1, b: 2, c: 3 };: Khởi tạo một đối tượng.
• for (const key in obj) {: Bắt đầu vòng lặp for...in, lặp qua các thuộc tính của đối tượng.
• console.log(key, obj[key]);: In tên thuộc tính và giá trị tương ứng ra console.
• Vòng lặp sẽ tiếp tục cho đến khi đã lặp qua tất cả các thuộc tính của đối tượng.

Nhớ kiểm tra điều kiện dừng và cập nhật biến điều khiển trong các vòng lặp để tránh vòng lặp vô hạn.