3.1 Collection Map
在 ECMAScript 2015 (ES6) 裡，JavaScript 加入了兩種新的資料結構：Map 和 Set。
這些資料結構提供了比傳統的物件和陣列更靈活和有效的方式來存儲和管理資料集合。
Map 是一種資料結構，它允許存儲 鍵值對，其中鍵可以是任何類型，包括物件和函數。
1. 創建和初始化 Map：
JavaScript
const map = new Map();
2. 添加元素：
set 方法用於向 Map 中添加新的鍵值對。
JavaScript
map.set('key1', 'value1');
map.set(2, 'value2');
map.set({ name: 'objectKey' }, 'value3');
3. 獲取元素：
get 方法用於根據鍵獲取值。
JavaScript
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. 檢查鍵是否存在：
has 方法用於檢查鍵是否存在於 Map 中。
JavaScript
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. 刪除元素：
delete 方法用於根據鍵刪除元素。
JavaScript
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. 清除 Map：
clear 方法用於刪除 Map 中的所有元素。
JavaScript
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. 遍歷 Map：
你可以使用 for...of 迴圈來遍歷 Map。
範例：
JavaScript
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 Collection Set
Set 是一種資料結構，它允許存儲 任何類型的唯一值，
包括物件和原始值。
1. 創建和初始化 Set：
JavaScript
const set = new Set();
2. 添加元素：
add 方法用於向 Set 中添加新值。
JavaScript
set.add(1);
set.add('value2');
set.add({ name: 'objectValue' });
3. 檢查值是否存在：
has 方法用於檢查值是否存在於 Set 中。
JavaScript
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. 刪除元素：
delete 方法用於從 Set 中刪除值。
JavaScript
const set = new Set();
set.add(1);
set.add('value2');
set.add({ name: 'objectValue' });
set.delete(1);
console.log(set.has(1)); // false
5. 清除 Set：
clear 方法用於刪除 Set 中的所有元素。
JavaScript
const set = new Set();
set.add(1);
set.add('value2');
set.add({ name: 'objectValue' });
set.clear();
console.log(set.size); // 0
6. 遍歷 Set：
你可以使用 for...of 迴圈來遍歷 Set。
JavaScript
const set = new Set();
set.add(1);
set.add('value2');
for (const value of set) {
console.log(value);
}
// 1
// 'value2'
3.3 Map 和 Set 的比較
Map 的優勢：
- 隨意鍵: 在
Map中，鍵可以是任何類型，包括物件和函數，而在物件中，鍵只能是字串或符號。 - 有序元素:
Map中的元素保留插入順序，這使得以插入順序遍歷它們更容易。 - 集合大小:
size方法允許快速獲取Map中的元素數量。
Set 的優勢：
- 唯一值:
Set自動確保其所有元素都是唯一的。 - 有序元素:
Set中的元素保留插入順序，這使得以插入順序遍歷它們更容易。 - 優化的操作:
Set提供了優化的添加、刪除和檢查存在性的方法。
實際範例
使用 Map 存儲用戶信息的範例：
JavaScript
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
使用 Set 過濾唯一值的範例：
JavaScript
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