JavaScript For Loop - Vòng lặp For trong JavaScript
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 trong JavaScript
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:
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
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>
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 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à true
Vòng lặp For
Vò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.
ví dụ
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.
Statement 1
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):
ví dụ
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):
ví dụ
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>Statement 2
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.
Statement 3
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).
ví dụ
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>
Vòng lặp For/In
Câu lệnh for/in JavaScript lặp qua các thuộc tính của một đối tượng:
ví dụ
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>Vòng lặp For/Of
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.
Lặp qua một mảng
ví dụ
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>
Lặp qua một chuỗi
ví dụ
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òng lặp while và do/while sẽ được giải thích trong chương sau.
Tags: