3.1 Bộ sưu tập Map
Trong ECMAScript 2015 (ES6), JavaScript đã thêm hai cấu trúc dữ liệu mới: Map và Set.
Những cấu trúc dữ liệu này cung cấp các cách linh hoạt và hiệu quả hơn để lưu trữ và quản lý các bộ sưu tập dữ liệu
so với các đối tượng và mảng truyền thống.
Map — đây là cấu trúc dữ liệu cho phép lưu trữ cặp khóa-giá trị nơi mà các khóa
có thể thuộc bất kỳ loại nào, kể cả đối tượng và hàm.
1. Tạo và khởi tạo Map:
const map = new Map();
2. Thêm phần tử:
Phương thức set được sử dụng để thêm cặp khóa-giá trị mới vào Map.
map.set('key1', 'value1');
map.set(2, 'value2');
map.set({ name: 'objectKey' }, 'value3');
3. Lấy phần tử:
Phương thức get được sử dụng để lấy giá trị theo khóa.
const map = new Map();
map.set('key1', 'value1');
map.set(2, 'value2');
map.set({ name: 'objectKey' }, 'value3');
console.log(map.get('key1')); // 'value1'
console.log(map.get(2)); // 'value2'
4. Kiểm tra sự tồn tại của khóa:
Phương thức has kiểm tra xem khóa có tồn tại trong Map hay không.
const map = new Map();
map.set('key1', 'value1');
map.set(2, 'value2');
map.set({ name: 'objectKey' }, 'value3');
console.log(map.has('key1')); // true
console.log(map.has('key3')); // false
5. Xóa phần tử:
Phương thức delete xóa phần tử theo khóa.
const map = new Map();
map.set('key1', 'value1');
map.set(2, 'value2');
map.set({ name: 'objectKey' }, 'value3');
map.delete('key1');
console.log(map.has('key1')); // false
6. Xóa toàn bộ Map:
Phương thức clear xóa tất cả phần tử khỏi Map.
const map = new Map();
map.set('key1', 'value1');
map.set(2, 'value2');
map.set({ name: 'objectKey' }, 'value3');
map.clear();
console.log(map.size); // 0
7. Duyệt qua Map:
Bạn có thể sử dụng vòng lặp for...of để duyệt qua Map.
Ví dụ:
const map = new Map();
map.set('key1', 'value1');
map.set(2, 'value2');
for (const [key, value] of map) {
console.log(`${key}: ${value}`);
}
// 'key1: value1'
// '2: value2'
3.2 Bộ sưu tập Set
Set — đây là cấu trúc dữ liệu cho phép lưu trữ các giá trị duy nhất
thuộc bất kỳ loại nào, bao gồm cả đối tượng và các kiểu dữ liệu nguyên thủy.
1. Tạo và khởi tạo Set:
const set = new Set();
2. Thêm phần tử:
Phương thức add được sử dụng để thêm giá trị mới vào Set.
set.add(1);
set.add('value2');
set.add({ name: 'objectValue' });
3. Kiểm tra sự tồn tại của giá trị:
Phương thức has kiểm tra xem giá trị có tồn tại trong Set hay không.
const set = new Set();
set.add(1);
set.add('value2');
set.add({ name: 'objectValue' });
console.log(set.has(1)); // true
console.log(set.has('value3')); // false
4. Xóa phần tử:
Phương thức delete xóa giá trị khỏi Set.
const set = new Set();
set.add(1);
set.add('value2');
set.add({ name: 'objectValue' });
set.delete(1);
console.log(set.has(1)); // false
5. Xóa toàn bộ Set:
Phương thức clear xóa tất cả phần tử khỏi Set.
const set = new Set();
set.add(1);
set.add('value2');
set.add({ name: 'objectValue' });
set.clear();
console.log(set.size); // 0
6. Duyệt qua Set:
Bạn có thể sử dụng vòng lặp for...of để duyệt qua Set.
const set = new Set();
set.add(1);
set.add('value2');
for (const value of set) {
console.log(value);
}
// 1
// 'value2'
3.3 So sánh Map và Set
Lợi thế của Map:
- Khóa tùy ý: trong
Mapcác khóa có thể thuộc bất kỳ loại nào, bao gồm cả đối tượng và hàm, không giống như đối tượng chỉ có khóa là chuỗi hoặc ký hiệu. - Phần tử có thứ tự: các phần tử trong
Mapgiữ nguyên thứ tự thêm vào, giúp dễ dàng duyệt qua theo thứ tự thêm vào. - Kích thước bộ sưu tập: phương thức
sizecho phép nhanh chóng biết số lượng phần tử trongMap.
Lợi thế của Set:
- Giá trị duy nhất:
Settự động đảm bảo rằng tất cả các phần tử của nó là duy nhất. - Phần tử có thứ tự: các phần tử trong
Setgiữ nguyên thứ tự thêm vào, giúp dễ dàng duyệt qua theo thứ tự thêm vào. - Hoạt động tối ưu hóa:
Setcung cấp các phương thức tối ưu hóa để thêm, xóa và kiểm tra sự tồn tại của phần tử.
Ví dụ thực tế
Ví dụ sử dụng Map để lưu trữ thông tin về người dùng:
const users = new Map();
users.set(1, { name: 'Alice', age: 25 });
users.set(2, { name: 'Bob', age: 30 });
for (const [id, user] of users) {
console.log(`User ID: ${id}, Name: ${user.name}, Age: ${user.age}`);
}
// User ID: 1, Name: Alice, Age: 25
// User ID: 2, Name: Bob, Age: 30
Ví dụ sử dụng Set để lọc các giá trị duy nhất:
const numbers = [1, 2, 3, 1, 2, 4, 5, 3];
const uniqueNumbers = new Set(numbers);
for (const number of uniqueNumbers) {
console.log(number);
}
// 1
// 2
// 3
// 4
// 5
GO TO FULL VERSION