While trong JavaScript và vòng lặp không giới hạn số lần | Laptrinhcanban.com

HOME › >>

While trong JavaScript và vòng lặp không giới hạn số lần

Hướng dẫn cách sử dụng vòng lặp while trong JavaScript. Bạn sẽ học được khái niệm vòng lặp while trong JavaScript là gì, cách dùng lệnh while trong vòng lặp không giới hạn số lần, cách thoát khỏi vòng lặp while cũng như cách bỏ qua lượt lặp while hiện tại trong JavaScript sau bài học này.

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), 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 JavaScript.

Vòng lặp while trong JavaScript bao gồm lệnh while, một biểu thức điều kiện và một khối gồm các câu lệnh được mô tả trong khối đó. Các lệnh mô tả trong khối chỉ được xử lý khi biểu thức điều kiện được chỉ định là True (đúng). Chúng ta sử dụng vòng lặp while trong JavaScript với cú pháp như sau:

while(biểu-thức-điều-kiện) {
    Câu lệnh 1 trong khối while ;
    Câu lệnh 2 trong khối while ;
    ...
}

Nếu biểu thức điều kiện là True (đúng), các câu lệnh mô tả trong khối While sẽ được thực thi theo thứ tự.

Ví dụ:

let num = 1;
while (num < 20){
console.log(num);
num = num * 3;
}
//> 1
//> 3
//> 9

Lại nữa, nếu chỉ có một câu lệnh duy nhất trong khối lệnh của while, chúng ta có thể lược bỏ cặp dấu {} và dùng while với cú pháp rút gọn như sau:

while(biểu-thức-điều-kiện)
    câu-lệnh;

Chúng ta cũng có thể viết gọn các lệnh trên một dòng như sau:

while(biểu-thức-điều-kiện) câu-lệnh;

Ví dụ:

let num = 1;
while (num < 20)
num = num * 3;

console.log(num);
//> 27

Tuy nhiên cách rút gọn này đôi khi khiến chúng ta khó phân biệt giữa các lệnh xử lý trong chương trình và khiến việc đọc code cũng bảo trì chương trình mất nhiều thời gian hơn, nên chúng ta nên hạn chế sử dụng tới cách viết này.

Để hiểu rõ hơn, chúng ta cùng xem một ví dụ cụ thể về một vòng lặp while in ra màn hình 3 lần dòng hello như sau:

let i = 0;
while(i < 3){
console.log("hello " + i);
i += 1;
}
console.log('bye');

Khác với vòng lặp for có biểu thức khởi tạo, biểu thức điều kiện, và biểu thức thay đổi dùng để khởi tạo, kiểm trathay đổi giá trị của biến đếm trong for, thì trong vòng lặp while chỉ có duy nhất biểu thức điều kiện mà thôi. Do đó chúng ta cần phải khai báo biến đếm để sử dụng trong biểu thức điều kiện của while, chính là dòng:

let i = 0;

Ngoài ra, chúng ta cũng cần tự viết biểu thức thay đổi trong khối while để thay đổi giá trị của biến đếm sau mỗi lượt lặp. Ví dụng như dòng code sau sẽ tăng biến i thêm 1 đơn vị sau mỗi lượt lặp.

i += 1;

Lại nữa, nếu như chúng ta không viết biểu thức thay đổi trong khối while sẽ khiến biểu thức điều kiện của while luôn True, dẫn đến bạn sẽ vô tình tạo ra một vòng lặp vô hạn trong JavaScript. Trừ những trường hợp cần thiết thì vòng lặp vô hạn do không bao giờ dừng lại sẽ gây tốn dung lượng và làm hỏng chương trình, do đó bạn hãy chú ý và viết biểu thức thay đổi khi sử dụng while trong JavaScript nhé.

Vậy vòng lặp while ở trên sẽ chạy như thế nào? Hãy xem kỹ ở phần miêu tả các xử lý sau đây:

Lượt lặp đầu tiên:

  1. Khai báo biến i và gán giá trị ban đầu i = 0
  2. Biểu thức điều kiện i < 3 là TRUE nên thực thi vòng lặp
  3. Chạy lệnh console.log("hello " + i); trong khối lệnh
  4. Biểu thức thay đổi tăng giá trị i lên 1 đơn vị thành i=2

Lượt lặp thứ 2:

  1. Biểu thức điều kiện i < 3 là TRUE nên thực thi vòng lặp
  2. Chạy lệnh console.log("hello " + i); trong khối lệnh
  3. Biểu thức thay đổi tăng giá trị i lên 1 đơn vị thành i=3

Lượt lặp thứ 3:

  1. Biểu thức điều kiện i < 3 là FALSE nên kết thúc vòng lặp

Ngoài vòng lặp:

  1. Chạy lệnh tiếp theo console.log('bye') sau khi thoát vòng lặp.

Kết quả, vòng lặp while ở trên sẽ in ra màn hình console như sau:

hello 0
hello 1
hello 2
bye

Chúng ta có thể khái quát xử lý bằng Sơ đồ khối của vòng lặp while trong JavaScript như sau:

Vòng lặp while trong JavaScript

Sử dụng while trong JavaScript

Vì vòng lặp while trong JavaScript sẽ lặp lại liên tục chừng nào biểu thức điều kiện trong nó còn đúng, nên nó phù hợp với các xử lý không cố định số lần lặp.

