5 Loại Vòng lặp trong JavaScript

Trong bài viết này các bạn sẽ học được viết chương trình để lặp lại một hành động cụ thể bằng Vòng lặp trong JavaScript.

5 Loại vòng lặp của JavaScript

5 loại vòng lặp trong JavaScript

Các vòng lặp được sử dụng để thực thi cùng một khối mã lặp đi lặp lại, miễn là một điều kiện nhất định được đáp ứng.

Ý tưởng cơ bản đằng sau một vòng lặp là:

• Tự động hóa các nhiệm vụ lặp đi lặp lại trong một chương trình để tiết kiệm thời gian và công sức.

JavaScript hiện hỗ trợ 5 loại vòng lặp khác nhau:

+ while - vòng lặp while lặp lại một khối mã miễn là điều kiện được chỉ định đánh giá là đúng.

+ do...while - vòng lặp do...while lặp khối mã một lần. Sau đó đánh giá điều kiện. Nếu điều kiện là đúng, lặp lại khối mã miễn là điều kiện là đúng.

+ for - vòng lặp thông qua một khối mã cho đến khi bộ đếm đạt đến một số được chỉ định.

+ for...in - Vòng lặp for...in lặp qua thuộc tính của một đối tượng.

+ for...of - Vòng lặp for...of lặp các đối tượng có thể lặp như mảng, chuỗi, v.v.

Trong các phần sau, chúng ta sẽ thảo luận chi tiết từng câu lệnh lặp trong Javascript.

> Các loại vòng lặp trong PHP hay Java cũng có chung concept là lặp lại một khối mã để tối ưu hóa code.

#1. Vòng lặp while trong JavaScript

Vòng lặp while là câu lệnh lặp đơn giản nhất được cung cấp bởi JavaScript.

+ Vòng lặp while lặp qua một khối mã miễn là điều kiện được chỉ định đánh giá là đúng.

+ Ngay khi điều kiện thất bại, vòng lặp dừng lại.

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

while(Điều kiện) {
    // Mã thực thi
}

Ví dụ sử dụng vòng lặp while

Ví dụ sau định nghĩa một vòng lặp while, vòng lặp này sẽ tiếp tục chạy miễn là biến i nhỏ hơn hoặc bằng 5.

Biến i sẽ tăng thêm 1 mỗi lần vòng lặp chạy:

var i = 1;
while(i <= 5) {    
    document.write("<p>Số i là: " + i + "</p>");
    i++;
}

Lưu ý: Đảm bảo rằng điều kiện được chỉ định trong vòng lặp của bạn cuối cùng sẽ sai. Nếu bạn không thiết lập điều kiện để sai. Vòng lặp while sẽ không dừng lại (lặp vô hạn). Một lỗi phổ biến là quên tăng biến đếm (biến i sau mỗi lần lặp).

Kết quả:

Số i là: 1
Số i là: 2
Số i là: 3
Số i là: 4
Số i là: 5

#2. Vòng lặp do...while trong JavaScript

Vòng lặp do-while là một biến thể của vòng lặp while, đánh giá điều kiện ở cuối mỗi lần lặp của vòng lặp.

Với vòng lặp do-while:

+ Khối mã được thực thi một lần.

+ Sau đó đánh giá điều kiện, nếu điều kiện là đúng, câu lệnh được lặp lại miễn là điều kiện được chỉ định được đánh giá là đúng.

Cú pháp của vòng lặp do-while là:

do {
    // Mã thực thi
}
while(Điều kiện);

Ví dụ sử dụng vòng lặp do-while

Đoạn mã JavaScript trong ví dụ sau định nghĩa một vòng lặp bắt đầu bằng i = 1.

Sau đó, nó sẽ in kết quả và tăng giá trị của biến i lên 1.

Sau đó, điều kiện được ước tính và vòng lặp sẽ tiếp tục chạy miễn là biến i nhỏ hơn hoặc bằng 5.

var i = 1;
do {
    document.write("<p>Số i là: " + i + "</p>");
    i++;
}
while(i <= 5);

Kết quả:

Số i là: 1
Số i là: 2
Số i là: 3
Số i là: 4
Số i là: 5

Bạn có thấy kết quả của 2 chương trình vừa rồi giống nhau không?

Vậy,...

Sự khác biệt giữa vòng lặp while và vòng lặp do ... while là gì?

Vòng lặp while khác với vòng lặp do-while theo như sau:

Với vòng lặp while, điều kiện cần đánh giá được kiểm tra ở đầu mỗi vòng lặp.

Do đó, nếu biểu thức điều kiện ước lượng thành false, vòng lặp sẽ không bao giờ được thực thi.

Mặt khác, với vòng lặp do-while, vòng lặp sẽ luôn được thực thi một lần ngay cả khi biểu thức điều kiện ước tính thành false.

Vì không giống như vòng lặp while, điều kiện được đánh giá ở cuối vòng lặp thay vì trước khi bắt đầu lặp.

#3. Vòng lặp for trong JavaScript

Vòng lặp for trong JS lặp lại một khối mã miễn là một điều kiện nhất định được đáp ứng.

Nó thường được sử dụng để thực thi một khối mã trong một số lần nhất định (bạn đã biết trước số lần lặp này).

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

for(initialization; condition; increment) {
    // Code to be executed
}

Các tham số của câu lệnh for có ý nghĩa sau:

+ initialization - khởi tạo, nó được sử dụng để khởi tạo các biến đếm và được đánh giá một lần vô điều kiện trước khi thực hiện đầu tiên của phần thân của vòng lặp.

