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>");
}

– 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à for và for 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ểu thức 2 là một biểu thức điều kiện

• • 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

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

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>");
}

– 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.

• • • 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.

• • • 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.

• • • 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.

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>");
}

– 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.

• • • 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.

• • • 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.

• • • 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.

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>");
}

– 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.

• • • 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.

• • • 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.

• • • 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.

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

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>");
}

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

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

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

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.

<script>

    var number = 1;

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

</script>

<script>
    for(i = 1; i < 4; i++){
        var text = "";
        for(j = 1; j < 10; j++){
            text = text + j + " ";
        }
        document.write(text + "<br>");
    }
</script>

<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.

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

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.

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

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.

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

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.

<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>