Các loại vòng lặp trong Javascript căn bản

Ở bài viết này, mình sẽ đi qua các cách tạo vòng lặp Javascript căn bản thường được sử dụng. Nếu nắm vững kiến thức về vòng lặp Javascript, bạn sẽ làm việc hiệu quả và có nhiều lựa chọn hơn khi cần sử dụng đến vòng lặp.

>>Xem thêm: “Thiết kế web chuyên nghiệp hơn với phong cách Retro”

For và While cơ bản

Vòng lặp for và vòng lặp while. Cả 2 đều bao gồm 2 thành phần: điều kiện để duy trì vòng lặp, và thân vòng lặp chứa các thao tác sẽ được lặp. Khi điều kiện để duy trì không còn đúng đắn nữa, vòng lặp sẽ kết thúc.

Cac loai vong lap javascript can ban hinh anh 1 Một lưu ý khi sử dụng vòng lặp For là ta không nên lười như thế này:

// Không sử dụng 1 biến khác để lưu trữ độ dài mảng // Mà sử dụng trực tiếp thuộc tính .length

for (i=0; i < arr.length; ++i) { ... }

Thao tác này là không tốt, vì gây tốn tài nguyên không đáng có. Khi một vòng lặp kết thúc, biểu thứci < arr.length sẽ được đánh giá lại và biến arr phải tính toán lại chiều dài của cả mảng để có thể trả vềarr.length.

Cac loai vong lap javascript can ban hinh anh 2

Vòng lặp For..in

Vòng lặp For..in tương tự như vòng lặp For cơ bản, nhưng có 1 điểm quan trọng là For..in có thể được dùng cho 1 biến kiểu đối tượng.

Cac loai vong lap javascript can ban hinh anh 3

// Vòng lặp for..in cho 1 Mảng var arr = ['JS','loop','for..in']; for ( var i in arr ) { // Thân vòng lặp console.log(arr[i]); }

// Vòng lặp for..in cho 1 Object var obj = { 'name': 'test object', 'type': 'test', 'id': 12888 }; for ( var i in obj ) { // Thân vòng lặp console.log(obj[i]); }

Vòng lặp Do..while

Ở vòng lặp While, biểu thức so sánh sẽ được đánh giá trước. Nếu như biểu thức đúng thì khối lệnh bên trong mới được thực hiện. Do..while hoạt động khác với While ở 1 điểm: khối lệnh sẽ được chạy trước biểu thức so sánh.

Cac loai vong lap javascript can ban hinh anh 4

var arr = ['JS', 'Loop', 'Do..while']; var arrLen = arr.length; var i = 0; do { console.log(arr[i]); ++i; } while (i < arrLen);

// Ví dụ thêm khi i = 3 (do đó i < arrLen sẽ trả về false) // Với Do..while: bạn sẽ thấy "Lúc này i = 3" do { console.log('Lúc này i = ' + i); } while (i < arrLen);

// Với While: sẽ không có gì hiện lên while (i < arrLen) { console.log('Lúc này i = ' + i); }

Vòng lặp forEach

forEach mới xuất hiện trong những phiên bản Javascript gần đây cho các trình duyệt hiện đại, giúp tạo vòng lặp với mảng nhanh hơn.

Cac loai vong lap javascript can ban hinh anh 5

Vòng lặp với jQuery

Đây có lẽ là thao tác quen thuộc đối với những bạn hay dùng jQuery. jQuery.each() khá tiện về cú pháp, và có thể thao tác cả với mảng và đối tượng.

Cac loai vong lap javascript can ban hinh anh 6

Lưu ý khi sử dụng vòng lặp Javascript

1. Khi sử dụng vòng lặp, nếu sơ ý sẽ dễ gây tốn tài nguyên không cần thiết, làm cho cả ứng dụng hay website cũng ì ạch theo, thậm chí tệ nhất là lặp đến vô hạn vì điều kiện dừng không đảm bảo.

2. Mỗi loại vòng lặp sẽ có ưu và nhược điểm riêng, do đó hãy xem xét lại tổ chức code và nhu cầu của bạn để quyết định kĩ.

3. Tốc độ xử lý của các loại vòng lặp Javascript là khác nhau, trong đó nhanh nhất là vòng lặp While và chậm nhất là For..in.

Với một số giới thiệu về các vòng lặp của Javascript căn bản hy vọng sẽ giúp các bạn trong việc lập trình.

Xem thêm:

Học viện Haravan - Chia sẻ kiến thức kinh doanh online đa kênh

Ebook miễn phí

Ebook miễn phí

Bí kíp thiết kế website bán hàng Từ A-Z cho mọi chủ shop

Đăng ký tải ngay Ebook

Bài viết liên quan: