1. Vòng lặp While trong JavaScript

While trong JavaScript là vòng lặp giúp lặp đi lặp lại các xử lý trong chương trình nếu biểu thức điều kiện trong nó là True (đúng). Khác với vòng lặp for trong JavaScript vốn được sử dụng để lặp lại các xử lý trong chương trình với một số lần cụ thể thì while trong JavaScript sẽ lặp lại liên tục mãi mãi chừng nào biểu thức điều kiện trong nó còn True (đúng).

Hay nói một cách cụ thể bạn đưa ra một điều kiện, nếu điều kiện đó là sai thì kết thúc. Còn nếu đúng thì một đoạn mã sẽ được thực thi và bạn tiếp tục quay lại kiểm tra điều kiện. Nếu điều kiện đó là sai thì kết thúc. Còn nếu đúng thì một đoạn mã sẽ được thực thi và bạn tiếp tục quay lại kiểm tra điều kiện.

Do đó nó được sử dụng trong các trường hợp mà chúng ta không muốn giới hạn số lần lặp, hoặc là khi muốn tạo ra vòng lặp vô hạn trong Js.

Cú pháp

while (condition){
    // code
}

Trong đó condition là là điều kiện dừng vòng lặp, nếu condition đúng thì vòng lặp sẽ được thực thi cho tới khi condition có giá trị sai. Chính vì vậy nếu condition luôn luôn đúng thì vòng lặp sẽ dẫn tới lặp vô hạn.

Ví dụ:

<script>
let text = "";
let i = 0;
while (i < 10) {
  text += "<br>đây là số " + i;
  i++;
}
document.write(text);
</script>

Lưu ý

Nếu bạn quên tăng biến được sử dụng trong điều kiện, vòng lặp sẽ không bao giờ kết thúc. Điều này sẽ làm hỏng trình duyệt của bạn.

Ví dụ: một ví dụ khác phức tạp hơn

<script>
    // Biến lưu giá trị người dùng nhập vào
    var value = null;

    // Trong khi giá trị bé hơn 1 hoặc giá trị lớn hơn 10
    // thì chạy thân vòng lặp
    while (value < 1 || value > 10){
        value = prompt("Nhập vào số từ 1 -> 10");
    }

    // Sau khi nhập đúng thì in ra màn hình
    alert("Số bạn vừa nhập là " + value);
</script>

2. Vòng lặp do while trong JavaScript

Vòng lặp do while là một biến thể của vòng lặp while . Vòng lặp này sẽ thực thi khối mã một lần, trước khi kiểm tra xem điều kiện có đúng không, sau đó nó sẽ lặp lại vòng lặp miễn là điều kiện là đúng. Đây chính là điểm khác nhau lớn nhất giữa 2 vòng lặp whiledo while .

Cú pháp

do {
    // code
}
while (condition);

Trong đó condition là điều kiện để dừng vòng lặp. ‘

Ví dụ về vòng lặp sẽ luôn được thực hiện ít nhất một lần, ngay cả khi điều kiện là sai, vì khối mã được thực thi trước khi điều kiện được kiểm tra:

<script>
let text = ""
let i = 0;

do {
  text += "<br>Đây là số " + i;
  i++;
}
while (i < 10);  

document.write(text);
</script>

Hay một ví dụ khác:

<script>
    // Biến lưu giá trị người dùng nhập vào
    var value = null;

    // Thực thi 
    do {
        value = prompt("Nhập vào số từ 1 -> 10");
    }
    while (value < 1 || value > 10);

    // Sau khi nhập đúng thì in ra màn hình
    alert("Số bạn vừa nhập là " + value);
</script>

Bạn cũng đừng quên việc tăng giá trị cho biến nhé, không là lại lặp vô hạn đấy!

3. Vòng lặp while và do while lồng nhau

Cũng giống như trong vòng lặp for , ta có thể lồng nhiều vòng lặp while hoặc do while lại với nhau để viết chương trình.

Ví dụ:

<script>
    var i = 0;
    // Vòng lặp ngoài
    while (i <= 9)
    {
        // Mỗi lần lặp gan j = 0;
        var j = 0;

        // Lặp nếu j < <=
        while (j <= 9)
        {
            // In ra màn hình
            document.write('['+i+']['+j+'] ');

            // Tăng j lên nếu không sẽ bị lặp vô hạn
            j++;
        }
        // Xuống hàng
        document.write('<br/>');

        //Tăng i lên nếu không sẽ bị lặp vô hạn
        i++;
    }
</script>

4. So sánh giữa vòng lặp while và do while

Như đã nói ở trên, điểm khac nhau duy nhất giữa vòng lặp whiledo while chính là đối với vòng lặp do while thì ở lần đầu tiên, đoạn mã sẽ được thực thi mà không cần phải kiểm tra điều kiện (tức là cho dù điều kiện có đúng hay sai thì đoạn mã vẫn được thực thi ít nhất một lần).

Nếu bạn đã đọc bài học trước về vòng lặp for , bạn sẽ phát hiện ra rằng vòng lặp while rất giống với vòng lặp for . Với câu lệnh 1 và câu lệnh 3 bị bỏ qua.

Ví dụ:

Với vòng lặp for

<script>
const cars = ["BMW", "Vinfast", "Honda", "Mec"];

let i = 0;
let text = "";
for (;cars[i];) {
  text += cars[i] + "<br>";
  i++;
}

document.write(text);
</script>

Khi sử dụng while

<script>
const cars = ["BMW", "Volvo", "Saab", "Ford"];

let i = 0;
let text = "";
while (cars[i]) {
  text += cars[i] + "<br>";
  i++;
}

document.write(text);
</script>