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
9
Câ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
9
Là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
4
Nó 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
9
Câ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
8
Trong 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
8
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
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.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.Trong hướng dẫn này, bạn sẽ tìm hiểu về generic type trong TypeScript cho phép bạn sử dụng các kiểu dữ liệu làm tham số chính thức.
Trong hướng dẫn này, bạn sẽ tìm hiểu về kiểu giao (intersection type), an toàn kiểu (type guard), ép kiểu (type casting) và xác nhận kiểu (type assertions) trong TypeScript .
Trong hướng dẫn này, bạn sẽ tìm hiểu về interface trong TypeScript, cách định nghĩa, cách mở rộng interface và cách sử dụng chúng để thực thi kiểm tra kiểu dữ liệu.
Trong hướng dẫn này, bạn sẽ tìm hiểu từ A-Z về class (lớp), abstract class, kiểm soát truy cập, thuộc tính chỉ đọc, kế thừa, ... trong TypeScript.