IMG-LOGO
×

Tài Liệu Học

Khoá học lập trình Javascript

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

[Video] Tạo dự án JS đầu tiên - Lập Trình JS [Video] Khai báo biến - toán tử - Lập Trình JavaScript [Video] Các hàm sẵn có trong js - Khoá Học Lập Trình JS

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

[Video] Cấu trúc điều kiện if else switch - Lập trình Javascript

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

[Video] Tìm hiểu vòng lặp for, while, do .. while trong Javascript

Array & Function & Object

[Video] Tìm hiểu Function trong Javascript [Video] Tìm hiểu Array trong Javascript [Video] Khai báo Object trong Javascript [Video] Gửi giữ liệu qua các trang html bằng javascript - HTML/CSS [Video] Bài tập - ôn tập mảng - quản lý sinh viên - Lập trình Javascript [Video] Khai báo function trong Object - Lập trình Javascript [Video] Tìm hiểu function trong string - Lập trình Javascript

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

[Video] Event - Lập Trình JS [Video] Tương tác lên tags trong HTML bằng JS [Video] Thêm tags vào tags khác bằng javascript + ví du thêm sinh viên - lập trình JS [Video] Tương tác thẻ HTML bằng Javascript qua ví dụ đặt đơn hàng (Order Entry Form) [Video] Bài tập - Quản lý sản phẩm bằng javascript - lập trình javascript [Video] Quản lý sinh viên - Lập trình Javascript

Lưu trữ Javascript

[Video] Cookie - khoá học lập trình JavaScript [Video] Localstorage - Khoá học lập trình JavaScript [Video] Lưu trữ thông tin sinh viên bằng LocalStorage - Lập trình Javascript

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

1000 Bài tập JavaScript - Lập Trình JavaScript




Trang Chủ Học JS JavaScript For Loop - Vòng lặp For trong JavaScript

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

by GokiSoft.Com - 12:43 19/05/2020 2,475 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  constlet, 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.


Bình luận



Chia sẻ từ lớp học

Phân Loại Bài Viết

Tài Liệu Tham Khảo

Đã sao chép!!!