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ã.
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.
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ụ 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
9Câu lệnh vòng lặp for hoạt động như thế nào:
i và khởi tạo nó bằng 0.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.i bằng 10 thì vòng lặp for kết thúc.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
9Làm thế nào nó hoạt động:
i và khởi tạo nó bằng 0 trước khi đi vào vòng lặp for.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.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 .
Hãy lấy một số ví dụ về việc sử dụng vòng lặp while 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
4Nó hoạt động như thế nào:
counter và khởi tạo nó bằng 0.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.counter lớn hơn hoặc bằng 5 thì vòng lặp dừng.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:
<ul> theo id của nó bằng phương thức querySelector().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.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ụ 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
9Câu lệnh do...while hoạt động như thế nào:
i và khởi tạo nó bằng 0 trước khi vào vòng lặp.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 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:
900 và hiển thị sản phẩm ra console.break.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 đượ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.
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
8Trong ví dụ này:
continue. Trong trường hợp số hiện tại là số chẵn thì xuất nó ra console.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
8Ví 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); // 45for 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.while trong TypeScript để tạo một vòng lặp sẽ chạy miễn là có điều kiện true.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.break để kết thúc một vòng lặp hoặc một câu lệnh switch.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.
Namespace được sử dụng để nhóm logic các chức năng. Namespace có thể bao gồm các interface, lớp, hàm và biến để hỗ trợ một nhóm các chức năng liên quan.
Trong hướng dẫn này bạn sẽ tìm hiểu về từ khóa readonly, static và cách sử dụng chúng trong TypeScript.
TypeScript có ba từ khóa kiểm soát quyền truy cập: public, private và protected để kiểm soát khả năng hiển thị của các thành phần dữ liệu của nó.
Định nghĩa một abstract class trong TypeScript bằng cách sử dụng từ khóa abstract. Abstract class chủ yếu được sử dụng để các lớp khác kế thừa từ chúng. Chúng ta không thể tạo một thể hiện của một abstract class.