BÀI 9: CẤU TRÚC ĐIỀU KHIỂN LẶP

Trong bài học này tôi sẽ giới thiệu cho các bạn cách sử dụng cấu trúc điều khiển lặp trong lập trình JavaScript.

Cấu trúc điều khiển lặp trong JavaScript giúp chúng ta thực hiện một khối lệnh nhiều lần dựa trên điều kiện nhất định. Các vòng lặp giúp tiết kiệm thời gian và tối ưu hóa mã nguồn.

CẤU TRÚC LẶP DÙNG ĐỂ LÀM GÌ?

Cấu trúc lặp dùng để mô tả những thuật toán cần phải thực hiện lặp lại nhiều lần giống nhau.


1. Vòng lặp for

Cấu trúc lệnh lặp for dùng để mô tả thuật toán có số lần lặp giới hạn (biết trước số lần lặp)

Cấu trúc lệnh:


for( <biến đếm>; <biểu thức điều kiện>; toán tử tăng/giảm biến đếm)

{

  Thuật toán;

}


Sơ đồ thuật toán mô tả cấu trúc vòng lặp For

Ví dụ: In ra màn  hình dãy số từ 0 đến 10

for (let i = 0; i <=10; i++)

{

document.write(i+"  ");

}

 

2. Vòng lặp while

Cấu trúc lệnh while thường dùng để mô tả thuật toán có số lần lặp vô hạn lần (Chưa xác định được số lần lặp)

Cấu trúc lệnh while


while (biểu thức điều kiện)

{

  thuật toán;

}

Vòng lặp While lặp lại thuật toán khi biểu thức điều kiện còn đúng, nếu biểu thức điều kiện sai thuật toán sẽ dừng và thoát khỏi vòng lặp.

Sơ đồ thuật toán được mô tả như sau:

Ví dụ: Sử dụng cấu trúc lặp While, in ra màn hình dãy số từ 0 đến 10: Sơ đồ thuật toán được biểu diễn như sau:

Code chương trình:

let i=0;

while (i<=10)

{

   document.write (i + ” ”);

   i+=1;

} Kết quả in ra màn hình có dạng 0 1 2 3 4 5 6 7 8 9 10

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

Cấu trúc lệnh do …while thường dùng để mô tả thuật toán có số lần lặp vô hạn lần (Chưa xác định được số lần lặp). Nó lặp ít nhất một lần, sau đó tiếp tục nếu điều kiện đúng.

 Cấu trúc lệnh   do...while


do

{

  thuật toán;

} while(biểu thức điều kiện);

Sơ đồ thuật toán biểu diễn cấu trúc lặp do while được mô tả như sau:

Vòng lặp Do while sẽ thực hiện thuật toán sau đó kiểm tra điều kiện, nếu điều kiện còn thỏa mãn thì tiếp tục thực hiện thuật toán, nếu thấy điều kiện sai thì dừng thực hiện thuật toán và kết thúc vòng lặp. Ví dụ: Sử dụng cấu trúc lặp do while để in ra màn hình dãy số từ 0 đến 10 Sơ đồ thuật toán được biểu diễn như sau:


Code chương trình:


let  i=0;

do

{

   document.write(i+” ”);

   i+=1;

 

} while(i<=10);


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

Dùng để duyệt qua các thuộc tính của đối tượng.

a) Cấu trúc vòng lặp for...in

let person = { name: "John", age: 30, city: "Hanoi" };
for (let key in person) {
    console.log(key + ": " + person[key]);
}

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

Dùng để duyệt qua các phần tử của mảng hoặc chuỗi.

a) Cấu trúc vòng lặp for...of

let numbers = [10, 20, 30, 40];
for (let num of numbers) {
    console.log(num);
}

6. Dừng vòng lặp với break

Dừng vòng lặp ngay khi gặp điều kiện.

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

7. Bỏ qua lần lặp với continue

Bỏ qua lần lặp hiện tại và tiếp tục vòng lặp tiếp theo.

for (let i = 0; i < 10; i++) {
    if (i % 2 === 0) {
        continue;
    }
    console.log(i);
}

8. Kết luận

Cấu trúc vòng lặp trong JavaScript giúp tối ưu hóa mã và thực hiện các tác vụ lặp đi lặp lại một cách hiệu quả. Hiểu và sử dụng thành thạo vòng lặp sẽ giúp bạn viết mã JavaScript gọn gàng và mạnh mẽ hơn.

Để trở thành một lập trình viên chuyên nghiệp, các bạn không thể bỏ qua bài học quan trọng này. Bạn có thể xem video bài học trên kênh Youtube "Yêu lập trình" để tìm hiểu chi tiết hơn về nội dung bài học.

BÀI THỰC HÀNH

Bài 1: Viết chương trình in ra màn hình bảng cửu chương từ bảng 1 đến 9, theo mẫu sau:

Code chương trình JavaScript để in ra bảng cửu chương theo mẫu trên

Trong chương trình này tôi sẽ dùng thẻ <table> để thực hiện in.