Vòng lặp For của JavaScript

Vòng lặp có thể thực thi khối mã nhiều lần.

Vòng lặp JavaScript

nếu bạn cần chạy mã nhiều lần và mỗi lần sử dụng giá trị khác nhau, thì lặp lại (loop) rất tiện lợi.

thường ta gặp ví dụ về việc sử dụng mảng:

không cần viết như vậy:

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

Bạn có thể viết như sau:

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

Thử ngay

Các loại vòng lặp khác nhau

JavaScript hỗ trợ nhiều loại vòng lặp khác nhau:

  • for - Lặp lại nhiều lần một khối mã
  • for/in - Lặp qua các thuộc tính của đối tượng
  • while - Lặp lại một khối mã khi điều kiện được chỉ định là true
  • do/while - Lặp lại một khối mã khi điều kiện được chỉ định là true

Vòng lặp For

Vòng lặp for là công cụ thường được sử dụng khi bạn muốn tạo vòng lặp.

Cú pháp của vòng lặp for như sau:

for (Câu 1; Câu 2; Câu 3) {
     Khối mã cần thực thi
}

Câu 1 được thực thi trước khi bắt đầu vòng lặp (khối mã).

Câu 2 định nghĩa điều kiện để chạy vòng lặp (khối mã).

Câu 3 sẽ thực thi sau mỗi lần khối mã được thực thi.

Mô hình

for (i = 0; i < 5; i++) {
     text += "Số là " + i + "<br>";
}

Thử ngay

Từ mã trên, bạn có thể hiểu rằng:

Câu 1 thiết lập biến trước khi bắt đầu vòng lặp (var i = 0).

Câu 2 định nghĩa điều kiện để chạy vòng lặp (i phải nhỏ hơn 5).

Câu 3 sẽ tăng giá trị trong mỗi lần thực thi khối mã.

Câu 1

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

Nhưng không phải lúc nào cũng như vậy, JavaScript không quan tâm. Câu 1 là tùy chọn.

Bạn có thể khởi tạo nhiều giá trị trong câu 1 (bằng cách phân cách bằng dấu phẩy):

Mô hình

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

Thử ngay

Và bạn có thể bỏ qua câu 1 (ví dụ như thiết lập giá trị trước khi bắt đầu vòng lặp):

Mô hình

var i = 2;
var len = cars.length;
var text = "";
for (; i < len; i++) { 
    text += cars[i] + "<br>";
}

Thử ngay

Câu 2

Thường thì câu 2 được sử dụng để tính toán điều kiện của biến ban đầu.

Nhưng không phải lúc nào cũng như vậy, JavaScript không quan tâm. Câu 2 cũng là tùy chọn.

Nếu câu 2 trả về true, thì vòng lặp sẽ bắt đầu lại, nếu trả về false, thì vòng lặp sẽ kết thúc.

Nếu bỏ qua câu 2, thì bạn phải cung cấp một điều kiện trong vòng lặp. break. Nếu không, vòng lặp sẽ không bao giờ kết thúc. Hãy đọc thêm về break trong chương tiếp theo.

Câu 3

Thường thì câu 3 sẽ tăng giá trị của biến ban đầu.

Nhưng không phải lúc nào cũng như vậy, JavaScript không quan tâm. Câu 3 cũng là tùy chọn.

Câu 3 có thể làm bất kỳ điều gì, ví dụ như giảm đếm (i--), tăng đếm (i = i + 15), hoặc bất kỳ điều gì khác.

Câu lệnh 3 cũng có thể được bỏ qua (ví dụ khi bạn tăng giá trị trong vòng lặp):

Mô hình

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

Thử ngay

Vòng lặp For/In

JavaScript for/in Câu lệnh lặp qua các thuộc tính của đối tượng:

Mô hình

var person = {fname:"Bill", lname:"Gates", age:62}; 
var text = "";
var x;
for (x in person) {
    text += person[x];
}

Thử ngay

Vòng lặp While

Chúng ta sẽ học về vòng lặp while và vòng lặp do/while trong chương tiếp theo.

sách giáo khoa

Cần thêm thông tin về Câu lệnh for của JavaScriptthông tin, hãy đọc các nội dung liên quan trong giáo trình cao cấp JavaScript:

Câu lệnh迭代 ECMAScript
Câu lệnh迭代 cũng được gọi là câu lệnh lặp. Phần này sẽ giới thiệu cho bạn bốn câu lệnh lặp được cung cấp bởi ECMAScript.