Set 和 Map 的区别

• Set 主要应用场景为 数据重组 ，Map 主要应用场景为 数据储存。
• Set 是一种叫做集合的数据结构，Map 是一种叫做字典的数据结构。

集合 与 字典 的区别：

• 共同点：集合、字典 可以储存不重复的值
• 不同点：集合 是以 [value, value]的形式储存元素，字典 是以 [key, value] 的形式储存

集合（Set）

特性：只存储唯一的值（成员只出现一次） 且不排序

使用场景：去重 判断元素是否存在等

基本方法:

• set.add(value) 添加元素
• set.delete(value) 删除元素 返回 true（删除成功）或 false
• set.has(value) 判断 是否存在 value 值
• set.clear() 清空集合

// 创建一个新的Set
let set = new Set();

// 添加元素
set.add(1);
set.add(2);
set.add(3);
set.add(2); // 重复添加不会改变Set

// 检查元素是否存在
console.log(set.has(2)); // 输出: true

// 删除元素
set.delete(2);
console.log(set.has(2)); // 输出: false

获取基本信息

• set.size 获取集合大小

// 创建一个新的Set
let set = new Set();

// 添加元素
set.add(1);
set.add(2);
set.add(3);

// 获取Set的大小
console.log(set.size); // 输出: 3

遍历方法

• set.forEach() for..of.. 顺序可能与插入顺序不同
• set.values() 返回 Iterator 对象 按插入顺序存入的每个元素的值
• set.keys() 同 values()
• set.entries() 返回 Iterator 对象 个元素的 [value, value] 对

// 创建一个新的Set
let set = new Set();

// 添加元素
set.add(1);
set.add(2);
set.add(3);

// 遍历Set
for (let item of set) {
  console.log(item); // 输出: 1, 3（顺序可能与插入顺序不同）
}

// 使用forEach方法遍历Set
set.forEach((item) => {
  console.log(item);
}); // 输出: 1, 3（顺序可能与插入顺序不同）

转换方法

• Array.from(set) 或 [ ...set ]

// 创建一个新的Set
let set = new Set();

// 添加元素
set.add(1);
set.add(2);
set.add(3);

// 转换为数组
let setArray = Array.from(set);
console.log(setArray); // 输出: [1, 2, 3]（顺序可能与插入顺序不同）

字典（Map）

特性：存储为键值对，key 的类型不受限制

使用场景：存储键值对的配置信息、构建字典、缓存等

基本方法:

1. map.set(key,value) 设置键值对：如果键已存在 则更新值。
2. map.get(key) 获取指定键 key 的 value 值：找不到返回 undefined
3. map.has(key) 判断 是否有这个值
4. map.delete(key) 删除 某个键值对 返回 true 或 false
5. map.clear() 清除所有键值对

let map = new Map();

// 添加键值对
map.set(1, "a");
map.set(2, "b");
map.set({ name: "张三" }, "zs");
console.log(map); // {1 => 'a', 2 => 'b', {…} => 'zs'}

// 获取值
console.log(map.get(1)); // 'a'

// 检查键是否存在
console.log(map.has(1)); // 判断 true

// 删除键值对
map.delete(1); // 删除
console.log(map.has(1)); // 判断 false

获取基本信息

• map.size 获取集合大小

    // 获取Map的大小
    console.log(map.size); // 3

遍历方法

1. map.forEach() 或 for..of
2. map.keys() 返回一个新的 Iterator 对象，它按插入顺序包含了 Map 对象中每个元素的键。
3. map.values() 返回一个新的 Iterator 对象，它按插入顺序包含了 Map 对象中每个元素的值。
4. map.entries() 返回一个新的 Iterator 对象，它按插入顺序包含了 Map 对象中每个元素的 [key, value] 对

let map = new Map();

// 添加键值对
map.set(1, "a");
map.set(2, "b");
map.set({ name: "张三" }, "zs");

// 遍历
for (let item of map) {
  console.log(item); // 循环一次的结果 [ 2,"b"]
}
for (let [key, value] of map) {
  console.log(key, value); // 循环一次的结果 2 "b"
}

// 遍历Map的键
for (let key of map.keys()) {
  console.log(key); // 输出: 2
}

// 遍历Map的值
for (let value of map.values()) {
  console.log(value); // 输出: b
}

// 使用forEach方法遍历Map
map.forEach((value, key) => {
  console.log(key, value);
});

转换方法

• 遍历 entries() 方法返回的 Iterator 对象，并使用数组方法或其他方式来转换 Map 对象

let map = new Map();

// 添加键值对
map.set(2, "b");
map.set({ name: "张三" }, "zs");

//  转为数组
let arr = Array.from(map);
console.log(arr); // [[2, 'b'],[{…}, 'zs']]

let arr = [...map.entries()];
console.log(arr); // [[2, 'b'],[{…}, 'zs']]

// 转为对象 谨慎使用 转为对象的键为字符串
let obj = Object.fromEntries(map);
console.log(obj); // {2: 'b', [object Object]: 'zs'}

如果觉得这篇文章帮助到了您，麻烦给这个小博主点点赞~😝 若有疑惑或想和小伙伴一起分享，评论区的大门随时为你敞开💕