JavaScript - Vòng lặp for...of

Chào mừng các bạn đang học lập trình! Hôm nay, chúng ta sẽ cùng nhau khám phá một trong những tính năng hữu ích nhất của JavaScript: vòng lặp for...of. Là một giáo viên khoa học máy tính gần gũi, tôi rất vui được hướng dẫn các bạn trong hành trình này. Hãy chuẩn bị饮料 yêu thích của bạn, thoải mái ngồi xuống, và cùng nhau bắt đầu cuộc phiêu lưu lập trình này nhé!

Javascript - For...of

Vòng lặp for...of là gì?

Trước khi chúng ta đi vào chi tiết, hãy hiểu qua về vòng lặp for...of. Hãy tưởng tượng bạn có một giỏ đầy trái cây nhiều màu sắc, và bạn muốn kiểm tra từng quả một. Vòng lặp for...of giống như một trợ lý giúp bạn, picking up từng quả từ giỏ và đưa cho bạn, một quả một lần, cho đến khi giỏ trống rỗng.

Trong lập trình, vòng lặp for...of cho phép chúng ta duyệt (một từ sang trọng để nói "qua") các đối tượng có thể duyệt như mảng, chuỗi và các cấu trúc dữ liệu khác mà chúng ta sẽ học về sau này.

Cú pháp

Bây giờ, hãy cùng nhìn vào cách chúng ta viết một vòng lặp for...of. Đừng lo nếu nó trông có vẻ lạ lúc đầu - chúng ta sẽ phân tích nó cùng nhau!

for (biến của bạn của iterable) {
// mã cần thực thi
}

Hãy phân tích này:

for: Từ khóa này báo cho JavaScript biết rằng chúng ta đang bắt đầu một vòng lặp.
biến của bạn: Đây là nơi chúng ta sẽ lưu trữ từng mục khi duyệt qua iterable.
of: Từ khóa này là gì làm cho này là một vòng lặp for...of.
iterable: Đây là đối tượng mà chúng ta đang duyệt qua (giống như giỏ trái cây của chúng ta).
Mã trong dấu {} là điều chúng ta muốn làm với từng mục.

Ví dụ

Ví dụ 1: Duyệt qua một mảng

Hãy bắt đầu với một ví dụ đơn giản. Chúng ta sẽ tạo một mảng trái cây và in từng quả một.

let fruits = ['apple', 'banana', 'cherry', 'date'];

for (let fruit of fruits) {
console.log(fruit);
}

Nếu bạn chạy đoạn mã này, bạn sẽ thấy:

apple
banana
cherry
date

Điều gì đang xảy ra ở đây? Vòng lặp for...of của chúng ta đang lấy từng quả từ mảng fruits và lưu trữ nó trong biến fruit. Sau đó, chúng ta sử dụng console.log() để in từng quả.

Ví dụ 2: Duyệt qua một chuỗi

Bạn có biết rằng chuỗi cũng có thể được duyệt qua không? Hãy viết một từ ra:

let word = 'Hello';

for (let letter of word) {
console.log(letter);
}

Điều này sẽ ra output:

H
e
l
l
o

Mỗi ký tự trong chuỗi được coi là một mục riêng lẻ mà chúng ta có thể duyệt qua. Cool, phải không?

Ví dụ 3: Sử dụng for...of với số

Bây giờ, hãy làm một điều thực tế hơn. Giả sử bạn là một giáo viên (như tôi!) và bạn muốn tính điểm trung bình cho một lớp học:

let scores = [85, 92, 78, 95, 88];
let total = 0;
let count = 0;

for (let score of scores) {
total += score;
count++;
}

let average = total / count;
console.log(`Điểm trung bình của lớp là ${average}`);

Đoạn mã này sẽ tính toán và in ra điểm trung bình. Chúng ta sử dụng vòng lặp for...of để cộng tất cả các điểm và đếm số lượng điểm.

Ví dụ 4: Thoát khỏi vòng lặp

Đôi khi, bạn có thể muốn dừng vòng lặp trước khi nó kết thúc. Chúng ta có thể làm điều này với từ khóa break. Hãy nói chúng ta đang tìm một quả trái cây cụ thể:

let fruits = ['apple', 'banana', 'cherry', 'date'];
let searchFor = 'cherry';

for (let fruit of fruits) {
if (fruit === searchFor) {
console.log(`Found ${searchFor}!`);
break;
}
console.log(`Checking ${fruit}...`);
}

Đoạn mã này sẽ dừng lại khi nó tìm thấy 'cherry', mà không kiểm tra các quả trái cây còn lại.

Ví dụ 5: Bỏ qua các mục với continue

Nếu chúng ta muốn bỏ qua một số mục? Chúng ta có thể sử dụng từ khóa continue. Hãy chỉ in ra các trái cây bắt đầu bằng chữ 'a':

let fruits = ['apple', 'banana', 'apricot', 'cherry', 'avocado'];

for (let fruit of fruits) {
if (!fruit.startsWith('a')) {
continue;
}
console.log(fruit);
}

Điều này sẽ chỉ in ra 'apple', 'apricot' và 'avocado'.

Bảng phương thức

Dưới đây là bảng phương thức chúng ta đã sử dụng trong các ví dụ:

Phương thức	Mô tả	Ví dụ
`console.log()`	In output ra console	`console.log('Hello, World!')`
`startsWith()`	Kiểm tra nếu một chuỗi bắt đầu bằng các ký tự đã chỉ định	`'apple'.startsWith('a')` // true
`break`	Thoát khỏi vòng lặp	`if (điều kiện) break;`
`continue`	Bỏ qua vòng lặp tiếp theo	`if (điều kiện) continue;`

Kết luận

Và thế là bạn đã có nó, các bạn! Chúng ta đã cùng nhau hành trình qua thế giới của vòng lặp for...of, từ các mảng đơn giản đến chuỗi, và thậm chí học cách thoát khỏi hoặc bỏ qua các mục. Nhớ rằng, thực hành là cách tốt nhất để học, vì vậy đừng ngại thử nghiệm với các khái niệm này.

Trong những năm dạy học của tôi, tôi đã phát hiện ra rằng cách tốt nhất để học là làm. Vậy đây là một chút bài tập về nhà cho bạn: Hãy thử tạo ra các vòng lặp for...of của riêng bạn với các loại dữ liệu khác nhau. Có thể là duyệt qua danh sách phim yêu thích của bạn, hoặc tên bạn bè của bạn. Các khả năng là không giới hạn!

Chúc các bạn lập trình vui vẻ, và nhớ rằng - trong thế giới lập trình, mỗi vòng lặp là một cơ hội cho sự khám phá!

Credits: Image by storyset

Hướng Dẫn Trước:

JavaScript - For...in

Hướng Dẫn Tiếp Theo:

JavaScript - Điều khiển vòng lặp