Web Cơ Bản

Cách sử dụng vòng lặp for trong JavaScript

1) Vòng lặp là gì?

- Trong JavaScript, vòng lặp là một loại cú pháp giúp ta lặp lại việc thực thi một đoạn mã nhiều lần.

- Ví dụ, nếu tôi muốn hiển thị lên màn hình 1000 dòng chữ "Lập Trình Web" thì đáng ra phải gõ 1000 câu lệnh document.write("<p>Lập Trình Web</p>"). Tuy nhiên, với việc sử dụng vòng lặp thì chỉ cần đến ba câu lệnh như bên dưới là đủ.

for(var i=1; i<=1000; i++){
    document.write("<p>Lập Trình Web</p>");
}
Xem ví dụ

- Qua ví dụ trên, ta thấy "vòng lặp" giúp ta tiết kiệm được rất nhiều thời gian trong việc viết những đoạn mã cần thực thi nhiều lần liên tiếp.

- Trong JavaScript, vòng lặp được chia làm bốn loại:

  • (1) Vòng lặp for
  • (2) Vòng lặp for in
  • (3) Vòng lặp while
  • (4) Vòng lặp do while

- Ở bài hướng dẫn này, bạn sẽ được tìm hiểu về hai loại vòng lặp là forfor in

2) Cách sử dụng vòng lặp for trong JavaScript

- Vòng lặp for dùng để lặp lại việc thực thi một đoạn mã nào đó một số lần.

2.1) Cú pháp

for(biểu thức 1; biểu thức 2; biểu thức 3){
    //Đoạn mã mà bạn muốn được thực thi nhiều lần
}

- Trong đó:

  • Biểu thức 1 thường là một câu lệnh khai báo biến
  • (biến này được dùng để tham gia vào biểu thức 2)
  • Biểu thức 2 là một biểu thức điều kiện
  • (nếu điều kiện đúng thì đoạn mã sẽ được thực thi, nếu điều kiện sai thì vòng lặp kết thúc)
  • Biểu thức 3 thường là một biểu thức làm thay đổi giá trị của biến được khai báo trong biểu thức 1
  • (mục đích là để cho biểu thức điều kiện dần trở nên bị SAI, giúp vòng lặp được kết thúc)

- Dưới đây là sơ đồ minh họa cho nguyên lý hoạt động của vòng lặp for:

Bắt đầu
Kiểm tra
Khai báo một biến dùng để tham gia vào biểu thức điều kiện
(Biểu thức 1)
ĐIỀU KIỆN
(Biểu thức 2)
Đoạn mã mà bạn muốn thực thi được thực thi
Thay đổi giá trị biến điều kiện
(Biểu thức 3)
Vòng lặp kết thúc
ĐÚNG
SAI
Tiếp tục quay lại kiểm tra điều kiện

2.2) Ví dụ thứ nhất

- Sử dụng vòng lặp for để hiển thị ba câu "Lập Trình Web" lên màn hình.

for(var i=1; i<=3; i++){
    document.write("<p>Lập Trình Web</p>");
}
Xem ví dụ

- Dưới đây là phần mô tả các bước thực thi của vòng lặp trên:

  • Lần thứ nhất
    • Khai báo biến i với giá trị là 1.
    • Kiểm tra xem điều kiện i <= 3 có đúng hay không.
    • (Kết quả đúng nên đoạn mã nằm trong cặp dấu {} được thực thi)
    • Giá trị của biến i được tăng thêm một (tức bây giờ giá trị của biến i sẽ là 2)
  • Lần thứ hai
    • Kiểm tra xem điều kiện i <= 3 có đúng hay không.
    • (Kết quả đúng nên đoạn mã nằm trong cặp dấu {} được thực thi)
    • Giá trị của biến i được tăng thêm một (tức bây giờ giá trị của biến i sẽ là 3)
  • Lần thứ ba
    • Kiểm tra xem điều kiện i <= 3 có đúng hay không.
    • (Kết quả đúng nên đoạn mã nằm trong cặp dấu {} được thực thi)
    • Giá trị của biến i được tăng thêm một (tức bây giờ giá trị của biến i sẽ là 4)
  • Lần thứ tư
    • Kiểm tra xem điều kiện i <= 3 có đúng hay không.
    • (Kết quả là SAI vì 4 không nhỏ hơn hoặc bằng 3)
      ==> VÒNG LẶP KẾT THÚC

