1. Vòng lặp trong JavaScript

Trong JavaScript, vòng lặp là một loại cú pháp giúp ta lặp lại việc thực thi một đoạn mã nhiều lần. Các vòng lặp rất tiện dụng, nó sẽ giúp bạn chạy đi chạy lại cùng một mã, mỗi lần với một giá trị khác nhau.

Vòng lặp là một trong những cấu trúc lệnh khá quan trọng, giúp giải quyết được nhiều bài toán trong thực tế, rút gọn được những đoạn code rườm rà và bị lặp nhiều lần.

Ví dụ ta muốn in ra màng hình 10000 câu “Lập trình từ đầu” thì sao? Chẳng nhẽ ngồi gõ 10000 câu lệnh ư? Hay là ta viết 1 câu rồi copy paste 9999 lần. Không mà ta sẽ sử dụng vòng lặp nhé. Chỉ cần 3 dòng thôi là đủ giải quyết vấn đề rồi. Và 3 dòng nó như thế nào thì ta sẽ được biết ở phần sau bài này nhé.

Trong Js, sẽ hỗ trợ ta những loại vòng lặp khác nhau:

  • for – lặp qua một khối mã nhiều lần
  • for/in – lặp qua các thuộc tính của một đối tượng
  • for/of – lặp qua các giá trị của một đối tượng có thể lặp lại
  • while – lặp qua một khối mã trong khi một điều kiện được chỉ định là đúng
  • do/while – cũng lặp lại qua một khối mã trong khi một điều kiện được chỉ định là đúng

2. Vòng lặp for trong JavaScript

Vòng lặp for dùng để lặp lại việc thực thi một đoạn mã nào đó một số lần. Vòng lặp được dùng để lặp một mảng hoặc một danh sách nằm trong khoảng (min -> max). Đây là vòng lặp có thứ tự và phải biết trước tổng số lần lặp nên thường dùng trong những bài toán liệt kê và xử lý các phần tử trong danh sách mảng.

Cú pháp:

for (bienkhoitao; dieukienthucthi ; buocnhay) { 
    # code...
}

Trong đó

  • bienkhoitao : là giá trị khởi tạo ban đầu của vòng lặp.
  • dieukienthucthi : là điều kiện mà vòng lặp được phép chạy(chú ý: Nếu bạn muốn lặp vô tận thì có thể bỏ trống).
  • buocnhay : là khoảng đệm nhảy của mỗi vòng lặp.

Ta sẽ có nguyên lý của nó:

  • bienkhoitao : được thực hiện (một lần) trước khi khối mã thực thi.
  • dieukienthucthi : xác định điều kiện để thực thi khối mã.
  • buocnhay : được thực hiện (mọi lúc) sau khi khối mã đã được thực hiện.
  • nếu điều kiện để thực thi khối mã sai -> kết thúc vòng lặp.

Ví dụ: Như ví dụ ở phần trước muốn in ra 10000 câu “Lập trình từ đầu”. Vậy 3 câu lệnh đơn giản để in ra là:

<script>
    for(var i=1; i<=10000; i++){
        document.write("<p>Lập trình từ đầu</p>");
    }
</script>

Từ ví dụ trên, bạn có thể biết:

  • Câu lệnh 1 đặt một biến trước khi vòng lặp bắt đầu (cho i = 1).
  • Câu lệnh 2 xác định điều kiện để chạy vòng lặp (i phải nhỏ hơn 10000).
  • Câu lệnh 3 tăng một giá trị (i ++) mỗi khi khối mã trong vòng lặp được thực thi.
  • Khi điều kiện thực thi sai (i>10000) thì kết thúc vòng lặp.

3. Phạm vi vòng lặp trong JavaScript

Mình sẽ đưa ra ví dụ trước cho các bạn dễ hình dung nhé:

Khi sử dụng với var

<script>
var i = 5;
for (var i = 0; i < 10; i++) {
}
document.write(i);
</script>

Sử dụng với let

<script>
let i = 5;
for (let i = 0; i < 10; i++) {
}
document.write(i);
</script>

