Các lệnh vòng lặp trong TypeScript

Trong hướng dẫn này, bạn sẽ tìm hiểu về các câu lệnh vòng lặp như for, while và do...while trong TypeScript và cách chúng thực thi lặp đi lặp lại một đoạn mã.

Vòng lặp for trong TypeScript

Giới thiệu về vòng lặp for trong TypeScript

Sau đây là cú pháp của vòng lặp for trong TypeScript:

for (initialization; condition; expression) {
    // statement
}

Câu lệnh for tạo một vòng lặp. Nó bao gồm ba biểu thức tùy chọn được phân tách bằng dấu chấm phẩy (;) và được bao quanh bởi cặp dấu ngoặc đơn:

• initialization: là một biểu thức được thực thi một lần trước khi vòng lặp bắt đầu. Thông thường, bạn sử dụng initialization để khởi tạo bộ đếm vòng lặp.
• condition: là một biểu thức được đánh giá ở cuối mỗi lần lặp vòng lặp. Nếu biểu thức condition là true, các câu lệnh trong thân vòng lặp sẽ thực thi.
• expression: là một biểu thức được thực thi trước khi biểu thức condition được đánh giá ở cuối mỗi lần lặp vòng lặp. Thông thường, bạn sử dụng biểu thức expression để cập nhật bộ đếm vòng lặp.

Cả ba biểu thức trong câu lệnh vòng lặp for đều là tùy chọn. Có nghĩa là bạn có thể sử dụng câu lệnh vòng lặp for như sau:

for (;;) {
    // do something
}

Trong thực tế, bạn nên sử dụng một vòng lặp for nếu bạn biết số lần vòng lặp chạy. Nếu bạn muốn dừng vòng lặp dựa trên một điều kiện khác với số lần vòng lặp thực hiện, bạn nên sử dụng một vòng lặp while.

TypeScript cho phép bạn bỏ qua hoàn toàn phần nội dung vòng lặp như sau:

for (initialization; condition; expression);

Tuy nhiên, nó hiếm khi được sử dụng trong thực tế vì nó làm cho mã khó đọc và khó bảo trì hơn.

Ví dụ câu lệnh vòng lặp for trong TypeScript

Hãy lấy một số ví dụ về việc sử dụng câu lệnh vòng lặp for trong TypeScript.

Ví dụ câu lệnh vòng lặp for đơn giản trong TypeScript

Ví dụ sau sử dụng câu lệnh vòng lặp for để xuất 10 số từ 0 đến 9 trong console:

for (let i = 0; i < 10; i++) {
    console.log(i);
}

Đầu ra:

0
1
2
3
4
5
6
7
8
9

Câu lệnh vòng lặp for hoạt động như thế nào:

• Đầu tiên, khai báo một biến i và khởi tạo nó bằng 0.
• Sau đó kiểm tra xem i có nhỏ hơn 10 hay không. Nếu đúng, xuất giá trị của i ra console và tăng i thêm một.
• Cuối cùng, lặp lại bước thứ hai cho đến khi i bằng 10 thì vòng lặp for kết thúc.

Ví dụ về khối tùy chọn của vòng lặp for trong TypeScript

Ví dụ sau đây cho thấy đầu ra tương tự như ví dụ trên. Tuy nhiên, vòng lặp for không có khối initialization:

let i = 0;
for (; i < 10; i++) {
    console.log(i);
}

Giống như khối initialization, bạn có thể bỏ qua khối condition.

Tuy nhiên, bạn phải thoát khỏi vòng lặp khi một điều kiện được đáp ứng bằng cách sử dụng câu lệnh if và break. Nếu không, bạn sẽ tạo ra một vòng lặp vô hạn khiến chương trình thực thi lặp đi lặp lại cho đến khi nó bị treo.

for (let i = 0; ; i++) {
    console.log(i);
    
    if (i > 9) {
    	break;
    }
}

Ví dụ sau minh họa một vòng lặp for bỏ qua cả ba khối:

let i = 0;
for (; ;) {
    console.log(i);
    i++;
    
    if (i > 9) {
    	break;
    }
}

Đầu ra:

0
1
2
3
4
5
6
7
8
9

Làm thế nào nó hoạt động:

• Đầu tiên, khai báo một bộ đếm vòng lặp i và khởi tạo nó bằng 0 trước khi đi vào vòng lặp for.
• Sau đó, trong mỗi lần lặp lại vòng lặp, xuất ra giá trị biến i ra console, tăng dần nó lên một và thoát ra khỏi vòng lặp nếu i lớn hơn 9.

Vòng lặp while trong TypeScript