2.3) Ví dụ thứ hai

- Sử dụng vòng lặp for để hiển thị một dãy số tăng dần từ 1 đến 10.

for(var i=0; i<10; i++){
    var j = i + 1;
    document.write("Số: " + j + "<br>");
}
Xem ví dụ

- Dưới đây là phần mô tả các bước thực thi của vòng lặp trên:

  • Lần thứ nhất
    • Khai báo biến i với giá trị là 0.
    • Kiểm tra xem điều kiện i < 10 có đúng hay không.
    • (Kết quả đúng nên đoạn mã nằm trong cặp dấu {} được thực thi)
    • Giá trị của biến i được tăng thêm một (tức bây giờ giá trị của biến i sẽ là 1)
  • Lần thứ hai
    • Kiểm tra xem điều kiện i < 10 có đúng hay không.
    • (Kết quả đúng nên đoạn mã nằm trong cặp dấu {} được thực thi)
    • Giá trị của biến i được tăng thêm một (tức bây giờ giá trị của biến i sẽ là 2)
  • ....
  • ....
  • ....
  • ....
  • ....
  • ....
  • ....
  • Lần thứ mười
    • Kiểm tra xem điều kiện i < 10 có đúng hay không.
    • (Kết quả đúng nên đoạn mã nằm trong cặp dấu {} được thực thi)
    • Giá trị của biến i được tăng thêm một (tức bây giờ giá trị của biến i sẽ là 10)
  • Lần thứ mười một
    • Kiểm tra xem điều kiện i < 10 có đúng hay không.
    • (Kết quả là SAI vì 10 không nhỏ hơn 10)
      ==> VÒNG LẶP KẾT THÚC

2.4) Ví dụ thứ ba

- Sử dụng vòng lặp for để hiển thị một dãy số giảm dần từ 9 xuống 2.

for(var i=9; i>1; i--){
    document.write("Số: " + i + "<br>");
}
Xem ví dụ

- Dưới đây là phần mô tả các bước thực thi của vòng lặp trên:

  • Lần thứ nhất
    • Khai báo biến i với giá trị là 9.
    • Kiểm tra xem điều kiện i > 1 có đúng hay không.
    • (Kết quả đúng nên đoạn mã nằm trong cặp dấu {} được thực thi)
    • Giá trị của biến i bị giảm đi một (tức bây giờ giá trị của biến i sẽ là 8)
  • Lần thứ hai
    • Kiểm tra xem điều kiện i > 1 có đúng hay không.
    • (Kết quả đúng nên đoạn mã nằm trong cặp dấu {} được thực thi)
    • Giá trị của biến i bị giảm đi một (tức bây giờ giá trị của biến i sẽ là 7)
  • ....
  • ....
  • ....
  • ....
  • ....
  • Lần thứ tám
    • Kiểm tra xem điều kiện i > 1 có đúng hay không.
    • (Kết quả đúng nên đoạn mã nằm trong cặp dấu {} được thực thi)
    • Giá trị của biến i bị giảm đi một (tức bây giờ giá trị của biến i sẽ là 1)
  • Lần thứ chín
    • Kiểm tra xem điều kiện i > 1 có đúng hay không.
    • (Kết quả là SAI vì 1 không lớn hơn 1)
      ==> VÒNG LẶP KẾT THÚC

2.5) Một số điều cần lưu ý

LƯU Ý THỨ NHẤT

- Trong biểu thức 1 của ví dụ thứ nhất, biến i được khai báo với giá trị là 1 nhưng còn ở ví dụ thứ hai thì biến i được khai báo với giá trị là 0.

