JavaScript cho vòng lặp
Các vòng lặp có thể thực thi một khối mã nhiều lần.
Vòng lặp JavaScript
Các vòng lặp rất tiện dụng, nếu bạn muốn chạy đi chạy lại cùng một mã, 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:
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 (let i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
}
Các loại vòng lặp khác nhau
JavaScript hỗ trợ các loại vòng lặp khác nhau:
for
- lặp qua một khối mã nhiều lầnfor/in
- lặp qua các thuộc tính của một đối tượngfor/of
- lặp qua các giá trị của một đối tượng có thể lặp lạiwhile
- lặp qua một khối mã trong khi một điều kiện được chỉ định là đúngdo/while
- cũng lặp lại qua một khối mã trong khi một điều kiện được chỉ định là đúng
Vòng lặp For
Vòng for
lặp có cú pháp sau:
for (statement 1; statement 2; statement 3) {
// code block to be executed
}
Câu lệnh 1 được thực hiện (một lần) trước khi khối mã thực thi.
Câu lệnh 2 xác định điều kiện để thực thi khối mã.
Câu lệnh 3 được thực hiện (mọi lúc) sau khi khối mã đã được thực hiện.
Thí dụ
for (let i = 0; i < 5; i++) {
text += "The number is " + i + "<br>";
}
Từ ví dụ trên, bạn có thể đọc:
Câu lệnh 1 đặt một biến trước khi vòng lặp bắt đầu (cho i = 0).
Câu lệnh 2 xác định điều kiện để vòng lặp chạy (i phải nhỏ hơn 5).
Câu lệnh 3 tăng một giá trị (i ++) mỗi khi khối mã trong vòng lặp được thực thi.
Tuyên bố 1
Thông thường bạn sẽ sử dụng câu lệnh 1 để khởi tạo biến được sử dụng trong vòng lặp (let i = 0).
Điều này không phải luôn luôn như vậy, JavaScript không quan tâm. Câu lệnh 1 là tùy chọn.
Bạn có thể bắt đầu nhiều giá trị trong câu lệnh 1 (phân tách bằng dấu phẩy):
Thí dụ
for (let i = 0, len = cars.length, text = ""; i < len; i++) {
text += cars[i] + "<br>";
}
Và bạn có thể bỏ qua câu lệnh 1 (như khi các giá trị của bạn được đặt trước khi bắt đầu vòng lặp):
Thí dụ
let i = 2;
let len = cars.length;
let text = "";
for (; i < len; i++) {
text += cars[i] + "<br>";
}
Tuyên bố 2
Thường thì câu lệnh 2 được sử dụng để đánh giá điều kiện của biến ban đầu.
Điều này không phải luôn luôn như vậy, JavaScript không quan tâm. Câu lệnh 2 cũng là tùy chọn.
Nếu câu lệnh 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 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. Đọc về các khoảng nghỉ trong chương sau của hướng dẫn này.
Tuyên bố 3
Thường thì câu lệnh 3 tăng giá trị của biến ban đầu.
Điều này không phải lúc nào cũng đúng, JavaScript không quan tâm và câu lệnh 3 là tùy chọn.
Câu lệnh 3 có thể thực hiện bất kỳ điều gì như tăng âm (i--), tăng dương (i = i + 15) hoặc bất kỳ điều gì khác.
Câu lệnh 3 cũng có thể bị bỏ qua (như khi bạn tăng các giá trị của mình bên trong vòng lặp):
Thí dụ
let i = 0;
let len = cars.length;
let text = "";
for (; i < len; ) {
text += cars[i] + "<br>";
i++;
}
Phạm vi vòng lặp
Sử dụng var
trong một vòng lặp:
Thí dụ
var i = 5;
for (var i = 0; i < 10; i++) {
// some code
}
// Here i is 10
Sử dụng let
trong một vòng lặp:
Thí dụ
let i = 5;
for (let i = 0; i < 10; i++) {
// some code
}
// Here i is 5
Trong ví dụ đầu tiên, 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.
Vòng lặp For / Of và For / In
Vòng for/in
lặp và for/of
vòng lặp được giải thích trong chương tiếp theo.
Vòng lặp trong khi
Vòng while
lặp và vòng lặp do/while
được giải thích trong các chương tiếp theo.