3.1 集合 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 集合 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