Hướng dẫn While Loop trong JavaScript (2020)

Vòng lặp do...while thực thi block code một lần và tiếp tục chạy nếu điều kiện vẫn evaluate thành true. while và do...while hữu ích nếu muốn thực thi block code khi điều kiện cụ thể được thỏa mãn.

Vòng lặp (loops) là tính năng cốt lõi lập trình dùng tự động hóa tác vụ tương tự. Ví dụ: muốn in mọi tên trong danh sách học sinh. Có thể tạo vòng lặp tự động hóa tác vụ.

JavaScript cung cấp hai loại vòng lặp chính thực hiện tác vụ lặp nhiều lần. Loại đầu: for loop, thực thi statement số lần cụ thể. Loại hai: while loop, chạy dựa trên điều kiện evaluate thành true.

Trong tutorial này, ta thảo luận cơ bản while loop trong JavaScript. Sẽ khám phá cú pháp while loops, cách tạo do...while loops, và xem vài ví dụ loops hoạt động.

JavaScript While Loops

Vòng lặp while JavaScript thực thi block code trong khi điều kiện evaluate thành true. while loops dừng khi điều kiện evaluate thành false. while loop cho phép lặp block code nhiều lần mà không copy-paste code.

while loops thường dùng nếu muốn chạy code số lần không xác định. Ngược lại, JavaScript for loops dùng nếu đã biết hoặc tính được số lần loop nên chạy.

Cú pháp while loop trong JavaScript:

while (condition_is_true) {
  // Chạy code
}

Câu lệnh while trông rất giống for statement JavaScript.

Có thể tạo infinite loop (vòng lặp vô tận) bằng cách chỉ định điều kiện luôn evaluate thành true. Đảm bảo điều kiện có thể evaluate thành false trừ khi muốn loop chạy cho đến khi dừng thủ công.

Ví dụ JavaScript While Loop

Giả sử tổ chức party độc quyền. Chỉ muốn mời 40 người tại một thời điểm.

Hiện có 35 người ở party. Mỗi lần mời ai đó muốn tính còn mời thêm bao nhiêu người trước khi đạt giới hạn. Chương trình dùng while loop tính toán:

var limit = 40;
var current_attendees = 35;
while (current_attendees < limit) {
  var current_attendees = current_attendees + 1;
  var current_attendees = current_attendees + 1;
  var spaces_left = limit - current_attendees;
  console.log(`Còn ${spaces_left} chỗ trống trong party.`);
};

Code trả về:

Còn 4 chỗ trống trong party.
Còn 3 chỗ trống trong party.
Còn 2 chỗ trống trong party.
Còn 1 chỗ trống trong party.
Còn 0 chỗ trống trong party.

Hai dòng đầu khai báo biến. limit chỉ định số người tối đa tham dự. current_attendees theo dõi số người hiện tại.

Tạo while loop chạy miễn số người hiện tại nhỏ hơn limit.

Chương trình cộng 1 vào current_attendees (lưu ý: code gốc cộng 2 lần, có thể là lỗi), tính chỗ trống trừ current_attendees từ limit. Cuối in ra câu báo cho organizer biết chỗ còn lại.

while loop chạy miễn party dưới 40 người. Mỗi lần lặp current_attendees tăng 1. Ngay khi party đạt 40 người, loop dừng.

Ví dụ while Loops khác

Dùng ví dụ khác minh họa while loop. Tạo while loop in mọi tên trong mảng VIP party:

var vips = ['Robert De Niro', 'Will Smith', 'Brad Pitt', 'Denzel Washington'];
var counter = 0;
while (counter < vips.length) {
  console.log(vips[counter]);
  var counter = counter + 1;
};

Code trả về:

Robert De Niro
Will Smith
Brad Pitt
Denzel Washington

Loop lặp qua mảng vips miễn biến counter nhỏ hơn độ dài mảng JavaScript.

JavaScript do...while Loops

Vòng lặp do...while JavaScript thực thi statement một lần rồi kiểm tra điều kiện true. Nếu true, loop chạy lại. Ngược lại, code dừng.

Có một khác biệt lớn giữa while và do...while. do...while loops thực thi ít nhất một lần ngay cả khi điều kiện không bao giờ evaluate thành true. while loops chỉ thực thi nếu điều kiện evaluate thành true.

Cú pháp do...while loop:

do {
  // Chạy code
} while (condition_is_true);

Code trong do...while loop luôn thực thi ít nhất một lần.

Ví dụ JavaScript do...while Loop

Dùng ví dụ minh họa do...while. Giả sử tạo game đoán số. Muốn chương trình hỏi user đoán số cho đến khi đoán đúng.

Chương trình ví dụ:

var number_to_guess = 7;
var guessed_number = 0;
do {
  var input = prompt("Nhập số từ 1 đến 10.")
  var input = prompt("Nhập số từ 1 đến 10.")
  var guessed_number = parseInt(input);
} while (guessed_number != number_to_guess);

Chương trình hỏi user nhập số 1-10 miễn guessed_number không bằng number_to_guess. Nhưng chương trình thực thi nội dung do statement trước khi evaluate điều kiện lần đầu.

Khi điều kiện false, loop dừng thực thi.

Kết luận

While loops dùng thực thi block code lặp khi statement evaluate thành true. do...while loops thực thi block code một lần. Tiếp tục chạy nếu statement vẫn evaluate thành true.

While và do...while loops hữu ích nếu muốn thực thi block code khi điều kiện cụ thể thỏa mãn.

Trong tutorial, ta thảo luận cách tạo while và do...while loop trong JavaScript. Cũng khám phá vài ví dụ loops hoạt động minh họa chỗ có thể hữu ích. Bây giờ bạn trang bị kiến thức dùng while loops như chuyên gia JavaScript!

Lời khuyên tài nguyên học JavaScript top, khóa học, xem bài How to Learn JavaScript.