Câu lệnh for trong JavaScript

Định nghĩa và cách sử dụng

Câu lệnh for tạo ra vòng lặp và sẽ thực thi vòng lặp đó khi điều kiện còn đúng.

Vòng lặp sẽ tiếp tục chạy khi điều kiện còn đúng. Nó chỉ dừng lại khi điều kiện trở thành sai.

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

  • for - lặp lại mã khối nhiều lần
  • for/in - duyệt qua các thuộc tính của đối tượng
  • for/of - Lặp qua các giá trị của đối tượng có thể lặp lại
  • while - Lặp lại mã khối khi điều kiện được chỉ định là true
  • do/while - Thực hiện một mã khối, sau đó lặp lại vòng lặp khi điều kiện được chỉ định là true

Lưu ý:Sử dụng câu lệnh break để thoát khỏi vòng lặp, sử dụng câu lệnh continue để bỏ qua một giá trị nào đó trong vòng lặp.

Mô hình

Thực hiện mã khối vòng lặp 5 lần:

var text = "";
var i;
for (i = 0; i < 5; i++) {
  text += "The number is " + i + "<br>";
}

Thử ngay

Có nhiều ví dụ TIY hơn ở dưới trang.

Ngữ pháp

for (statement 1; statement 2; statement 3) {
  Khối mã cần thực hiện
}

Giá trị tham số

Tham số Mô tả
statement1

Tùy chọn. Thực hiện trước khi bắt đầu vòng lặp (mã khối). Thường được sử dụng để khởi tạo biến đếm. Nếu cần khởi tạo nhiều giá trị, hãy phân cách từng giá trị bằng dấu phẩy.

Chú thích:Tham số này có thể bỏ qua. Nhưng đừng bỏ qua dấu chấm phẩy ";"
statement2

Tùy chọn. Định nghĩa điều kiện chạy vòng lặp (mã khối). Thường được sử dụng để đánh giá điều kiện của biến đếm. Nếu trả về true, vòng lặp sẽ bắt đầu lại, nếu trả về false, vòng lặp sẽ kết thúc.

Chú thích:Tham số này có thể bỏ qua. Nhưng đừng bỏ qua dấu chấm phẩy ";". Ngoài ra, nếu bỏ qua tham số này, thì phải cung cấp break 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 cho trình duyệt của bạn sụp đổ.
statement3

Tùy chọn. Thực hiện sau mỗi lần thực hiện vòng lặp (mã khối). Thường được sử dụng để tăng/giảm biến đếm.

Chú thích:Tham số này có thể bỏ qua (ví dụ như tăng/giảm giá trị trong vòng lặp).

Chi tiết kỹ thuật

Phiên bản JavaScript: ECMAScript 1

Các ví dụ thêm

Mô hình

Vòng lặp duyệt các chỉ số của mảng, thu thập tên ôtô từ mảng cars:

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var text = "";
var i;
for (i = 0; i < cars.length; i++) {
  text += cars[i] + "<br>";
}

Thử ngay

Giải thích ví dụ:

  • Trước hết, chúng ta đặt một biến trước khi bắt đầu vòng lặp (var i = 0;)
  • Sau đó, chúng ta định nghĩa điều kiện chạy vòng lặp. Chỉ khi biến nhỏ hơn dài độ của mảng (tức là 4), vòng lặp sẽ tiếp tục
  • Mỗi lần thực hiện vòng lặp, biến tăng lên một (i++)
  • Khi biến không còn nhỏ hơn 4 (dài độ của mảng), điều kiện giả, vòng lặp kết thúc

Mô hình

Khởi tạo nhiều giá trị trong tham số đầu tiên:

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

Thử ngay

Mô hình

Bỏ qua tham số đầu tiên (đặt giá trị trước khi bắt đầu vòng lặp):

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

Thử ngay

Mô hình

Sử dụng câu lệnh continue - Thực hiện mã khối vòng lặp nhưng bỏ qua giá trị "3":

var text = ""
var i;
for (i = 0; i < 5; i++) {
  if (i == 3) {
    continue;
  }
  text += "The number is " + i + "<br>";
}

Thử ngay

Mô hình

Sử dụng câu lệnh break - thực hiện đoạn mã, nhưng thoát khỏi vòng lặp khi biến i bằng "3":

var text = ""
var i;
for (i = 0; i < 5; i++) {
  if (i == 3) {
    break;
  }
  text += "The number is " + i + "<br>";
}

Thử ngay

Mô hình

Bỏ qua tham số thứ hai. Trong ví dụ này, chúng ta cũng sử dụng câu lệnh break để thoát khỏi vòng lặp khi i bằng "3" (nếu bỏ qua tham số thứ hai, thì phải cung cấp break trong vòng lặp. Nếu không, vòng lặp sẽ không bao giờ kết thúc và trình duyệt của bạn sẽ sụp đổ):

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var text = "";
var i;
for (i = 0; ; i++) {
  if (i == 3) {
    break;
  }
  text += cars[i] + "<br>";
}

Thử ngay

Mô hình

Duyệt qua các chỉ số của mảng theo thứ tự giảm dần (tăng giá trị âm):

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var text = "";
var i;
for (i = cars.length - 1; i >= 0; i--) {
  text += cars[i] + "<br>";
}

Thử ngay

Mô hình

Bỏ qua tham số cuối cùng và tăng giá trị trong vòng lặp:

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

Thử ngay

Mô hình

Duyệt qua các nút của đối tượng NodeList và thay đổi màu nền của tất cả các thẻ <p> trong danh sách:

var myNodelist = document.getElementsByTagName("P");
var i;
for (i = 0; i < myNodelist.length; i++) {
  myNodelist[i].style.backgroundColor = "red";
}

Thử ngay

Mô hình

Ví dụ về vòng lặp đệm (vòng lặp trong vòng lặp):

var text = "";
var i, j;
for (i = 0; i < 3; i++) {
  text += "<br>" + "i = " + i + ", j = "; 
  for (j = 10; j < 15; j++) {
    document.getElementById("demo").innerHTML = text += j + " ";
  }
}

Thử ngay

Hỗ trợ trình duyệt

Câu lệnh Chrome IE Firefox Safari Opera
cho Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ

Các trang liên quan

Giáo trình JavaScript:Vòng lặp For của JavaScript

Tài liệu tham khảo JavaScript:Câu lệnh for ... in của JavaScript

Tài liệu tham khảo JavaScript:Câu lệnh break của JavaScript

Tài liệu tham khảo JavaScript:Câu lệnh continue của JavaScript

Tài liệu tham khảo JavaScript:Câu lệnh while của JavaScript