JavaScript中Set和Map的存储内容、键类型及应用场景详解

文章介绍了Set和Map两种数据结构，Set存储唯一值且无序,支持快速查找和去重,Map以键值对形式存储,键可为任意类型,保持插入顺序,适用于复杂键管理和缓存场景,两者在存储内容、键类型及应用场景上有明显区别,感兴趣的朋友跟随小编一起看看吧。

一、Set（集合）

1.1 Set 的基本特性

• 唯一性：Set 中的每个值只能出现一次，重复的值会被自动忽略。

• 无序性：Set 中的值没有顺序。

• 可迭代：Set 支持 for...of 循环和 forEach 方法。

• 值的类型：Set 可以存储任意类型的值（包括基本类型和引用类型）。

1.2 创建 Set

使用 new Set() 创建一个集合。

const set = new Set(); // 创建一个空集合

1.3 Set 的常用方法

以下是 Set 的核心方法：

（1）set.add(value)

向集合中添加一个值。如果值已存在，则不会重复添加。

set.add(1); 
set.add(2); 
set.add(2); // 重复值会被忽略 
console.log(set); // 输出 Set { 1, 2 }

（2）set.has(value)

判断集合中是否包含某个值。如果键是对象或者数组，比较的是引用地址，内容一样也不行。

console.log(set.has(1)); // 输出 true
console.log(set.has(3)); // 输出 false

（3）set.delete(value)

从集合中删除某个值。如果删除成功，返回 true；否则返回 false。

set.delete(1); // 删除值为 1 的元素
console.log(set); // 输出 Set { 2 }

（4）set.clear()

清空集合中的所有值。

set.clear();
console.log(set); // 输出 Set {}

（5）set.size

获取集合中值的数量。

console.log(set.size); // 输出集合的大小

1.4 Set 的遍历方法

Set 提供了多种遍历方式：

（1）for...of循环

const set = new Set([1, 2, 3]);
for (const value of set) {
  console.log(value); // 依次输出 1, 2, 3
}

（2）set.forEach()

set.forEach((value) => {
  console.log(value); // 依次输出 1, 2, 3
});

（3）set.values()

返回一个包含集合中所有值的迭代器。

const valuesIterator = set.values();
for (const value of valuesIterator) {
  console.log(value); // 依次输出 1, 2, 3
}

（4）set.keys()

set.keys() 是 set.values() 的别名，行为完全相同。

const keysIterator = set.keys();
for (const key of keysIterator) {
  console.log(key); // 依次输出 1, 2, 3
}

（5）set.entries()

返回一个包含 [value, value] 对的迭代器（为了与 Map 的 API 保持一致）。

const entriesIterator = set.entries();
for (const [key, value] of entriesIterator) {
  console.log(key, value); // 依次输出 1 1, 2 2, 3 3
}

1.5 Set 的应用场景

（1）数组去重

const array = [1, 2, 2, 3, 4, 4];
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // 输出 [1, 2, 3, 4]

（2）集合运算

并集：

const set1 = new Set([1, 2, 3]);
const set2 = new Set([3, 4, 5]);
const union = new Set([...set1, ...set2]);
console.log(union); // 输出 Set { 1, 2, 3, 4, 5 }

交集：

const intersection = new Set([...set1].filter(x => set2.has(x)));
console.log(intersection); // 输出 Set { 3 }

差集：

const difference = new Set([...set1].filter(x => !set2.has(x)));
console.log(difference); // 输出 Set { 1, 2 }

（3）存储唯一值

const uniqueValues = new Set();
uniqueValues.add(1);
uniqueValues.add(2);
uniqueValues.add(1); // 重复值会被忽略
console.log(uniqueValues); // 输出 Set { 1, 2 }

二、Map（映射）

2.1 Map 的基本特性

• 键值对存储：Map 存储的是键值对（key-value pairs）。

• 键的类型：Map 的键可以是任意类型（包括对象、函数等），而对象的键只能是字符串或 Symbol。

• 顺序性：Map 会记住键值对的插入顺序。

• 性能：Map 在频繁增删键值对的场景下性能更好。

2.2 创建 Map

使用 new Map() 创建一个映射。

const map = new Map(); // 创建一个空映射

2.3 Map 的常用方法

以下是 Map 的核心方法：

（1）map.set(key, value)

向 Map 中添加或更新键值对。

map.set('name', 'Alice');
map.set(1, 'Number One');
map.set({ id: 1 }, 'Object Key');

（2）map.get(key)

根据键获取对应的值。如果键不存在，返回 undefined。

console.log(map.get('name')); // 输出 "Alice"
console.log(map.get('age'));  // 输出 undefined

（3）map.has(key)

判断 Map 中是否存在指定的键。如果键是对象或者数组，比较的是引用地址，内容一样也不行。

console.log(map.has('name')); // 输出 true
console.log(map.has('age'));  // 输出 false

（4）map.delete(key)

删除指定键的键值对。如果删除成功，返回 true；否则返回 false。

map.delete('name'); // 删除键为 'name' 的键值对

（5）map.clear()

清空 Map 中的所有键值对。

map.clear();

（6）map.size

获取 Map 中键值对的数量。

console.log(map.size); // 输出当前键值对的数量

2.4 Map 的遍历方法

Map 提供了多种遍历方式：

（1）map.keys()

返回一个包含所有键的迭代器。

（2）map.values()

返回一个包含所有值的迭代器。

（3）map.entries()

返回一个包含所有键值对的迭代器（默认迭代器）。

（4）map.forEach()

遍历 Map 中的每个键值对。

for (const key of map.keys()) {
 console.log(key); 
}
for (const value of map.values()) {
 console.log(value); 
}
for (const [key, value] of map.entries()) {
 console.log(key, value); 
}
map.forEach((value, key) => {
  console.log(key, value);
});

2.5 Map 的应用场景

（1）存储键值对

const userMap = new Map();
userMap.set(1, { name: 'Alice' });
userMap.set(2, { name: 'Bob' });
console.log(userMap.get(1)); // 输出 { name: 'Alice' }

（2）复杂键

const objKey = { id: 1 };
const map = new Map();
map.set(objKey, 'Value for object key');
console.log(map.get(objKey)); // 输出 "Value for object key"

（3）缓存数据

const cache = new Map();
function fetchData(key) {
  if (cache.has(key)) {
    return cache.get(key);
  }
  const data = `Data for ${key}`;
  cache.set(key, data);
  return data;
}
console.log(fetchData('user1')); // 输出 "Data for user1"
console.log(fetchData('user1')); // 从缓存中读取

（4）修改key值或者修改value值

1，修改key值：

如果需要修改键，可以按照以下步骤操作：

1. 删除旧的键值对：使用 map.delete(key)。

2. 添加新的键值对：使用 map.set(newKey, value)。

2，修改value值：

使用 map.set(key, newValue) 更新键值对。

三、Set 和 Map 的区别

特性	Set	Map
存储内容	唯一值（values）	键值对（key-value pairs）
键的类型	无键，只有值	任意类型（包括对象、函数等）
值的唯一性	值唯一	键唯一，值可以重复
顺序性	记住插入顺序	记住插入顺序
常用方法	add、has、delete	set、get、has、delete
应用场景	存储唯一值，去重	存储键值对，快速查找

到此这篇关于JavaScript 中 Set 和 Map 的示例详解的文章就介绍到这了,更多相关js set和map内容请搜索IT百事网以前的文章或继续浏览下面的相关文章希望大家以后多多支持IT百事网！