Ví dụ, chúng ta sử dụng while để tạo ra một chương trình để giải bài toán tính tổng của dãy số cho tới khi tổng đó lớn hơn 10 như sau:

let total = 0;
let num = 1;

while (total < 10){
console.log(num);
total += num;
num ++;

}
console.log("SUM",total);
//> 1
//>2
//>3
//>4
//>SUM 10

Lưu ý, khác với lệnh for trong JavaScript chỉ lặp lại đúng số lần bằng với số phần tử có trong đối tượng và kết thúc sau khi xử lý phần tử cuối cùng, lệnh while trong JavaScript sẽ lặp liên tục cho tới khi biểu thức điều kiện trở nên False (sai) mà thôi. Nói cách khác, nếu biểu thức điều kiện trong lệnh while luôn True (đúng), lệnh while lúc này sẽ tạo ra một vòng lặp vô hạn trong JavaScript.

Ví dụ trong chương trình in ra các số nhỏ hơn 10 sau đây, giả sử bạn quên không viết câu lệnh cộng thêm 1 vào biến num sau mỗi vòng lặp để thay đổi giá trị của num, khiến num luôn bằng 0 và nhỏ hơn 10.
Khi đó biểu thức điều kiện của lệnh while luôn True (đúng), dẫn đến câu lệnh while sẽ trở thành một vòng lặp vô hạn trong JavaScript.

let num = 0;

while (num <= 10)
console.log(num);

Kết quả, vòng lặp while chạy vô hạn và in ra màn hình giá trị 0 như sau:

0
0
0
0
0
0
0
0
0
0
0
0
0
...
...

Về vòng lặp vô hạn cũng như cách thoát khỏi vòng lặp vô hạn trong JavaScript, bạn hãy tham khảo tại bài viết vòng lặp vô hạn trong JavaScript nhé.

Bỏ qua lượt lặp hiện tại của vòng lặp while trong JavaScript | Lệnh continue

Chúng ta sử dụng lệnh continue để bỏ qua lượt lặp hiện tại của vòng lặp while trong JavaScript và thực hiện các lượt lặp kế tiếp. Lệnh while sẽ bỏ qua lượt lặp while hiện tại khi lệnh continue được thực hiện, tất cả các xử lý sau lệnh continue đều bị bỏ qua và chương trình bắt đầu một lượt lặp mới.

Ví dụ, chúng ta bỏ qua lượt lặp khi số bằng 2 trong chương trình tính tổng của dãy số từ 1 đến 10 như sau:

let total = 0;
let num = 1;

while (num < 11){
if(num == 2){
console.log("CONTINUE!");
num ++;
continue;
}
console.log(num);
total += num;
num ++;

}
console.log("SUM",total);

Ở ví dụ này, sau khi số num tăng đến 2 thì thỏa mãn biểu thức điều kiện trong lệnh if, do đó lệnh continue được thực hiện khiến lệnh while dừng các lệnh còn lại của lượt lặp hiện tại và bắt đầu một lượt lặp mới.
Kết quả:

1
CONTINUE!
3
4
5
6
7
8
9
10
SUM 53

Lưu ý là nếu như bạn bỏ quên xử lý biến num ++ bên trong khối IF chứa lệnh continue ở trên, giá trị của biến sẽ không được cập nhật dẫn đến bạn sẽ bất ngờ rơi vào một vòng lặp vô hạn trong JavaScript đấy.

Thoát khỏi vòng lặp while trong JavaScript | Lệnh break

Chúng ta sử dụng lệnh break để thoát khỏi vòng lặp while trong JavaScript theo điều kiện mà bạn muốn. Lệnh while sẽ dừng lại khi lệnh break được thực hiện, tất cả các xử lý sau lệnh break cũng như các lượt lặp còn lại trong lệnh while đều bị dừng giữa chừng.

Ví dụ, chúng ta dừng và thoát khỏi vòng lặp while khi số bằng 2 trong chương trình tính tổng của dãy số từ 1 đến 10 như sau:

let total = 0;
let num = 1;

while (num < 11){
if(num == 2){
console.log("BREAK!");
num ++;
break;
}
console.log(num);
total += num;
num ++;

}
console.log("SUM",total);

Ở ví dụ này, sau khi số num tăng đến 2 thì thỏa mãn biểu thức điều kiện trong lệnh if, do đó lệnh break được thực hiện khiến lệnh while bị dừng lại. Kêt quả chỉ có số 1 cũng như là tổng tính đến thời điểm đó được in ra màn hình như sau mà thôi.

1
BREAK!
SUM 1

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn về cách sử dụng vòng lặp while trong JavaScript rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành viết lại các ví dụ của ngày hôm nay nhé.

Và hãy cùng tìm hiểu những kiến thức sâu hơn về JavaScript trong các bài học tiếp theo.

URL Link

https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/vong-lap-trong-javascript/while-trong-javascript/

Hãy chia sẻ và cùng lan tỏa kiến thức lập trình Nhật Bản tại Việt Nam!

HOME  › >>

Profile
きよしです!笑

Tác giả : Kiyoshi (Chis Thanh)

Kiyoshi là một cựu du học sinh tại Nhật Bản. Sau khi tốt nghiệp đại học Toyama năm 2017, Kiyoshi hiện đang làm BrSE tại Tokyo, Nhật Bản.