JavaScript For Loop - Vòng lặp For trong JavaScript

by GokiSoft.Com - 12:43 19/05/2020 3,865 Lượt Xem

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ương
for/of - lặp qua cá giá trị của một đối tượng lặp
while - lặp qua một khối code trong khi một điều kiện cụ thể là true
do/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.

Ứ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://gozic.vn

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

Tags:

javascript khoa hoc javascript khóa học javascript tài liệu javascript

Bình luận

Tôi muốn xem code từ thành viên khác

Tài Liệu Tham Khảo

Ứng Dụng Tiện Ích

MD5 Chuyển Đổi Chữ Hoa - UpperCase JSON Editor Coding Online Database Diagram Fake API Base64

Tài Liệu Học

Khai báo biến & hàm mặc định trong Javascript

Mệnh đề điều kiện

Vòng lặp for, while, do..while

Array & Function & Object

Xử lý sự kiện & thao tác thẻ HTML

Lưu trữ Javascript

Examination & Ôn Tập Tổng Quát