JS For loop

16/08/2019

Bài sau » « Bài trước

Sử dụng vòng lặp rất tiện dụng, nếu bạn muốn chạy cùng một đoạn code nhiều lần, mỗi lần có một giá trị khác nhau.

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 />";

Ta dùng vòng lặp để viết lại:

var cars = ["BMW", "Volvo", "Saab", "Ford", "Fiat", "Audi"]; var i, text= ""; for (i = 0; i < cars.length; i++) { text += cars[i] + "<br />"; }

Javascript có các loại vòng lặp như sau:

  • for : Vòng lặp khối code nhiều lần
  • for/in : Vòng lặp các thuộc tính của một đối tượng
  • for/of : Vòng lặp các giá trị của một đối tượng
  • while : Vòng lặp xử lý khi điều kiện vẫn còn đúng
  • do/while : Vòng lặp xử lý khi điều kiện vẫn còn đúng

Vòng lặp For

Cú pháp của vòng lặp for:

for (câu lệnh 1; câu lệnh 2; câu lệnh 3){
// Code xử lý
}

Câu lệnh 1 : Được thực thi (một lần) trước khi thực thi khối code.

Câu lệnh 2 : Xác định điều kiện để thực thi khối code.

Câu lệnh 3 : Được thực thi (mỗi lần) sau khi khối mã được thực thi.

Ví dụ:

for (i = 0; i < 5; i++) { text += "The number is " + i + "<br />"; }

Giải thích ví dụ bên trên như sau:

Câu lệnh 1: Khai báo 1 biến trước khi chạy vòng lặp bắt đầu (var i = 0).

Câu lệnh 2: Xác định điều kiện để vòng lặp thực thi (khi i vẫn nhỏ hơn 5).

Câu lệnh 3: Tăng giá trị i lên 1 đơn vị (i++) sau khi vòng lặp thực thi.

Câu lệnh 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 (i = 0).

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ể khai báo nhiều giá trị trong Câu lệnh 1:

var cars = ["BMW", "Volvo", "Saab", "Ford"]; for (var 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 và khai báo giá trị bắt đầu ở ngoài vòng lặp:

var cars = ["BMW", "Volvo", "Saab", "Ford"]; var i = 2; var len = cars.length; var text = ""; for (; i < len; i++) { text += cars[i] + "<br />"; }

Câu lệnh 2

Câu lệnh 2 dùng để xác định điều kiện của biến ban đầu.

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ề là true, thì vòng lặp sẽ bắt đầu. Nếu câu lệnh 2 trả về là false, thì vòng lặp sẽ kết thúc.

Chú ý: Nếu bạn không khai báo câu lệnh 2, thì bạn phải có câu lệnh break bên trong vòng lặp. Nếu không vòng lặp sẽ không bao giờ kết thúc.

Câu lệnh 3

Thông thường câu lệnh 3 dùng để tăng giá trị của biến ban đầu.

Không phải luôn luôn như vậy, Javascript không quan tâm. Câu lệnh 3 cũng là tùy chọn.

Câu lệnh 3 có thể tăng giá trị (i = i + 10), giảm giá trị (i--) hoặc bất kì.

Bạn cũng có thể bỏ qua câu lệnh 3 (Giá trị được tăng trong vòng lặp)

var cars = ["BMW", "Volvo", "Saab", "Ford"]; var i = 0; var len = cars.length; for (; i < len; ) { // Câu lệnh 3 bỏ trống text += cars[i] + "<br />"; i++; // Giá trị được tăng ở đây }

Vòng lặp for/in

Vòng lặp for/in để lặp các thuộc tính của một đối tượng.

for ( i in object ){
// Code xử lý
}

Ví dụ lặp lần lượt các thuộc tính trong đối tượng person :

var person = {firstname:"John", lastname:"Doe", age:25}; var text = ""; var x; for (x in person) { text += person[x] + "<br />"; }

Vòng lặp for/of

Vòng lặp for/of để lặp các giá trị của một đối tượng.

for/of cho phép bạn lặp qua các cấu trúc dữ liệu có thể lặp lại như Array, String, Maps, NodeLists,...

for ( i of object ){
// Code xử lý
}

Ví dụ lặp Array:

var cars = ['BMW', 'Volvo', 'Mini']; var x; for (x of cars) { document.write(x + "<br />"); } /* Kết quả là: BMW Volvo Mini */

Ví dụ lặp String:

var txt = 'JavaScript'; var x; for (x of txt) { document.write(x + "<br />"); } /* Kết quả là: J a v a S c r i p t */

Bài sau » « Bài trước
Back to top