Vòng lặp có tác dụng thực thi khối code với một số lần nhất định.
Vòng lặp rất tiện dụng nếu bạn muốn chạy cùng đoạn code nhiều lần, mỗi lần với một giá trị khác nhau.
Thường thì đây là trường hợp khi làm việc với mảng (arrays):
Thay vì viết:
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:
for (i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
}Một số kiểu khác nhau của vòng lặp loop
JavaScript hỗ trợ một số kiểu khác nhau của vòng lặp loop:
-
for– lặp một khối code với một số lần nhất định -
for/in– lặp thông qua các thuộc tính của một đối tượng -
while– lặp một khối code khi điều kiện chỉ định vẫn đúng -
do/while– cũng tương tự, lặp một khối code khi điều kiện chỉ định còn đúng, về điểm khác biệt chúng ta sẽ xem xét sau
Vòng lặp For
Vòng lặp for thường là công cụ bạn sẽ dùng khi bạn muốn tạo vòng lặp.
Vòng lặp for có cú pháp sau:
for (statement 1; statement 2; statement 3) {
// khối code được thực thi ở đây
}Câu lệnh 1 / statement 1 được thực thi (môt lần) trước khi vòng lặp (khối code) bắt đầu.
Câu lệnh 2 / statement 2 định nghĩa điều kiện để chạy vòng lặp (khối code).
Câu lệnh 3 / statement 3 được thực thi (mọi lần) sau khi vòng lặp (khối code) được thực thi.
Ví dụ:
for (let i = 0; i < 5; i++) {
text += "Số báo danh" + i + "<br>";
}Từ ví dụ trên, bạn có thể thấy:
Câu lệnh 1 thiết lập biến trước khi vòng lặp bắt đầu (let i = 0).
Câu lệnh 2 định nghĩa điều kiện cho vòng lặp chạy (i phải nhỏ hơn 5).
Câu lệnh 3 tăng giá trị của i lên một đơn vị (i++) mỗi lần khối code được thực thi.
Câu lệnh 1
Bình thường bạn sẽ sử dụng câu lệnh 1 để tạo giá trị khởi đầu của biến được sử dụng trong vòng lặp (let i = 0).
Nhưng không phải lúc nào cũng như thế, JavaScript không quan tâm đến chuyện này. Câu lệnh 1 là tuỳ chọn và thường dùng mà thôi.
Bạn có thể tạo nhiều giá trị khởi đầu trong câu lệnh 1 (được phân chia bằng dấu phẩy):
Ví dụ
for (i = 0, len = cars.length, text = ""; i < len; i++) {
text += cars[i] + "<br>";
}Và bạn có thể bỏ quả câu lệnh 1 (chẳng hạn như khi giá trị của bạn được thiết lập trước khi vòng lặp bắt đầu):
Ví dụ
var i = 2;
var len = cars.length;
var text = "";
for (; i < len; i++) {
text += cars[i] + "<br>";
}Câu lệnh 2
Thường câu lệnh 2 hay được dùng để đánh giá điều kiện của biến khởi tạo.
Nhưng không phải lúc nào cũng như thế, JavaScript không quan tâm. Câu lệnh 2 là tuỳ chọn.
Nếu câu lệnh 2 trả về kết quả true, vòng lặp sẽ khởi động lại lần nữa, nếu nó trả về kết quả false, vòng lặp sẽ kết thúc.
Nếu bạn bỏ qua câu lệnh 2, bạn phải cung cấp cách thức nào đó để bẻ gãy (kết thúc) vòng lặp. Nếu không vòng lặp sẽ không bao giờ dừng lại. Điều này sẽ làm trình duyệt của bạn bị “đơ” (crash). Chúng tôi có những bài viết khác về cách thức bẻ gãy vòng lặp mà bạn có thể tham khảo.
Câu lệnh 3
Thường câu lệnh 3 được dùng để tăng giá trị khởi tạo.
Nhưng không phải lúc nào cũng như thế, JavaScript không quan tâm. Câu lệnh 3 là tuỳ chọn.
Câu lệnh 3 có thể thực hiện bất cứ điều gì như giảm đi một giá trị (i–), tăng thêm giá trị (i = i +15), hoặc bất cứ điều gì khác.
Câu lệnh 3 có thể được bỏ qua (chẳng hạn khi bạn tăng giá trị bên trong vòng lặp rồi):
Ví dụ:
var i = 0;
var len = cars.length;
for (; i < len; ) {
text += cars[i] + "<br>";
i++;
}Vòng lặp For/In
Câu lệnh for/in trong vòng lặp JavaScript thông qua thuộc tính của đối tượng:
Ví dụ:
var person = {fname:"Đức Anh", lname:"Nguyễn", age:30};
var text = "";
var x;
for (x in person) {
text += person[x];
}Vòng lặp While
Vòng lặp while và do/while sẽ được giải thích trong bài khác bạn nhé.