JavaScript中Map和Set数据结构使用方法详解
作者：红虾程序员
一、Map
1. 定义与特点
Map 是 JavaScript ES6 中新增的一种数据结构，它类似于对象，但比对象更强大、更灵活。Map是一种键值对集合，可以存储任意类型的键和值，与普通对象不同，Map保留了键的原始插入顺序，并支持链式调用。Map的键可以是任何类型的数据，包括对象和函数。
2. 创建Map对象
使用
new Map()构造函数
使用字面量语法
const map = new Map(); const map = new Map([['key1', 'value1'], ['key2', 'value2']]);
3. 常用方法
添加键值对：
set(key, value)
获取键对应的值：
get(key)
检查键是否存在：
has(key)
删除键值对：
delete(key)
清空Map：
clear()
获取Map大小：
size
map.set('key1', 'value1');
console.log(map.get('key1')); // 输出: value1
console.log(map.has('key1')); // 输出: true
map.delete('key1');
map.clear();
console.log(map.size); // 输出: 0(当前Map中键值对的数量)4. 遍历Map
Map提供了多种遍历方法：
forEach()：遍历Map中的每个键值对，接受一个回调函数。
for...of方法：keys() ：返回一个包含所有键的迭代器，values() ：返回一个包含所有值的迭代器，entries() ：返回一个包含所有键值对的迭代器。
const map = new Map([['key1', 'value1'], ['key2', 'value2']]);
// 使用 forEach 方法遍历
map.forEach((value, key) => {
console.log(key, value);
});
// 使用 for...of 循环遍历
for (let [key, value] of map) {
console.log(key, value);
}
// 使用 keys()、values() 和 entries() 方法遍历
for (let key of map.keys()) {
console.log(key);
}
for (let value of map.values()) {
console.log(value);
}
for (let [key, value] of map.entries()) {
console.log(key, value);
}5. Map与对象的区别
| 特性 | Map | 对象 |
|---|---|---|
| 键的类型 | 可以是任何数据类型，包括对象、函数、基本类型等 | 只能是字符串或符号类型 |
| 键的顺序 | 按插入顺序保留键值对 | 键的遍历顺序可能会根据不同的 JavaScript 引擎有所不同 |
| 大小属性 | 有 size 属性，可以直接获取键值对的数量 | 没有内置的 size 属性，需要手动计算 |
| 迭代方式 | 可直接迭代，使用 for...of 循环或 forEach 方法 | 需要先获取键数组，然后进行迭代 |
| 默认键 | 没有默认键 | 继承自 Object.prototype，可能会有默认键 |
| 性能 | 在频繁增删键值对的操作中通常比对象更高效 | 适用于结构化的静态数据 |
| 序列化/解析 | 没有内置的序列化或解析支持，但可以自定义实现 | 可以使用 JSON.stringify 和 JSON.parse 进行序列化和解析 |
| 创建方式 | 使用 new Map() 构造函数或传递可迭代对象初始化 | 使用字面量语法 {} 或构造函数 new Object() 创建 |
| 方法 | 提供 set, get, has, delete, clear, keys, values, entries 等方法 | 提供 hasOwnProperty, in 运算符等方法 |
二、Set
1. 定义与特点
Set 也是 JavaScript ES6 中新增的一种数据结构，它类似于数组，但成员的值都是唯一的，没有重复的值。Set内部通过哈希算法保证元素的唯一性和快速查找。
2. 创建Set对象
使用
new Set()构造函数
使用字面量语法
const set = new Set(); const set = new Set([1, 2, 3, 4]);
3. 常用方法
添加元素：
add(value)
删除元素：
delete(value)
检查元素是否存在：
has(value)
清空Set：
clear()
获取Set大小：
size
set.add(5); set.delete(5); console.log(set.has(5)); // 输出: false set.clear(); console.log(set.size); // 输出: 0(当前Set中元素的数量)
4. 遍历Set
Set提供了多种遍历方法：
forEach()：遍历Set中的每个元素，接受一个回调函数。
for...of方法：keys()：返回一个包含所有元素的迭代器（Set本身就是无序的，因此
keys()和values()返回的结果相同），values()：返回一个包含所有元素的迭代器，entries()：返回一个包含所有键值对的迭代器（Set中没有键，因此返回的结果与values()相同）。
const set = new Set([1, 2, 3, 4]);
// 使用 forEach 方法遍历
set.forEach((value) => {
console.log(value);
});
// 使用 for...of 循环遍历
for (let value of set) {
console.log(value);
}
// 使用 values()、keys() 和 entries() 方法遍历
for (let value of set.values()) {
console.log(value);
}
for (let key of set.keys()) {
console.log(key);
}
for (let [key, value] of set.entries()) {
console.log(key, value);
}5. 应用场景
数据去重
Set对象的一个核心用途是去除重复值。当需要从数组中移除重复项时，可以使用Set来实现。
const numbers = [1, 2, 3, 4, 5, 5, 6, 6, 6];
const uniqueNumbers = new Set(numbers);
console.log(uniqueNumbers); // 输出: Set {1, 2, 3, 4, 5, 6}这种用法在处理数据时非常常见，特别是在需要确保集合中元素唯一性的情况下。
集合运算
Set对象支持多种集合运算，包括交集、并集和差集。
const setA = new Set([1, 2, 3]);
const setB = new Set([3, 4, 5]);
const intersection = new Set([...setA].filter(x => setB.has(x)));
console.log(intersection); // 输出: Set {3}通过这些运算，可以方便地对集合进行数学上的操作。
遍历集合
Set对象提供了多种方法来遍历集合中的元素，例如forEach()、values()和keys()等，这些方法使得遍历和操作集合更加灵活。
const set = new Set([1, 2, 3]); set.forEach(value => console.log(value)); const values = Array.from(set.values()); console.log(values); // 输出: [1, 2, 3] const keys = Array.from(set.keys()); console.log(keys); // 输出: [1, 2, 3]
总结
到此这篇关于JavaScript中Map和Set数据结构使用方法的文章就介绍到这了,更多相关JS中Map和Set数据结构内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！