Giới thiệu về câu lệnh vòng lặp while trong TypeScript

Câu lệnh while cho phép bạn tạo một vòng lặp thực thi một khối mã miễn là có điều kiện true.

Sau đây là cú pháp của câu lệnh while trong TypeScript :

while (condition) {
    // do something
}

Câu lệnh while đánh giá điều kiện trước mỗi lần lặp vòng lặp.

Nếu điều kiện condition đánh giá là true, câu lệnh while thực thi mã trong phần thân của nó được bao quanh bởi cặp dấu ngoặc nhọn ({}).

Khi điều kiện condition đánh giá là false, câu lệnh while sẽ dừng thực thi.

Vì câu lệnh while đánh giá điều kiện condition trước khi phần thân của nó được thực thi, vòng lặp while còn được gọi là vòng lặp kiểm tra trước.

Để dừng vòng lặp while dựa trên một điều kiện khác, bạn sử dụng câu lệnh if và break:

while (condition) {
    // do something
    // ...

    if(anotherCondition) {
        break;
    }
}

Nếu bạn muốn chạy một vòng lặp với số lần lặp xác định, bạn nên sử dụng vòng lặp for trong TypeScript .

Ví dụ về vòng lặp while trong TypeScript

Hãy lấy một số ví dụ về việc sử dụng vòng lặp while trong TypeScript.

Ví dụ câu lệnh while đơn giản trong TypeScript

Ví dụ sau sử dụng câu lệnh while để xuất một số ra console miễn là nó nhỏ hơn 5:

let counter = 0;

while (counter < 5) {
    console.log(counter);
    counter++;
}

Đầu ra:

0
1
2
3
4

Nó hoạt động như thế nào:

• Đầu tiên, khai báo một biến counter và khởi tạo nó bằng 0.
• Sau đó, kiểm tra xem giá trị của biến counter có nhỏ hơn không 5 trước khi vào vòng lặp. Nếu thỏa điều kiện thì xuất counter  ra console và tăng từng giá trị một.
• Cuối cùng, lặp lại bước trên cho tới khi counter lớn hơn hoặc bằng 5 thì vòng lặp dừng.

Ví dụ thực tế của vòng lặp while trong TypeScript

Giả sử bạn có phần tử danh sách sau trên tài liệu HTML:

<ul id="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

Ví dụ sau cho thấy cách sử dụng câu lệnh while để loại bỏ tất cả các phần tử <li> của phần tử <ul>:

let list = document.querySelector('#list');

while (list.firstChild) {
    list.removeChild(list.firstChild);
}

Nó hoạt động như thế nào:

• Đầu tiên, chọn phần tử <ul> theo id của nó bằng phương thức querySelector().
• Sau đó, kiểm tra xem nếu list có firstChild thì xóa nó. Khi nút con đầu tiên bị xóa, nút con tiếp theo sẽ tự động được thăng cấp là nút con đầu tiên. Do đó, câu lệnh while loại bỏ tất cả các nút con của phần tử list.

Vòng lặp do...while trong TypeScript

Giới thiệu về vòng lặp do...while trong TypeScript

Sau đây là cú pháp của vòng lặp do...while:

do {
    // do something
} while(condition);

Vòng lặp do...while thực thi các câu lệnh trong phần thân của nó được bao quanh bởi dấu ngoặc nhọn ({}) cho đến khi biểu thức điều kiện condition được đánh giá là false.

Vòng lặp do...while luôn thực hiện ít nhất một phần thân vòng lặp của nó bất kể điều kiện condition là gì.

Không giống như câu lệnh while, câu lệnh do...while đánh giá biểu thức điều kiện condition sau mỗi lần lặp vòng lặp, do đó nó được gọi là vòng lặp kiểm tra sau.

Ví dụ về câu lệnh do...while trong TypeScript

Ví dụ sau sử dụng câu lệnh do...while để xuất các số từ 0 đến 9 vào console:

let i = 0;

do {
    console.log(i);
    i++
} while (i < 10);

Đầu ra:

0
1
2
3
4
5
6
7
8
9

Câu lệnh do...while hoạt động như thế nào:

• Đầu tiên, khai báo một biến i và khởi tạo nó bằng 0 trước khi vào vòng lặp.
• Sau đó, xuất ra i ra console, tăng i thêm một và kiểm tra xem nó có nhỏ hơn 10 không. Nếu đúng, lặp lại vòng lặp cho đến khi i lớn hơn hoặc bằng 10.

Câu lệnh break trong TypeScript

Sử dụng ngắt break để kết thúc vòng lặp trong TypeScript

