Các vòng lặp có thể thực thi các khối code một số lần.
Các vòng lặp khá tiện dụng, nếu bạn muốn chạy một code giống nhau hết lần này đến lần khác, mỗi lần với một giá trị khác nhau.
Thường thì đây là trường hợp làm việc với các mảng:
text += cars[0] + "<br>";
text += cars[1] + "<br>";
text += cars[2] + "<br>";
text += cars[3] + "<br>";
text += cars[4] + "<br>";
text += cars[5] + "<br>";
var i;
for (i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
}
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript For Loop</h2>
<p id="demo"></p>
<script>
var cars = ["BMW", "Volvo", "Saab", "Ford", "Fiat", "Audi"];
var text = "";
var i;
for (i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
JavaScript hỗ trợ các loại vòng lặp khác nhau:
for
- lặp qua một khối code với một số lần xác định.for/in
- lặp qua các thuộc tính của một đối tươngfor/of
- lặp qua cá giá trị của một đối tượng lặpwhile
- lặp qua một khối code trong khi một điều kiện cụ thể là truedo/while
- cũng lặp qua một khối code trong khi điều kiện cụ thể là trueVòng lặp for
có cú pháp sau:
for (statement 1; statement 2; statement 3) {
// code block to be executed
}
Statement 1 được thực thi (một lần) trước sự thực thi của khối code.
Statement 2 xác định điều kiện cho việc thực thi khối code.
Statement 3 được thực thi (mỗi lần) sau kho khối code đã được thực thi.
for (i = 0; i < 5; i++) {
text += "The number is " + i + "<br>";
}
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript For Loop</h2>
<p id="demo"></p>
<script>
var text = "";
var i;
for (i = 0; i < 5; i++) {
text += "The number is " + i + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Từ ví dụ trên, bạn có thể đọc:
Statement 1 đặt giá trị trước khi vòng lặp bắt đầu (var i = 0).
Statement 2 xác định điều kiện cho vòng lặp chạy (i phải bé hơn 5).
Statement 3 tăng một giá trị (i++) mỗi lần khối code trong vòng lặp được thực thi.
Bình thường bạn sẽ sử dụng statement 1 để khởi tạo biến sử dụng trong vòng lặp (i = 0).
Đây không phải luôn là như vậy, JavaScript không quan tâm. Statement 1 là tùy chọn.
Bạn có thể cài đặt nhiều giá trị trong satement 1 (phân cách bằng dấu phẩy):
for (i = 0, len = cars.length, text = ""; i < len; i++) {
text += cars[i] + "<br>";
}
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript For Loop</h2>
<p id="demo"></p>
<script>
var cars = ["BMW", "Volvo", "Saab", "Ford"];
var i, len, text;
for (i = 0, len = cars.length, text = ""; i < len; i++) {
text += cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Và bạn có thể bỏ qua statement 1 (như khi các giá trị của bạn được đặt trước khi vòng lặp bắt đầu):
var i = 2;
var len = cars.length;
var text = "";
for (; i < len; i++) {
text += cars[i] + "<br>";
}
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript For Loop</h2>
<p id="demo"></p>
<script>
var cars = ["BMW", "Volvo", "Saab", "Ford"];
var i = 2;
var len = cars.length;
var text = "";
for (; i < len; i++) {
text += cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Thường statement 2 được dùng để ước tính điều kiện của biến ban đầu.
Không phải luôn là như vậy. JavaScript không quan tâm. Statement 2 cũng là một tùy chọn.
Nếu statement 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.
Tip: Nếu bạn bỏ qua statement 2, bạn phải break. Nếu không vòng lặp sẽ vô hạn. Nó sẽ phá hoại trình duyệt của bạn. Đọc về break trong một chương sau.
Thường statement 3 tăng giá trị của biến gốc.
Nhưng nó không luôn là như vậy, JavaScript không quan tâm, và statement 3 là tùy chọn.
Statement 3 có thể làm một thứ như tăng giá trị âm (i--), tăng giá trị dương (i= i +15), hoặc bất kì cái gì khác.
Statement 3 cũng có thể bỏ qua (bạn có thể tăng giá trị của bạn ở bên trong vòng lặp).
var i = 0;
var len = cars.length;
for (; i < len; ) {
text += cars[i] + "<br>";
i++;
}
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var cars = ["BMW", "Volvo", "Saab", "Ford"];
var i = 0;
var len = cars.length;
var text = "";
for (; i < len; ) {
text += cars[i] + "<br>";
i++;
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Câu lệnh for/in
JavaScript lặp qua các thuộc tính của một đối tượng:
var person = {fname:"John", lname:"Doe", age:25};
var text = "";
var x;
for (x in person) {
text += person[x];
}
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript For/In Loop</h2>
<p>The for/in statement loops through the properties of an object.</p>
<p id="demo"></p>
<script>
var txt = "";
var person = {fname:"John", lname:"Doe", age:25};
var x;
for (x in person) {
txt += person[x] + " ";
}
document.getElementById("demo").innerHTML = txt;
</script>
</body>
</html>
Câu lệnh for/of
lặp qua các giá trị của một đối tượng lặp for/of
để bạn lặp qua các cấu trúc dữ liệu có thể lặp như Mảng, Chuỗi, Maps, NodeLists, và nhiều hơn.
Vòng lặp for/of
có các cú pháp sau:
for (variable of iterable) {
// code block to be executed
}
biến(variable) - Đối với mỗi lần lặp giá trị của thuộc tính tiếp theo được gán với biến. Các biến có thể được khai báo với const
, let
, hoặc var
.
lặp(iterable) - một đối tượng có các thuộc tính lặp.
var cars = ['BMW', 'Volvo', 'Mini'];
var x;
for (x of cars) {
document.write(x + "<br >");
}
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript For/Of Loop</h2>
<p>The for/of statement loops through the values of an iterable object.</p>
<script>
var cars = ['BMW', 'Volvo', 'Mini'];
var x;
for (x of cars) {
document.write(x + "<br >");
}
</script>
</body>
</html>
var txt = 'JavaScript';
var x;
for (x of txt) {
document.write(x + "<br >");
}
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript For/Of Loop</h2>
<p>The for/of statement loops through the values of an iterable object.</p>
<script>
var txt = 'JavaScript';
var x;
for (x of txt) {
document.write(x + "<br >");
}
</script>
</body>
</html>
Vòng lặp while
và do/while
sẽ được giải thích trong chương sau.
Ứng Dụng Học
Theo dõi cập nhật nội dung học trên Youtube & Facebook
Thông Tin Liên Hệ
Công Ty Cổ Phần Phát Triển Công Nghệ Gozic.
Website: https://ziczacvn.com
SĐT: 096 - 70 25 996
Email: ziczacgroup@gmail.com
Thiết kế webiste chuyên nghiệp
Thiết kế phần mềm quản trị
Thiết kế ứng dụng Android
Thiết kế ứng dụng IOS
Thiết kế Web App
Hỗ trợ Digital Marketing
Hỗ trợ quảng cáo Google Ads
Hỗ trợ quảng cáo Facebook Ads
Hỗ trợ SEO Website