Trong bài trước chúng ta đã được làm quen với các vòng lặp với số lần lặp biết trước For. Trong bài này chúng ta sẽ tìm hiểu vòng lặp while và vòng lặp do while trong Javascript, chúng ta sẽ cùng tìm hiều về cú pháp cũng như cách hoạt động của hai vòng lặp này nhé.
Vòng lặp while và do while dùng để lặp với trường hợp mà chúng ta không biết chính xác số lần lặp là bao nhiêu và trường hợp điều kiện dừng vòng lặp quá phức tạp, điều này hoàn toàn khác với vòng lặp for. Khi sử dụng vòng lặp while rất dễ bị lặp vô hạn nếu bạn không xử lý được logic của điều kiện.
Vòng lặp while trong javascript
Trước tiên hãy xem một chút về cấu trúc của vòng lặp này như sau:
while (điều kiện) {
// khối lệnh được thực thi khi điều kiện đúng;
}Trong đó là điều kiện là biểu thức logic để dừng vòng lặp, nếu điều kiện là đúng thì khối lệnh trong vòng lặp sẽ được thực thi cho tới khi biểu thức điều kiện có giá trị sai. Chính vì vậy nếu điều kiện luôn luôn đúng thì vòng lặp sẽ dẫn tới lặp vô hạn.
Sơ đồ hoạt động của while loop
Trong ví dụ sau, khối lệnh trong vòng lặp sẽ chạy đi chạy lại, miễn là biến (i) nhỏ hơn 10:
<html>
<body>
<h2>JavaScript While Loop</h2>
<p id="demo"></p>
<script>
let text = "";
let i = 0;
while (i < 10) {
text += "<br>The number is " + i;
i++;
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>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 có thể sẽ làm treo trình duyệt của bạn.
Vòng lặp Do While
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 nếu điều kiện là đúng.
Cú pháp
do {
// khối lệnh được thực hiện
}
while (điều kiện);Sơ đồ hoạt động của do while
Ví dụ dưới đây sử dụng một vòng lặp do while. 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:
<html>
<body>
<h2>JavaScript Do While Loop</h2>
<p id="demo"></p>
<script>
let text = ""
let i = 0;
do {
text += "<br>The number is " + i;
i++;
}
while (i < 10);
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>Đừng quên tăng biến được sử dụng trong điều kiện, nếu không vòng lặp sẽ không bao giờ kết thúc!
So sánh For và While
Ở các bài trước chúng ta đã được làm quen với 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 (nếu chúng ta bỏ qua biểu thức 1 và 3 trong vòng for)
Vòng lặp trong ví dụ này sử dụng một vòng lặp for để duyệt mảng cars
const cars = ["BMW", "Volvo", "Mercedes", "Audi"];
let i = 0;
let text = "";
for (;cars[i];) {
text += cars[i];
i++;
}Hãy thử nghiệm ví dụ và quan sát kết quả
<html>
<body>
<p id="demo"></p>
<script>
const cars = ["BMW", "Volvo", "Mercedes", "Audi"];
let i = 0;
let text = "";
for (;cars[i];) {
text += cars[i] + "<br>";
i++;
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>Vòng lặp trong ví dụ này sử dụng một vòng lặp while để duyệt các phần tử trong mảng cars
<html>
<body>
<p id="demo"></p>
<script>
const cars = ["BMW", "Volvo", "Mercedes", "Audi"];
let i = 0;
let text = "";
while (cars[i]) {
text += cars[i] + "<br>";
i++;
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>So sánh vòng lặp while và do while
Như đã nói ở trên, điểm khác nhau duy nhất giữa vòng lặp while và do 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)
Ví dụ: Bên dưới chúng ta có một đoạn mã về vòng lặp while và một đoạn mã về vòng lặp do while, điều kiện ban đầu đưa ra là sai. Tuy nhiên, vòng lặp do while vẫn được thực thi một lần.
<script>
var i = 11;
while(i < 10){
document.write(i);
i++;
}
</script><script>
var i = 11;
do{
document.write(i);
i++;
}while(i < 10);
</script>Sử dụng lệnh break và lệnh continue trong vòng lặp
Lệnh break và lệnh continue thường được đặt bên trong vòng lặp.
- (1) 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ó còn đúng hay không.
- (2) 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ụ 1: Dùng vòng lặp while để hiển thị dãy số từ một đến mười, tuy nhiên hiển thị tới số năm thì dừng lại
<html>
<body>
<script>
var i = 1;
while(i < 11){
if(i == 6){break;}
document.write(i + "<br>");
i++;
}
</script>
</body>
</html>Ví dụ 2: Dùng vòng lặp while để hiển thị dãy số từ một đến mười (ngoại trừ số: ba, năm, chín)
<html>
<body>
<script>
var i = 1;
while(i < 11){
if( i == 3 || i ==5 || i ==9 ){
i++;
continue;
}
document.write(i + "<br>");
i++;
}
</script>
</body>
</html>Vòng lặp lồng nhau
– Tương tự như vòng lặp for, vòng lặp while (do while) cũng có thể lồng vào nhau:
- Vòng lặp “while” lồng bên trong vòng lặp “while”
- Vòng lặp “do while” lồng bên trong vòng lặp “do while”
- Vòng lặp “while” lồng bên trong vòng lặp “do while”
- Vòng lặp “do while” lồng bên trong vòng lặp “while”
– Bên dưới là một ví dụ về vòng lặp while lồng bên trong vòng lặp while.
<html>
<body>
<script>
var i = 0;
while(i < 10){
var j = 1;
while(j < 10){
document.write(i + "," + j + " ");
j++;
}
i++;
document.write("<br>");
}
</script>
</body>
</html>