JavaScript - Đối tượng Maps

Chào mừng các bạn đang theo đuổi lập trình! Hôm nay, chúng ta sẽ cùng lặn sâu vào thế giới kỳ diệu của JavaScript Maps. Là người dạy khoa học máy tính gần gũi của bạn, tôi rất vui mừng được dẫn dắt các bạn trong hành trình này. Vậy, hãy戴上 mũ suy nghĩ trực tuyến của bạn, và cùng nhau bắt đầu cuộc phiêu lưu này nhé!

JavaScript - Maps

什么是 Map?

Trước khi chúng ta nhảy vào chi tiết, hãy hiểu Map là gì. Hãy tưởng tượng bạn có một hộp ma thuật nơi bạn có thể đặt một chìa khóa vào và ngay lập tức nhận được giá trị tương ứng. Đó chính là Map trong JavaScript - một bộ sưu tập các cặp khóa-giá trị nơi cả khóa và giá trị có thể là bất kỳ loại nào. Đ Cooler phải không?

Cú pháp

Cú pháp cơ bản để tạo một Map rất đơn giản:

let myMap = new Map();

Ở đây, chúng ta đang tạo một đối tượng Map mới và gán nó cho biến myMap. Nó giống như mở hộp ma thuật mà chúng ta đã nói đến trước đó!

Tham số

Khi tạo một Map, bạn có thể tùy chọn truyền vào một đối tượng có thể đệm (như một mảng) chứa các cặp khóa-giá trị:

let myMap = new Map([
['key1', 'value1'],
['key2', 'value2']
]);

Trong ví dụ này, chúng ta đang tạo một Map với hai cặp khóa-giá trị ngay từ đầu. Nó giống như nạp sẵn một số đồ vào hộp ma thuật của chúng ta!

Thuộc tính của Map

Maps có một thuộc tính tiện lợi:

Thuộc tính	Mô tả
size	Trả về số lượng các cặp khóa-giá trị trong Map

Hãy xem nó trong hành động:

let myMap = new Map([
['apples', 5],
['bananas', 3],
['oranges', 2]
]);

console.log(myMap.size); // Output: 3

Trong ví dụ trái cây này, Map của chúng ta có 3 cặp khóa-giá trị, vì vậy size trả về 3. Nó giống như đếm số lượng ngăn đã đầy trong hộp ma thuật của chúng ta!

Phương thức của Map

Maps được trang bị nhiều phương thức hữu ích. Hãy cùng nhìn chúng trong bảng:

Phương thức	Mô tả
set()	Thêm một cặp khóa-giá trị mới vào Map
get()	Trả về giá trị liên kết với một khóa
has()	Kiểm tra xem một khóa có tồn tại trong Map
delete()	Xóa một cặp khóa-giá trị khỏi Map
clear()	Xóa tất cả các cặp khóa-giá trị khỏi Map

Bây giờ, hãy xem các phương thức này trong hành động với một số ví dụ!

Phương thức set()

let petMap = new Map();

petMap.set('dog', 'Buddy');
petMap.set('cat', 'Whiskers');
petMap.set('fish', 'Nemo');

console.log(petMap);
// Output: Map(3) { 'dog' => 'Buddy', 'cat' => 'Whiskers', 'fish' => 'Nemo' }

Trong ví dụ này, chúng ta đang thêm các thú cưng và tên của chúng vào Map. Nó giống như đánh dấu các ngăn khác nhau trong hộp ma thuật của chúng ta!

Phương thức get()

console.log(petMap.get('dog')); // Output: Buddy
console.log(petMap.get('elephant')); // Output: undefined

Ở đây, chúng ta đang lấy giá trị bằng cách sử dụng các khóa. Khi chúng ta yêu cầu 'dog', chúng ta nhận được 'Buddy'. Nhưng khi chúng ta yêu cầu 'elephant', mà không tồn tại trong Map của chúng ta, chúng ta nhận được undefined. Nó giống như把手伸进 hộp ma thuật và hoặc tìm thấy thứ gì đó hoặc không có gì!

Phương thức has()

console.log(petMap.has('cat')); // Output: true
console.log(petMap.has('elephant')); // Output: false

Phương thức has() kiểm tra xem một khóa có tồn tại trong Map của chúng ta hay không. Nó giống như hỏi hộp ma thuật của chúng ta, "Bạn có ngăn nào đánh dấu 'cat' không?"

Phương thức delete()

petMap.delete('fish');
console.log(petMap);
// Output: Map(2) { 'dog' => 'Buddy', 'cat' => 'Whiskers' }

