Bài 5: Vòng lặp trong Javascript

5894

I. Giới thiệu

Vòng lặp là một trong những khái niệm cơ bản trong lập trình nói chung và trong Javascript nói riêng, trong tiếng anh vòng lặp được gọi là Loop. Với vòng lặp, chúng ta có thể làm cho một đoạn code nào được lặp đi lặp lại nhiều lần.

Trong các dự án, việc lặp đi lặp lại một đoạn code xảy ra rất phổ biến, ví dụ bạn muốn in ra màn hình 1000 dòng chữ Anh Yêu Em chẳng hạn. Bạn có thể có 2 lựa chọn sau:

  • Cách 1: Viết 1000 dòng chữ Anh Yêu Em
  • Cách 2: Viết 1 dòng Anh Yêu Em, nhưng để nó trong vòng lặp 1000 lần

Cách nào thông minh và ngắn gọn hơn nhỉ, rõ là cách 2 rồi.

Vậy trong Javascript có những loại vòng lặp nào, cách sử dụng ra sao thì mời các bạn hãy theo dõi tiếp nội dung bên dưới nhé.

II. Vòng lặp for

Vòng lặp for trong Javascript được biết đến như một vòng lặp với số lần biết trước. Ý tưởng của vòng lặp for là chúng ta sẽ có:

  • Một biến đếm ở dạng số nguyên (thường được khởi tạo là 0)
  • Một điều kiện để vòng lặp kết thúc (thường là đếm < số lần lặp)
  • Sau mỗi lần lặp, biến đếm sẽ thay đổi giá trị (thường là tăng lên 1 đơn vị)

Ví dụ về một vòng lặp for như sau:

var dem = 0; // Khởi tạo biến đếm
var max = 5; // Số lần lặp tối đa

for (dem; dem < max; dem++) { //dem++ để tăng dem lên 1 đơn vị sau mỗi lần lặp
    // Các câu lệnh trong đây sẽ được lặp đi lặp lại
    console.log("Lần lặp thứ " + dem);
}

Vòng lặp for rất hữu ích trong trường hợp bạn muốn lặp từ một số nguyên từ n tới m

Bạn cũng có thể sử dụng vòng lặp for để lặp theo chiều giảm dần như sau:

var dem = 5;
var min = 0;

for (dem; dem > min; dem--) {
    console.log(dem)
}

III. Vòng lặp while

Khác với vòng lặp for, vòng lặp while là vòng lặp với số lần không biết trước. Ý tưởng của vòng lặp while cũng đơn giản hơn, chúng ta chỉ cần chỉ ra cho vòng lặp while một điều kiện. Nếu điều kiện còn đúng, thì nó còn được lặp, nếu sai thì nó sẽ dừng.

Để hiểu rõ hơn, mời các bạn cùng xem ví dụ sau:

// Khởi tạo i là một số nguyên ngẫu nhiên từ 0 tới 99
var i = Math.floor(Math.random() * 100);

while (i !== 0) { // Điều kiện lặp là số i phải khác 0
  console.log(i);

  // i được gán lại bằng một số ngẫu nhiên từ 0 tới 99
  i = Math.floor(Math.random() * 100);
}

Phân tích ví dụ trên, ta có:

  • i được khởi tạo giá trị là một số nguyên ngẫu nhiên từ 0 tới 99.
  • Điều kiện để lặp là i phải khác 0.
  • Sau mỗi lần lặp, i được gán lại bằng một số ngẫu nhiên từ 0 tới 99.

Vì i luôn là một số nguyên nhẫu nhiên từ 0 tới 99, nên chúng ta không thể biết trước khi nào thì i bằng 0, đồng nghĩa rằng chúng ta cũng không xác định được vòng lặp trên sẽ lặp bao nhiêu lần:

  • Có thể không lặp lần nào trong trường hợp vừa khởi tạo i đã là 0.
  • Có thể lặp vô hạn, khi i không bao giờ bằng 0.

Khi sử dụng vòng lặp while, hãy để ý điều kiện dừng để tránh trường hợp rơi vào vòng lặp vô hạn.

IV. Vòng lặp do … while

do ... while cũng là một dạng vòng lặp với số lần không biết trước như vòng lặp while. Tuy nhiên khác ở chỗ:

  • Vòng lặp while có thể không lặp bất kỳ lần nào nếu điều kiện lặp sai ngay từ đầu. Nghĩa là nó sẽ kiểm tra điều kiện rồi mới lặp.
  • Vòng lặp do ... while luôn lặp ít nhất một lần, nghĩa là nó sẽ chạy xong rồi mới kiểm tra điều kiện.

Ví dụ: Đoạn code sau mô tả trò chơi rút thăm trúng thưởng, nếu bạn rút phải phiếu mang giá trị là 1 thì bạn được quyền rút lại phiếu khác.

var phieu;

do {
   // phieu được gán là một số nguyên nhẫu nhiên từ 0 tới 99
   phieu = Math.floor(Math.random() * 100);

   // Giả sử phiếu là 1 thì sẽ được rút thăm lần nữa
} while (phieu === 1);

V. Break và continue trong vòng lặp

5.1 Break

Trong một số trường hợp, khi điều kiện lặp vẫn đang đúng (tức là vòng lặp vẫn còn có thể lặp tiếp) nhưng bạn lại muốn dừng vòng lặp ngang chừng, để làm được điều đó bạn chỉ cần đặt vào lệnh break.

Khi vòng lặp gặp phải lệnh break, thì vòng lặp sẽ bị dừng lại ngay.

Ví dụ: Đoạn code sau mình sử dụng một vòng lặp duyệt các số từ 1 tới 10, nhưng thực tế nó chỉ chạy tới 5. Do chạy tới 5 thì gặp lệnh break nên vòng lặp bị thoát ngang chừng.

for (var i = 1; i <= 10; i++) {
    if (i == 5) {
        break; // Thoát khỏi vòng lặp
    }
}

5.2 Continue

Khác với lệnh break, continue là lệnh giúp bạn bỏ qua một bước lặp, tức là toàn bộ code trong vòng lặp và nằm ở phía dưới lệnh continue sẽ không được thực thi.

Khi vòng lặp gặp lệnh continue, nó sẽ bỏ qua bước lặp hiện tại và chuyển ngay sang bước lặp kế tiếp.

Ví dụ: Đoạn code sau sẽ tính tổng các số lẻ (số không chia hết cho 2) từ 1 tới 10. Ý tưởng là mình cho một vòng lặp chạy từ 1 tới 10, mỗi lần chạy mình kiểm tra số hiện tại có chia hết cho 2 hay không, nếu chia hết thì nó là số chẵn, nếu là số chẵn thì sử dụng lệnh continue để bỏ qua bước lặp hiện tại, chuyển qua bước lặp tiếp theo.

var tongSoLe = 0;

for (var i = 1; i <= 10; i++) {
   if (i % 2 == 0) {
       continue;
   }
   tongSoLe = tongSoLe + i;
}

VI. Tổng kết

Qua bài này, bạn đã nắm được 3 vòng lặp có trong Javascript. Tổng kết lại có một số điểm trọng tâm như sau:

  • for là vòng lặp với số lần biết trước
  • while, do … while là vòng lặp với số lần chưa biết trước, tuy nhiên do … while luôn lặp ít nhất một lần.

Chỉ có như vậy thôi, chúc các bạn học vui vẻ.

Hẹn gặp lại trong những bài viết lần sau.

BÀI VIẾT LIÊN QUANXEM THÊM