Trong thực tế chúng ta gặp rất nhiều các công việc thường lặp đi lặp lại chẳng hạn, 1 tuần có 7 ngày, 1 ngày có 24 giờ… hay là mỗi tuần bạn thường đến trường 5 ngày / tuần… Trong Javascript cũng thế, có những công việc chúng ta cần phải thực hiện nhiều lần … các lần thực hiện là giống nhau, vì thế các vòng lặp trong lập trình đã được ra đời.

Trong bài này chúng ta sẽ được làm quen với vòng lặp For, một trong những vòng lặp phổ biến nhất trong các ngôn ngữ lập trình. Vòng lặp for là vòng lặp mà chúng ta thường biết trường số lần lặp.

Các vòng lặp trong Javascript

Sử dụng vòng lặp vô cùng tiện lợi khi bạn muốn thực hiện lặp đi lặp lại nhiều lần các nhóm lệnh giống nhau nhưng cho kết quả khác nhau. Ví dụ

Thông thường những công việc được lặp đi lặp lại ta thường viết như sau:

text += cars[0] + "<br>";
text += cars[1] + "<br>";
text += cars[2] + "<br>";
text += cars[3] + "<br>";
text += cars[4] + "<br>";
text += cars[5] + "<br>";

Tuy nhiên với vòng lặp ta có thể viết ngắn gọn như sau:

for (let i = 0; i < cars.length; i++) {
  text += cars[i] + "<br>";
}

Hãy chạy thử ví dụ sau:

<html>
<body>
<h2>JavaScript For Loop</h2>
<p id="demo"></p>
<script>
const cars = ["BMW", "Volvo", "Porsche", "Toyota", "Mercedes", "Audi"];
let text = "";
for (let i = 0; i < cars.length; i++) {
  text += cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>

Một số vòng lặp trong Javascript

JavaScript hỗ trợ các loại vòng lặp khác nhau như:

  • for– thực hiện các công việc trong for với số lần xác định
  • for/in– duyệt qua các thuộc tính của một đối tượng
  • for/of– duyệt qua các giá trị của một đối tượng có thể lặp lại
  • while– thực hiện các khối lệnh trong While khi một điều kiện cho trước là đúng
  • do/while– cũng thực hiện lặp lại khối lệnh khi một điều kiện cho trước là đúng

Vòng lặp For

Câu lệnh for tạo một vòng lặp với 3 biểu thức tùy chọn.

for (biểu thức 1; biểu thức 2; biểu thức 3) {
  // Khối lệnh được thực thi
}

Trong đó:

  • Biểu thức 1 là biểu thức khởi tạo được thực hiện (một lần) trước khi khối lệnh thực thi.
  • Biểu thức 2 xác định điều kiện để thực thi khối lệnh.
  • Biểu thức 3 được thực hiện mỗi lần sau khi khối lệnh đã được thực thi khi biểu thức 2 còn đúng.
<html>
<body>
<h2>JavaScript For Loop</h2>
<p id="demo"></p>
<script>
let text = "";
for (let i = 1; i < 6; i++) {
  text += "Lần lặp thứ  " + i + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>

Từ ví dụ trên, bạn có thể đọc:

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

Biểu thức 1.

Thông thường bạn sẽ sử dụng biểu thức 1 để khởi tạo biến được sử dụng trong vòng lặp (gán cho i = 1).

Tuy nhiên không phải lúc nào cũng như thế, biểu thức 1 là tùy chọn (nghĩa là không bắt buộc)

Bạn có thể bắt đầu nhiều giá trị trong biểu thức 1 (được phân tách bằng dấu phẩy):

<html>
<body>
<h2>JavaScript For Loop</h2>
<p id="demo"></p>
<script>
const cars = ["BMW", "Porsche", "Mercedes", "Audi"];
let i, len, text;
for (i = 0, len = cars.length, text = ""; i < len; i++) {
  text += cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>

Và bạn hoàn toàn có thể bỏ qua biểu thức 1 (như khi các giá trị khởi tạo của bạn được đặt trước khi bắt đầu vòng lặp):

<html>
<body>
<h2>JavaScript For Loop</h2>
<p id="demo"></p>
<script>
const cars = ["BMW", "Mercedes", "Porsche", "Audi"];
let i = 1;
let len = cars.length;
let text = "";
for (; i < len; i++) {
  text += cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>

Biểu thức 2

Thường thì biểu thức 2 được sử dụng để đánh giá điều kiện của biến ban đầu. Tuy nhiên không phải lúc nào cũng như thế, biểu thức 2 là biểu thức tùy chọn

Nếu biểu thức 2 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.

Nếu bạn bỏ qua biểu thức 2, bạn cần phải thêm câu lệnh break bên trong vòng lặp. Nếu không, vòng lặp sẽ rơi vào trạng thái lặp vô hạn. Điều này sẽ làm hỏng trình duyệt của bạn.

Biểu thức 3

Thường thì biểu thức 3 tăng giá trị của biến ban đầu. Tuy nhiên không phải lúc nào cũng thế, biểu thức 3 là tùy chọn (không bắt buộc xuất hiện trong vòng lặp for)

Biểu thức 3 có thể thực hiện bất kỳ điều gì như giảm giá trị (i–), tăng giá trị (i = i + 15) hoặc bất kỳ điều gì khác.

Biểu thức 3 cũng có thể bị bỏ qua (khi đó bạn cần có biểu thức thay đổi các giá trị của mình bên trong vòng lặp):

<html>
<body>
<h2>JavaScript For Loop</h2>
<p id="demo"></p>
<script>
const cars = ["BMW", "Porsche", "Mercedes", "Audi"];
let i = 0;
let len = cars.length;
let text = "Các hãng xe yêu thích: <br>";
for (; i < len; ) {
  text += cars[i] + "<br>";
  i++;
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>

Phạm vi vòng lặp

Sử dụng var trong một vòng lặp:

<html>
<body>
<h2>JavaScript let</h2>
<p id="demo"></p>
<script>
var i = 5;
for (var i = 0; i < 10; i++) {
  // some statements
}
document.getElementById("demo").innerHTML = "Giá trị của i= " +i;
</script>
</body>
</html>

Sử dụng let trong một vòng lặp:

<html>
<body>
<h2>JavaScript let</h2>
<p id="demo"></p>
<script>
let i = 5;
for (let i = 0; i < 10; i++) {
  // some statements
}
document.getElementById("demo").innerHTML = "Giá trị của i= "+i;
</script>
</body>
</html>

Trong ví dụ đầu tiên, chúng ta 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.

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.