Ở đây, chúng ta đang xóa mục 'fish' khỏi Map của chúng ta. Poor Nemo!

Phương thức clear()

petMap.clear();
console.log(petMap); // Output: Map(0) {}

Phương thức clear() làm trống toàn bộ Map của chúng ta. Nó giống như đổ tất cả thứ trong hộp ma thuật của chúng ta ra ngoài!

Constructor của Map JavaScript

Constructor Map có thể tạo một đối tượng Map mới:

let newMap = new Map();

Bạn cũng có thể khởi tạo một Map với một đối tượng có thể đệm:

let initMap = new Map([
['key1', 'value1'],
['key2', 'value2']
]);

Nó giống như thiết lập hộp ma thuật của chúng ta với một số ngăn và vật phẩm ban đầu!

Ví dụ

Hãy kết hợp tất cả lại với một ví dụ vui vẻ. Hãy tưởng tượng chúng ta đang theo dõi điểm số của một giải đấu game:

let gameScores = new Map();

// Thêm điểm số
gameScores.set('Alice', 1000);
gameScores.set('Bob', 850);
gameScores.set('Charlie', 1200);

console.log(gameScores);
// Output: Map(3) { 'Alice' => 1000, 'Bob' => 850, 'Charlie' => 1200 }

// Cập nhật điểm số
gameScores.set('Bob', 900);

// Kiểm tra xem một người chơi có tồn tại
console.log(gameScores.has('David')); // Output: false

// Lấy điểm số của một người chơi
console.log(gameScores.get('Charlie')); // Output: 1200

// Xóa một người chơi
gameScores.delete('Alice');

console.log(gameScores);
// Output: Map(2) { 'Bob' => 900, 'Charlie' => 1200 }

// Lấy số lượng người chơi
console.log(gameScores.size); // Output: 2

Trong ví dụ này, chúng ta đang sử dụng Map như một bảng điểm. Chúng ta có thể dễ dàng thêm người chơi, cập nhật điểm số, kiểm tra xem một người chơi có tồn tại hay không, lấy điểm số của họ, xóa người chơi, và kiểm tra số lượng người chơi. Nó giống như có một bảng điểm ma thuật mà chúng ta có thể manipulatie dễ dàng!

Map vs. Object trong JavaScript

Bây giờ, bạn có thể đang tự hỏi, "Tại sao sử dụng Map khi chúng ta có Object trong JavaScript?" Câu hỏi tuyệt vời! Hãy so sánh chúng:

Loại Khóa: Object chỉ cho phép các khóa là chuỗi hoặc ký hiệu, trong khi Map cho phép bất kỳ loại nào làm khóa (thậm chí là các đối tượng!).
Thứ tự: Maps duy trì thứ tự chèn của các phần tử, trong khi Object không đảm bảo bất kỳ thứ tự nào.
Kích thước: Bạn có thể dễ dàng lấy kích thước của một Map bằng thuộc tính size, trong khi với Object, bạn cần đếm thủ công các thuộc tính.
Hiệu suất: Maps có hiệu suất tốt hơn trong các kịch bản liên quan đến việc thêm và xóa thường xuyên các cặp khóa-giá trị.

Dưới đây là một ví dụ nhanh để minh họa:

let obj = {
'string key': 'string value',
1: 'number value',
[{}]: 'object key' // Thực tế trở thành '[object Object]'
};

let map = new Map([
['string key', 'string value'],
[1, 'number value'],
[{}, 'object key'] // Điều này hoạt động như mong đợi
]);

console.log(Object.keys(obj).length); // Output: 3
console.log(map.size); // Output: 3

console.log(obj['[object Object]']); // Output: 'object key'
console.log(map.get({})); // Output: undefined (vì nó là một đối tượng khác)

Trong ví dụ này, chúng ta có thể thấy Maps xử lý các loại khóa khác nhau một cách linh hoạt hơn so với Object. Nó giống như có một hộp ma thuật linh hoạt và mạnh mẽ hơn!

Và đó là tất cả, các bạn! Chúng ta đã cùng nhau hành trình qua vùng đất của JavaScript Maps, từ việc tạo chúng đến việc manipulatie chúng, và ngay cả so sánh chúng với họ hàng của chúng, Object. Tôi hy vọng hộp kiến thức ma thuật này đã thú vị như khi tôi chia sẻ với các bạn. Nhớ rằng, thực hành là cách tốt nhất để thành thạo, vì vậy đừng ngần ngại thử nghiệm với Maps trong mã của bạn. Chúc các bạn may mắn và mã của bạn luôn không có lỗi!

Credits: Image by storyset