JavaScript - Đối tượng Iterables

Xin chào, các bạn học lập trình! Hôm nay, chúng ta sẽ bắt đầu một chuyến hành trình thú vị vào thế giới của các đối tượng iterables trong JavaScript. Là giáo viên khoa học máy tính ở gần bạn, tôi ở đây để hướng dẫn bạn từng bước trong chuyến phiêu lưu này. Vậy hãy lấy cặp sách ảo của bạn, và chúng ta cùng bắt đầu!

Iterables là gì?

Trước khi chúng ta đi sâu vào chi tiết, hãy hiểu đối tượng iterables là gì. Trong JavaScript, một iterables là một đối tượng có thể được "đệm qua". Nói đơn giản hơn, nó giống như một bộ sưu tập các mục mà bạn có thể đi qua từng mục một. Hãy tưởng tượng nó như một két bảo vật đầy những món quà mà bạn có thể khám phá từng món một.

Các ví dụ phổ biến của iterables trong JavaScript bao gồm mảng, chuỗi và bản đồ. Những điều này giống như những loại két bảo vật khác nhau, mỗi loại có những đặc điểm riêng biệt.

Đệm qua bằng vòng lặp for...of

Bây giờ, hãy học phương pháp đầu tiên để khám phá những két bảo vật này: vòng lặp for...of. Điều này giống như có một chìa khóa ma thuật có thể mở từng ngăn của két bảo vật một lần.

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

const fruits = ['apple', 'banana', 'orange'];

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

Trong ví dụ này, chúng ta có một mảng các quả trái cây (két bảo vật của chúng ta). Vòng lặp for...of đi qua từng quả một, và chúng ta in nó ra. Khi bạn chạy đoạn mã này, bạn sẽ thấy:

apple
banana
orange

Giống như chúng ta đang lấy từng quả ra khỏi két bảo vật và ngắm nhìn!

Ví dụ 2: Đệm qua một Chuỗi

Chuỗi cũng là các iterables. Hãy xem chúng ta có thể khám phá chúng như thế nào:

const message = "Hello";

for (const character of message) {
console.log(character);
}

Đoạn mã này sẽ xuất ra:

H
e
l
l
o

Mỗi ký tự trong chuỗi của chúng ta giống như một bảo vật nhỏ mà chúng ta đang kiểm tra kỹ lưỡng.

Đệm qua bằng phương thức forEach()

Bây giờ, hãy học một cách khác để khám phá những bảo vật của chúng ta: phương thức forEach(). Điều này giống như có một trợ lý giúp chúng ta đi qua từng mục trong két bảo vật và chỉ cho chúng ta từng mục một.

Ví dụ 3: Sử dụng forEach() với một Mảng

const numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(number) {
console.log(number * 2);
});

Đoạn mã này sẽ xuất ra:

2
4
6
8
10

Ở đây, trợ lý của chúng ta (phương thức forEach()) không chỉ chỉ cho chúng ta từng số mà còn nhân đôi nó cho chúng ta!

Ví dụ 4: Sử dụng forEach() với Set

Sets là một loại iterables khác trong JavaScript. Hãy xem chúng ta có thể sử dụng forEach() với chúng như thế nào:

const uniqueColors = new Set(['red', 'blue', 'green']);

uniqueColors.forEach(function(color) {
console.log(`Color: ${color}`);
});

Kết quả:

Color: red
Color: blue
Color: green

Trợ lý giúp chúng ta bây giờ đang chỉ cho chúng ta từng màu duy nhất từ bộ màu của chúng ta.

Đệm qua bằng phương thức map()

Cuối cùng nhưng không kém phần quan trọng, hãy học về phương thức map(). Điều này giống như có một cây cậy ma thuật có thể biến đổi từng mục trong két bảo vật của chúng ta khi chúng ta đi qua.

Ví dụ 5: Biến đổi các phần tử trong Mảng

const prices = [10, 20, 30, 40, 50];

const discountedPrices = prices.map(function(price) {
return price * 0.9;  // Giảm giá 10%
});

console.log(discountedPrices);

Kết quả:

[9, 18, 27, 36, 45]

Ở đây, cây cậy ma thuật của chúng ta (phương thức map()) đang áp dụng giảm giá 10% cho từng giá trong danh sách của chúng ta.

Ví dụ 6: Tạo một Mảng mới từ dữ liệu hiện có

const names = ['Alice', 'Bob', 'Charlie'];

const greetings = names.map(function(name) {
return `Hello, ${name}!`;
});

console.log(greetings);

Kết quả:

['Hello, Alice!', 'Hello, Bob!', 'Hello, Charlie!']

Cây cậy ma thuật của chúng ta đã biến đổi từng tên thành lời chào thân thiện!

Tóm tắt các phương pháp đệm qua

Dưới đây là bảng tóm tắt các phương pháp chúng ta đã học:

Phương pháp	Mô tả	Trường hợp sử dụng
for...of	Đi qua các đối tượng iterables	Đệm qua đơn giản khi bạn cần các giá trị
forEach()	Thực hiện một hàm cho từng phần tử của mảng	Khi bạn muốn thực hiện một hành động trên từng mục
map()	Tạo một mảng mới với kết quả của việc gọi một hàm trên mỗi phần tử	Khi bạn muốn biến đổi từng mục trong một mảng

Nhớ rằng, mỗi phương pháp này giống như một công cụ khác nhau trong bộ công cụ lập trình của bạn. Khi bạn có nhiều kinh nghiệm hơn, bạn sẽ biết khi nào nên sử dụng từng phương pháp để đạt được kết quả tốt nhất.

Cuối cùng, các đối tượng iterables trong JavaScript là các cấu trúc mạnh mẽ cho phép chúng ta làm việc với các bộ dữ liệu một cách hiệu quả. Cho dù bạn sử dụng for...of, forEach() hay map(), bạn现在已经 có sức mạnh để khám phá và thay đổi dữ liệu của mình như một pháp sư lập trình thực sự!

Tiếp tục thực hành, và sớm bạn sẽ có thể tạo ra các đoạn mã phức tạp một cách dễ dàng. Chúc các bạn may mắn, các học trò trẻ!

Credits: Image by storyset