- Trong biểu thức 2 của ví dụ thứ nhất, biểu thức điều kiện ta dùng phép so sánh <= nhưng còn ở ví dụ thứ hai thì ta dùng phép so sánh <

- Trong biểu thức 3 của ví dụ thứ nhất và thứ hai thì ta tăng giá trị của biến thêm một, còn ở ví dụ thứ ba thì ta giảm giá trị của biến đi một.

==> Bạn đừng gò bó vào khuôn khổ việc biến được khai báo là mấy, biểu thức điều kiện là gì, ....

==> Cái mà bạn cần quan tâm chính là thiết kế ra một mô hình giúp cho vòng lặp có thể hoạt động đúng theo số lần mong muốn.

- Ví dụ, năm đoạn mã bên dưới có cách viết khác nhau, tuy nhiên chúng có cùng một chức năng là hiển thị bảy câu "Lập Trình Web" lên màn hình

for(var i = 0; i < 7; i++){
    document.write("<p>Lập Trình Web</p>");
}
for(var i = 1; i <= 7; i++){
    document.write("<p>Lập Trình Web</p>");
}
for(var i = 5; i < 12; i++){
    document.write("<p>Lập Trình Web</p>");
}
for(var i = 9; i > 2; i--){
    document.write("<p>Lập Trình Web</p>");
}
for(var i = 0; i < 13; i = i + 2){
    document.write("<p>Lập Trình Web</p>");
}

LƯU Ý THỨ HAI

- Biểu thức 1 thường là câu lệnh khai báo biến để tham gia vào biểu thức điều kiện.

- Tuy nhiên, nếu biến dùng để tham gia vào biểu thức điều kiện đã được khai báo và gán giá trị trước đó rồi thì biểu thức 1 ta có thể bỏ trống.

- Ví dụ:

var i = 0;
for(; i < 7; i++){
    document.write("<p>Lập Trình Web</p>");
}

- Còn nếu biến dùng để tham gia vào biểu thức điều kiện đã được khai báo trước đó nhưng chưa được gán giá trị thì trong biểu thức 1 ta chỉ cần gán giá trị cho biến (không cần dùng đến từ khóa var)

- Ví dụ:

var i;
for(i = 0; i < 7; i++){
    document.write("<p>Lập Trình Web</p>");
}

LƯU Ý THỨ BA

- Biểu thức 3 trong vòng lặp for rất quan trọng, nó khiến điều kiện của vòng lặp dần dần trở thành bị SAI để giúp cho vòng lặp được kết thúc (Nếu một vòng lặp mà điều kiện luôn luôn đúng thì vòng lặp đó sẽ không bao giờ kết thúc và dẫn đến trường hợp chương trình bị lỗi)

- Tuy nhiên, nếu trong đoạn mã được thực thi có chứa câu lệnh làm thay đổi giá trị của biến điều kiện thì biểu thức 3 ta có thể bỏ trống.

- Ví dụ:

for(var i = 0; i < 7;){
    document.write("<p>Lập Trình Web</p>");
    i++;
}

LƯU Ý THỨ TƯ

- Trong phần LƯU Ý THỨ HAI & LƯU Ý THỨ BA tôi đã giới thiệu về trường hợp mà biểu thức 1biểu thức 3 có thể bỏ trống, tuy nhiên đó là một số trường hợp đặc biệt. Về mặt viết mã lệnh tốt thì bạn không nên bỏ trống biểu thức như thế, bạn cần phải xây dựng đoạn mã như thế nào để cho cả ba biểu thức đều phải có mặt đầy đủ.

2.6) Vòng lặp for lồng nhau

- Thực chất vòng lặp for lồng nhau chỉ là cách sử dụng nâng cao của vòng lặp for thông thường để giúp cho số lần lặp được tăng theo cấp số nhân.

