Bài 06: Vòng lặp for trong javascript

Vòng lặp for trong javascript thường dùng để lặp một mảng hoặc một khoảng (min max) nào đó nhằm mục đích xử lý giải quyết vấn đề cho bài toán, vì ta đang học căn bản nên trong bài này mình chỉ làm những bài tập đơn giản liên quan đến mảng trong javascript thôi nhé. Trước tiền ta tìm hiểu cấu trúc của nó rồi đi vào vấn đề chính sau:

var i = 0;
for (i = 0; i < 100; i++){
    // Dòng lệnh xử lý vòng lặp
}

Trong đó:

• var i = 0; là khai báo biến điều khiển vòng lặp i
• (i = 0) là điểm bắt đầu lặp (lặp từ 0)
• (i < 100) là điều kiện dừng vòng lặp, nghĩa là lặp nếu i < 100. Bạn có thể dùng một điều kiện bất kì thông qua các toán tử  miễn là nó trả về true hoặc false như (i <= 100, i == 100)
• (i++) là tăng bước nhảy, bạn có thể dùng công thức khác như i+=2, i-=2, i--, ...

Như ví dụ trên thì ta sẽ có 100 vòng lặp từ 0 -> 99

1. Một số cách sử dụng vòng lặp for trong javascript

Lặp với bước nhảy tăng 1 đơn vị: XEM DEMO

var i;
// Lặp 10 lần từ 0 -> 9
// Bước nhảy là i++ nên sau mỗi lần lặp i tăng lên 1 đơn vị
for (i = 0; i < 10; i++){
    document.write(i + '<br/>');
}

Lặp với bước nhay giảm 1 đơn vị: XEM DEMO

var i;
// Lặp 10 lần từ 10 -> 1
// Bước nhảy là i-- nên sau mỗi lần lặp i sẽ giảm 1 đơn vị
for (i = 10; i > 0; i--){
    document.write(i + '<br/>');
}

Lặp với bước nhay tăng N đơn vị: XEM DEMO

var i;
var n = 2;
// Lặp 5 lần từ 0 -> 8, bước nhảy là 2
for (i = 0; i < 10; i+=n){
    document.write(i + '<br/>');
}

Lặp với bước nhảy giảm N đơn vị: XEM DEMO

var i;
var n = 2;
// Lặp 5 lần từ 10 -> 2, bước nhảy là -2
for (i = 10; i > 0; i-=n){
    document.write(i + '<br/>');
}

Khai báo biến lặp (i) ngay trong vòng lặp: 

Ngoài cách khai báo biến (i) ở ngoài vòng lặp thì ta có thể khai báo trong vòng lặp như ví dụ sau đây:

for (var i = 0; i < 10; i++){
    document.write(i + '<br/>');
}

2. Lặp vô hạn với vòng lặp for trong javascript

Khi sử dụng vòng lặp for khí khi lặp vô hạn hơn vòng lặp while, do while. Tuy nhiên nếu bạn dùng sai thì sẽ dẫn đến lặp vô hạn đấy

Dưới đây là một ví dụ lặp vô hạn:

for (var i = 0; i < 10; i--){
    document.write(i + '<br/>');
}

Ta thấy bước nhảy là i-- tức là sau mỗi vòng lặp sẽ giảm - xuống 1 đơn vị trong khi điều kiện dừng là i >= 10, rõ ràng điều kiện này sẽ không bao giờ đúng nên vòng lặp dẫn đến lặp vô hạn.

3. Vòng lặp for lồng nhau trong javascript

Khái niệm vòng lặp lồng nhau cũng giống như câu lệnh if else lồng nhau vậy thôi, nghĩa là vòng lặp sẽ nằm trong vòng lặp. Cấu trúc của nó như sau:

for (var i = 0; i < 10; i++)
{
    for (var j = 0; j < 10; j++){
        // Statment
    }
}

Có một điều lưu ý là hai biến điều khiển vòng lặp phải khác nhau nhé, trong ví dụ trên mình dùng i cho vòng lặp ở ngoài và j cho vòng lặp con phía trong.

Ví dụ: Viết chương trình in ra một ma trận 10x10

XEM DEMO

for (var i = 0; i <= 9; i++)
{
    for (var j = 0; j <= 9; j++){
        // In ra vị trí của ma trận [i][j]
        document.write("(["+i+"]["+j+"])");
    }
    // Xuống hàng
    document.write("<br/>");
}

4. Lời kết

Vòng lặp for khá là đơn giản nên các bạn dễ dàng nắm bắt phải không nào, nó cũng giống như các ngôn ngữ lập trình khác thôi nên để hiểu nó không phức tạp. Hy vọng qua bài vòng lặp for này sẽ giúp bạn học thêm được nhiều điều hơn. Chúc các bạn học tốt.