+ condition - điều kiện, nó được đánh giá ở đầu mỗi lần lặp. Nếu nó đánh giá là đúng, các câu lệnh lặp thực thi. Nếu nó ước tính thành false, việc thực hiện vòng lặp kết thúc.

+ increment - nó cập nhật bộ đếm vòng lặp với một giá trị mới mỗi khi vòng lặp chạy.

Ví dụ về vòng lặp for trong JS

Ví dụ sau định nghĩa một vòng lặp bắt đầu bằng i = 1.

Vòng lặp sẽ tiếp tục cho đến khi giá trị của biến i nhỏ hơn hoặc bằng 5.

Biến i sẽ tăng thêm 1 mỗi lần vòng lặp chạy:

for(var i = 1; i <= 5; i++) {
    document.write("<p>Số i là: " + i + "</p>");
}

Kết quả:

Số i là: 1
Số i là: 2
Số i là: 3
Số i là: 4
Số i là: 5

Vòng lặp for đặc biệt hữu ích cho việc lặp qua một mảng trong JavaScript.

Ví dụ sau sẽ chỉ cho bạn cách in từng item hoặc phần tử của mảng JavaScript.

// Một mảng trong JavaScript
var hoaQua= ["Táo", "Chuối", "Xoài", "Cam", "Lựu"];
 
// Lặp qua các phần tử trong mảng
for(var i = 0; i < hoaQua.length; i++) {
    document.write("<p>" + hoaQua[i] + "</p>");
}

Kết quả:

Táo
Chuối
Xoài
Cam
Lựu

#4. Vòng lặp for...in trong JavaScript

Vòng lặp for-in là một loại vòng lặp đặc biệt lặp lại các thuộc tính của một đối tượng hoặc các phần tử của một mảng.

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

for(variable in object) {
    // Mã thực thi
}

Bộ đếm vòng lặp, tức là biến trong vòng lặp for-in là một chuỗi, không phải là một số.

Nó chứa tên của thuộc tính hiện tại hoặc chỉ mục của phần tử mảng hiện tại.

Ví dụ về vòng lặp for...in trong JS

Ví dụ sau sẽ chỉ cho bạn cách lặp qua tất cả các thuộc tính của đối tượng JavaScript.

// Một đối tượng 
var person = {"Tên": "Doanh", "Họ": "Vi", "Tuổi": "36"};
 
// Lặp qua tất cả các thuộc tính
for(var x in person) {  
    document.write("<p>" + x + " = " + person[x] + "</p>"); 
}

Kết quả:

Tên : Doanh
Họ : Vi
Tuổi : 36

Tương tự, bạn có thể lặp qua các phần tử của một mảng bằng vòng lặp for-in, như sau:

// Một mảng chứa các phần tử
var hoaQua= ["Táo", "Chuối", "Xoài", "Cam", "Lựu"];
 
// Lặp qua tất cả các phần tử
for(var i in hoaQua) {  
    document.write("<p>" + hoaQua[i] + "</p>");
}

Kết quả:

Táo
Chuối
Xoài
Cam
Lựu

Lưu ý: Không nên sử dụng vòng lặp for-in để lặp qua một mảng nếu mảng đó quan trọng thứ tự chỉ mục. Bạn nên sử dụng một vòng lặp for với chỉ mục dạng số.

#5. Vòng lặp for...of trong JavaScript (ES6)

ES6 giới thiệu một vòng lặp for-of mới cho phép chúng ta lặp lại qua các mảng hoặc các đối tượng lặp khác (ví dụ: chuỗi) rất dễ dàng.

Ngoài ra, mã bên trong vòng lặp được thực thi cho từng phần tử của đối tượng lặp.

Ví dụ sau đây sẽ cho bạn thấy cách lặp qua các mảng và chuỗi bằng vòng lặp for...of này.

// Tạo một mảng chuẩn bị để lặp
let letters = ["a", "b", "c", "d", "e", "f"];

for(let letter of letters) {
    console.log(letter); // a,b,c,d,e,f
}

// Lặp qua một chuỗi
let greet = "Hello World!";

for(let character of greet) {
    console.log(character); // H,e,l,l,o, ,W,o,r,l,d,!
}

Lưu ý: Vòng lặp for...of không hoạt động với các đối tượng vì chúng không thể lặp lại. Nếu bạn muốn lặp lại các thuộc tính của một đối tượng, bạn có thể sử dụng vòng lặp for-in.

Chúc mừng bạn đã biết sử dụng 5 loại vòng lặp trong JavaScript

Như vậy là qua bài viết này các bạn đã được với thiệu về cú pháp và cách sử dụng 5 loại vòng lặp trong JavaScript.

Chúng ta sẽ còn sử dụng vòng lặp của JavaScript trong các bài tiếp theo, vì thế, hãy xem lại kỹ cách các vòng lặp hoạt động nhé.

> Tham khảo: Khóa học nghệ thuật Front end trực tuyến

---

HỌC VIỆN ĐÀO TẠO CNTT NIIT - ICT HÀ NỘI

Dạy học Lập trình chất lượng cao (Since 2002). Học làm Lập trình viên. Hành động ngay!

Đc: Tầng 3, 25T2, N05, Nguyễn Thị Thập, Cầu Giấy, Hà Nội

SĐT: 02435574074 - 0914939543 - 0353655150 

Email: hello@niithanoi.edu.vn

Website: https://niithanoi.edu.vn

Fanpage: https://facebook.com/NIIT.ICT/

#niit #niithanoi #niiticthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp #java #php #python