• Trang chủ
• Học JavaScript
• Vòng lặp JS

Vòng lặp JS

Trong hướng dẫn này, bạn sẽ học cách lặp lại một loạt hành động bằng vòng lặp trong JavaScript.

Các loại vòng lặp khác nhau trong JavaScript

Các vòng lặp được sử dụng để thực thi lặp đi lặp lại cùng một khối mã, miễn là đáp ứng một điều kiện nhất định. Ý tưởng cơ bản đằng sau một vòng lặp là tự động hóa các tác 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ợ năm loại vòng lặp khác nhau:

• while — lặp qua một khối mã miễn là điều kiện được chỉ định đánh giá là đúng.
• do…while — lặp qua một khối mã một lần; sau đó điều kiện được đánh giá. 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 là đúng.
• for - lặp qua một khối mã cho đến khi bộ đếm đạt đến một số được chỉ đị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ác đối tượng có thể lặp lại như mảng, chuỗi, v.v.

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

Vòng lặp while

Đây là câu lệnh lặp đơn giản nhất do JavaScript cung cấp.

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 không thành công, vòng lặp sẽ dừng lại. Cú pháp chung của vòng lặp while là:

Ví dụ sau định nghĩa một vòng lặp sẽ tiếp tục chạy miễn là biến inhỏ hơn hoặc bằng 5. Biến isẽ tăng thêm 1 mỗi khi vòng lặp chạy:

var i = 1;
while(i <= 5) {    
    document.write("<p>The number is " + i + "</p>");
    i++;
}

Vòng lặp do...while

Vòng lặp do-while là một biến thể của vòng lặp while, nó đánh giá điều kiện ở cuối mỗi lần lặp của vòng lặp. Với một vòng lặp do-while, khối mã được thực thi một lần, sau đó điều kiện được đánh giá, nếu điều kiện là đúng, câu lệnh được lặp lại miễn là điều kiện đã chỉ định được đánh giá là đúng. Cú pháp chung của vòng lặp do-while là:

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 đầu ra và tăng giá trị của biến ilê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 đó inhỏ hơn hoặc bằng 5.

var i = 1;
do {
    document.write("<p>The number is " + i + "</p>");
    i++;
}
while(i <= 5);

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

Vòng lặp while khác với vòng lặp do-while ở một điểm quan trọng — với một vòng lặp while, điều kiện cần đánh giá được kiểm tra ở đầu mỗi lần lặp lại vòng lặp, vì vậy nếu biểu thức điều kiện đánh giá là sai, vòng lặp sẽ không bao giờ được thực thi.

Mặt khác, với một vòng lặp do-while, vòng lặp sẽ luôn được thực hiện một lần ngay cả khi biểu thức điều kiện đánh giá là sai, bởi vì không giống như vòng lặp while, điều kiện được đánh giá ở cuối vòng lặp chứ không phải ở đầu.

Vòng lặp for

Vòng lặp for 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. Cú pháp của nó là:

Các tham số của vòng lặp for có ý nghĩa như sau:

• initialization - khởi tạo - nó được sử dụng để khởi tạo các biến bộ đếm và được đánh giá một lần vô điều kiện trước khi thực hiện phần thân đầu tiê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àtrue, thì các câu lệnh vòng lặp sẽ thực thi. Nếu nó đánh giá làfalse, thì việc thực hiện vòng lặp kết thúc.
• increment - gia tăng - 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ụ 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 inhỏ hơn hoặc bằng 5. Biến isẽ tăng thêm 1 mỗi khi vòng lặp chạy:

for(var i=1; i<=5; i++) {
    document.write("<p>The number is " + i + "</p>");
}

Vòng lặp for đặc biệt hữu ích để lặp qua một mảng. Ví dụ sau sẽ chỉ cho bạn cách in từng mục hoặc phần tử của mảng JavaScript .

// An array with some elements
var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
 
// Loop through all the elements in the array 
for(var i=0; i<fruits.length; i++) {
    document.write("<p>" + fruits[i] + "</p>");
}

Vòng lặp for...in

Vòng lặp for-in là một loại vòng lặp đặc biệt lặp qua 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 chung của vòng lặp for-in là:

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ụ sau sẽ chỉ cho bạn cách lặp qua tất cả các thuộc tính của một đối tượng JavaScript.

// An object with some properties 
var person = {"name": "Clark", "surname": "Kent", "age": "36"};
 
// Loop through all the properties in the object  
for(var prop in person) {  
    document.write("<p>" + prop + " = " + person[prop] + "</p>"); 
}

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

// An array with some elements
var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
 
// Loop through all the elements in the array 
for(var i in fruits) {  
    document.write("<p>" + fruits[i] + "</p>");
}

Vòng lặp for...ofES6

ES6 giới thiệu một vòng lặp mới for-ofcho phép chúng ta lặp lại các mảng hoặc các đối tượng có thể lặp lại khác (ví dụ: strings ) 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 có thể lặp lại.

Ví dụ sau sẽ chỉ cho bạn cách lặp qua các mảng và chuỗi bằng cách sử dụng vòng lặp này.

// Iterating over array
let letters = ["a", "b", "c", "d", "e", "f"];

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

// Iterating over string
let greet = "Hello World!";

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

Để tìm hiểu về các tính năng khác của ES6, vui lòng xem chương về các tính năng của JavaScript ES6 .