Như ta đã thấy trong ví dụ đầu tiên, sử dụng var , biến được khai báo trong vòng lặp khai báo lại biến bên ngoài vòng lặp. Trong ví dụ thứ hai, bằng cách sử dụng let , biến được khai báo trong vòng lặp không khai báo lại biến bên ngoài vòng lặp. Như vậy, khi let được sử dụng để khai báo biến i trong một vòng lặp, biến i sẽ chỉ hiển thị trong vòng lặp.

4. Một số lưu ý khi sử dụng for

Thông thường bạn sẽ sử dụng câu lệnh let i = 0 để khởi tạo biến được sử dụng trong vòng lặp. Nhưng Js lại không quan trọng điều này. Câu lệnh này sẽ là tùy chọn. Bạn có thể bắt đầu nhiều giá trị trong câu lệnh này với việc ngăn cách bằng dấu phẩy.

Ví dụ:

<script>
const cars = ["BMW", "Vinmast", "Honda", "Mec"];
let i, len, text;
for (i = 0, len = cars.length, text = ""; i < len; i++) {
  text += cars[i] + "<br>";
}
document.write(text);
</script>

Và bạn có thể bỏ qua câu lệnh (như khi các giá trị của bạn được đặt trước khi bắt đầu vòng lặp).

Thường thì khi sử dụng câu lệnh điều kiện, ta nghĩ nó là bắt buộc. Nhưng không, Js cũng không quan trọng nó. Và câu lệnh này cũng là tùy chọn. Nếu câu lệnh trả về true, vòng lặp sẽ bắt đầu lại, nếu nó trả về false, vòng lặp sẽ kết thúc.

Nhưng khi bạn bỏ qua câu lệnh điều kiện, bạn phải cung cấp dấu ngắt bên trong vòng lặp. Nếu không, 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ới câu lệnh bước nhảy cũng vậy, Js cũng không quan trọng nó luôn. Câu lệnh này có thể thực hiện bất kỳ điều gì như tăng âm (i–), tăng dương (i = i + 15) hoặc bất kỳ điều gì khác. Nó cũng có thể bị bỏ qua (như khi bạn tăng các giá trị của mình bên trong vòng lặp).

<p id="demo"></p>

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

let i = 0;
let len = cars.length;
let text = "";

for (; i < len; ) {
  text += cars[i] + "<br>";
  i++;
}
document.getElementById("demo").innerHTML = text;
</script>

5. Vòng lặp for vô hạn trong JavaScript

Mặc dù vòng lặp for được đánh giá là ít khi bị lặp vô hạn vì nó là vòng lặp biết trước tổng số lần lặp. Tuy nhiên, có một số trường hợp lập trình viên đã xử lý bài toán không hợp lý dẫn đến điều kiện thực hiện vòng lặp luôn đúng và dẫn đến lặp vô hạn.

Cùng với đó để có thể làm vòng lặp for trở thành vòng lặp vô tận thì bạn chỉ cần để trống biểu thức điều kiện thứ 2 trong vòng lặp for . Đây cũng là một trong số những lưu ý ở phần trên.

Ví dụ:

<script>
   for (var i = 0; i < 10; i--){
    document.write(i + '<br/>');
    }
</script>

Ta thấy bước nhảy là i–, tức là sau mỗi vòng lặp sẽ giảm i xuống 1 đơn vị, trong khi điều kiện dừng là i >= 10, rõ ràng điều kiện này sẽ không bao giờ đúng nên vòng lặp dẫn đến lặp vô hạn.

6. Vòng lặp for lồng nhau trong JavaScript

Khái niệm vòng lặp lồng nhau cũng giống như lệnh if else lồng nhau trong Js  nghĩa là vòng lặp này sẽ nằm trong một vòng lặp khác. Cấu trúc của nó như sau:

for (var i = 0; i < 10; i++)
{
    for (var j = 0; j < 10; j++){
        // code
    }
}

Có một điều lưu ý là hai biến điều khiển vòng lặp phải khác nhau nhé, nếu không chương trình của bạn sẽ hoạt động không đúng. Như trong ví dụ trên thì mình dùng i cho vòng lặp ở ngoài và j cho vòng lặp con phía trong.

Ví dụ:

<script>
    for (var i = 0; i <= 9; i++)
    {
        for (var j = 0; j <= 9; j++){
            document.write("(["+i+"]["+j+"])");
        }
        document.write("<br/>");
    }
</script>