- Vòng lặp con được đặt vào bên trong vòng lặp cha. Khi điều kiện của vòng lặp cha đúng thì vòng lặp con sẽ được thực thi.

- Dưới đây là cú pháp cơ bản của một vòng lặp for lồng nhau:

for(biểu thức 1; biểu thức 2; biểu thức 3){
    for(biểu thức 1; biểu thức 2; biểu thức 3){
        //Đoạn mã mà bạn muốn được thực thi nhiều lần
    }
}

- Lưu ý: Bên trong vòng lặp cha, ngoài vòng lặp con thì nó còn có thể chứa thêm các mã lệnh khác.

Ví dụ 1:

- Hiển thị dãy số từ 1 đến 50 (bằng cách sử dụng vòng lặp for lồng nhau)


<script>

    var number = 1;

    for(i = 0; i < 10; i++){
        for(j = 0; j < 5; j++){
            document.write(number + " ");
            number++;
        }
    }

</script>
Xem ví dụ
Ví dụ 2:

- Hiển thị ba dòng dãy số 1 2 3 4 5 6 7 8 9


<script>
    for(i = 1; i < 4; i++){
        var text = "";
        for(j = 1; j < 10; j++){
            text = text + j + " ";
        }
        document.write(text + "<br>");
    }
</script>
Xem ví dụ
Ví dụ 3:

- Hiển thị một ma trận ô vuông giống hình bên dưới:


<style>
    .square{
        height:20px;
        width:20px;
        float:left;
        border:1px solid gray;
        margin-left:5px;
        margin-bottom:5px;
    }
</style>

<script>
    for(var i = 0; i < 5; i++){
        for(var j = 0; j < 10; j++){
            document.write("<div class='square'></div>");
        }
        document.write("<div style='clear:both'></div>");
    }
</script>
Xem ví dụ

2.7) Lệnh break

- Lệnh break thường được đặt vào bên trong vòng lặp for.

- Khi lệnh break được thực thi, vòng lặp sẽ kết thúc mặc cho điều kiện của vòng lặp có còn đúng hay không.

Ví dụ:

- Lặp lại 10 lần việc hiển thị giá trị của biến number.

- Sau mỗi lần hiển thị cho giá trị của biến number tăng thêm một.

- Tuy nhiên, đến khi giá trị của biến number được tăng lên thành 5 thì kết thúc vòng lặp.


<script>
    var number = 1;
    for(var i = 1; i <= 10;i++){
        document.write(number + "<hr>");
        number++;
        if(number==5){
            break;
        }
    }
</script>
Xem ví dụ

2.8) Lệnh continue

- Lệnh continue thường được đặt vào bên trong vòng lặp for.

- Khi lệnh continue được thực thi, những câu lệnh còn lại của lần lặp hiện tại sẽ bị bỏ qua.

Ví dụ:

- Hiển thị dãy số từ một đến mười (ngoại trừ các số 2, 5, 9)


<script>
    for(var i = 1; i <= 10;i++){
        if(i==2 || i==5 || i==9){
            continue;
        }
        document.write(i + "<br>");
    }
</script>
Xem ví dụ

2.9) Lặp qua một lần các phần tử của mảng

- Ta có thể sử dụng vòng lặp for để lặp qua một lần các phần tử trong mảng.

Ví dụ:

<script>
    var mobile = ["HTC","Nokia","SamSung","LG","Apple","Lenovo"];
    for(var i = 0; i < mobile.length; i++){
        document.write(mobile[i] + "<br>");
    }
</script>
Xem ví dụ

3) Cách sử dụng vòng lặp for in trong JavaScript

- Vòng lặp for in dùng để lặp qua một lần các thuộc tính của một đối tượng.

Ví dụ:

<script>

    var SinhVien = {
        name:"Nguyễn Thành Nhân",
        year:1993,
        gender:"Nam",
        hometown:"Cần Thơ"
    }

    for(x in SinhVien){
        document.write(SinhVien[x]);
        document.write("<hr>");
    }

</script>
Xem ví dụ