JavaScript cho vòng lặp
Ví dụ
Lặp lại (lặp lại) một khối mã năm lần:
for (let i = 0; i < 5; i++) {
text += i + "<br>";
}
Hãy tự mình thử »Lặp lại (lặp lại) một mảng để thu thập tên ô tô:
const cars = ["BMW", "Volvo", "Saab", "Ford"];
for (let i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
}
Hãy tự mình thử »- Vòng lặp bắt đầu ở vị trí 0 (
let i = 0
). - Vòng lặp tự động tăng
i
cho mỗi lần chạy. - Vòng lặp chạy chừng nào
i < cars.length
.
Thêm ví dụ dưới đây.
Sự miêu tả
Câu lệnh for
xác định một khối mã được thực thi miễn là điều kiện còn true
.
Ghi chú
Nếu bạn bỏ qua câu lệnh 2, 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.Xem thêm:
Cú pháp
for (statement 1; statement 2; statement 3) {
code block to be executed
}
Thông số
Parameter | Description |
statement 1 | Optional. Executed before the code block starts. Normally used to initialize a counter variable. To initiate multiple values, separate each value with a comma. This parameter can be omitted, but not the semicolon ";" |
statement 2 | Optional. The condition for running the code block. If it returns true the loop will start over again, otherwise the loop will end.This parameter can be omitted, but not the semicolon ";" |
statement 3 | Optional. Executed after the code block. Normally used to increment the counter variable. This parameter can be omitted (e.g. to increase/decrease values inside the loop) |
Câu lệnh vòng lặp JavaScript
Tuyên bố | Sự miêu tả | |
phá vỡ | Thoát khỏi vòng lặp | |
Tiếp tục | Bỏ qua một giá trị trong vòng lặp | |
trong khi | Lặp lại một khối mã khi điều kiện đúng | |
làm trong khi | Lặp lại một khối mã một lần và sau đó khi điều kiện còn đúng | |
vì | Lặp lại một khối mã khi điều kiện đúng | |
cho...của | Lặp lại các giá trị của bất kỳ lần lặp nào | |
tại | Lặp lại các thuộc tính của một đối tượng |
Thêm ví dụ
Bắt đầu nhiều giá trị trong tham số đầu tiên:
const cars = ["BMW", "Volvo", "Saab", "Ford"];
for (let i = 0, len = cars.length, text = ""; i < len; i++) {
text += cars[i] + "<br>";
}
Hãy tự mình thử »Bỏ qua các tham số đầu tiên (đặt giá trị trước khi vòng lặp bắt đầu):
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 2;
let len = cars.length;
let text = "";
for (; i < len; i++) {
text += cars[i] + "<br>";
}
Hãy tự mình thử » Sử dụng continue
- Lặp qua một khối mã nhưng bỏ qua giá trị 3:
let text = "";
for (let i = 0; i < 5; i++) {
if (i == 3) continue;
text += i + "<br>";
}
Hãy tự mình thử » Sử dụng break
- Lặp lại một khối mã nhưng thoát khỏi vòng lặp khi i == 3
:
let text = "";
for (let i = 0; i < 5; i++) {
if (i == 3) break;
text += i + "<br>";
}
Hãy tự mình thử »Bỏ qua tham số thứ hai.
Sử dụng break
để thoát khỏi 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ẽ bị lỗi:
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let text = "";
for (let i = 0; ; i++) {
if (i == cars-length) break;
text += cars[i] + "<br>";
}
Hãy tự mình thử »Lặp lại một mảng theo thứ tự giảm dần (tăng âm):
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let text = "";
for (let i = cars.length - 1; i >= 0; i--) {
text += cars[i] + "<br>";
}
Hãy tự mình thử »Bỏ qua tham số cuối cùng và tăng các giá trị bên trong vòng lặp:
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 0;
let len = cars.length;
for (; i < len;) {
text += cars[i] + "<br>";
i++;
}
Hãy tự mình thử »Lặp lại NodeList và thay đổi màu của tất cả các phần tử p trong danh sách:
const myNodelist = document.getElementsByTagName("P");
for (let i = 0; i < myNodelist.length; i++) {
myNodelist[i].style.color = "blue";
}
Hãy tự mình thử »Vòng lặp lồng nhau (vòng lặp bên trong vòng lặp):
let text = "";
for (let = 0; i < 3; i++) {
text += i + "<br>";
for (let j = 10; j < 15; j++) {
text += j + "<br>";
}
}
Hãy tự mình thử »Hỗ trợ trình duyệt
for
là một tính năng ECMAScript1 (ES1).
ES1 (JavaScript 1997) được hỗ trợ đầy đủ trên tất cả các trình duyệt:
Chrome | Edge | Firefox | Safari | Opera | IE |
Yes | Yes | Yes | Yes | Yes | Yes |