Câu lệnh break cho phép bạn kết thúc một vòng lặp và chuyển quyền điều khiển chương trình cho câu lệnh tiếp theo sau vòng lặp.

Bạn có thể sử dụng câu lệnh break bên trong vòng lặp for, while và do...while.

Ví dụ sau cho thấy cách sử dụng câu lệnh break bên trong vòng lặp for:

let products = [
    { name: 'phone', price: 700 },
    { name: 'tablet', price: 900 },
    { name: 'laptop', price: 1200 }
];

for (var i = 0; i < products.length; i++) {
    if (products[i].price == 900) {
        // show the products
        console.log(products[i]);
        break;
    }
}

Đầu ra:

{ name: 'tablet', price: 900 }

Câu lệnh break hoạt động như thế nào:

• Đầu tiên, khởi tạo một danh sách các sản phẩm với các thuộc tính tên và giá.
• Sau đó, duyệt qua các sản phẩm, tìm kiếm sản phẩm có giá 900 và hiển thị sản phẩm ra console.
• Cuối cùng, kết thúc vòng lặp bằng cách sử dụng câu lệnh break.

Sử dụng câu lệnh break để kết thúc câu lệnh switch trong TypeScript

Ví dụ sau trả về chiết khấu của một sản phẩm cụ thể. Nó sử dụng câu lệnh break để thoát ra khỏi câu lệnh switch:

let products = [
    { name: 'phone', price: 700 },
    { name: 'tablet', price: 900 },
    { name: 'laptop', price: 1200 }
];

let discount = 0;
let product = products[1];

switch (product.name) {
    case 'phone':
        discount = 5;
        break;
    case 'tablet':
        discount = 10;
        break;
    case 'laptop':
        discount = 15;
        break;
}

console.log(`There is a ${discount}% on ${product.name}.`);

Lưu ý rằng bên cạnh một vòng lặp hoặc một switch, câu lệnh break có thể được sử dụng để thoát ra khỏi một câu lệnh có nhãn. Tuy nhiên, nó hiếm khi được sử dụng trong thực tế nên chúng tôi không đề cập trong hướng dẫn này.

Câu lệnh continue trong TypeScript

Câu lệnh continue được sử dụng để điều khiển vòng lặp như vòng lặp for, while hoặc do...while.

Câu lệnh continue bỏ qua vòng lặp hiện tại và tiếp tục vòng lặp tiếp theo.

Sử dụng câu lệnh continue trong vòng lặp for

Ví dụ sau minh họa cách sử dụng câu lệnh continue bên trong vòng lặp for:

for (let index = 0; index < 9; index++) {
    
    // if index is odd, skip it
    if (index % 2) {
        continue;
    }
    
    // the following code will be skipped for odd numbers
    console.log(index);
}

Đầu ra:

0
2
4
6
8

Trong ví dụ này:

• Đầu tiên, duyệt qua các số từ 0 đến 9.
• Sau đó, nếu số hiện tại là số lẻ thì bỏ qua việc xuất số ra console bằng cách sử dụng câu lệnh continue. Trong trường hợp số hiện tại là số chẵn thì xuất nó ra console.

Sử dụng câu lệnh continue trong vòng lặp while

Ví dụ sau đây cho thấy cách sử dụng câu lệnh continue trong một vòng lặp while. Nó trả về kết quả tương tự như ví dụ trên.

let index = -1;

while (index < 9) {
    index = index + 1;

    if (index % 2) {
        continue;
    }
    
    console.log(index);
}

Đầu ra:

0
2
4
6
8

Sử dụng câu lệnh continue trong vòng lặp do...while

Ví dụ sau minh họa cách sử dụng câu lệnh continue trong vòng lặp do...while. Nó trả về số lượng các số chẵn từ 9 đến 99:

let index = 9;
let count = 0;

do {
    index += 1;

    if (index % 2) {
        continue;
    }
    
    count += 1;
} while (index < 99);

console.log(count); // 45

Tóm lược

• Sử dụng câu lệnh vòng lặp for trong TypeScript khi bạn muốn thực thi lặp đi lặp lại một đoạn mã một số lần.
• Sử dụng câu lệnh vòng lặp while trong TypeScript để tạo một vòng lặp sẽ chạy miễn là có điều kiện true.
• Sử dụng câu lệnh do...while để tạo một vòng lặp chạy cho đến khi một điều kiện được đánh giá là false.
• Sử dụng câu lệnh break để kết thúc một vòng lặp hoặc một câu lệnh switch.
• Sử dụng câu lệnh continue trong TypeScript để bỏ qua vòng lặp hiện tại và tiếp tục vòng lặp tiếp theo.

TypeScript