当前位置：首页 > news >正文

JavaScript篇：解密ES6的“藏宝图“：Set和Map的奇妙冒险

news 来源：原创 2025/5/24 5:58:56

大家好，我是江城开朗的豌豆，一名拥有6年以上前端开发经验的工程师。我精通HTML、CSS、JavaScript等基础前端技术，并深入掌握Vue、React、Uniapp、Flutter等主流框架，能够高效解决各类前端开发问题。在我的技术栈中，除了常见的前端开发技术，我还擅长3D开发，熟练使用Three.js进行3D图形绘制，并在虚拟现实与数字孪生技术上积累了丰富的经验，特别是在虚幻引擎开发方面，有着深入的理解和实践。

我一直认为技术的不断探索和实践是进步的源泉，近年来，我深入研究大数据算法的应用与发展，尤其在数据可视化和交互体验方面，取得了显著的成果。我也注重与团队的合作，能够有效地推动项目的进展和优化开发流程。现在，我担任全栈工程师，拥有CSDN博客专家认证及阿里云专家博主称号，希望通过分享我的技术心得与经验，帮助更多人提升自己的技术水平，成为更优秀的开发者。

Set：独一无二的珍宝箱

Set的基本用法

Set的三大特性

实际应用场景

Map：键值对的密码本

Map的基本用法

Map的五大优势

实际应用场景

Set和Map的内部原理探秘

Set的实现机制

Map的实现机制

性能特点

常见误区与最佳实践

1. 误用引用类型作为键

2. 忽略遍历顺序

3. 最佳实践建议

总结：选择合适的"藏宝工具"

大家好，我是你们的老朋友，一个在前端江湖摸爬滚打多年的开发者。今天我要带大家探索ES6中两个强大的数据结构——Set和Map。它们就像是JavaScript世界的"藏宝图"和"密码本"，掌握了它们，你的代码将变得更加强大和优雅。

Set：独一无二的珍宝箱

想象你有一个珍宝箱，但这个箱子有个神奇的特性——它永远不会存放重复的宝物。这就是Set的本质，一个不允许重复值的集合。

Set的基本用法

// 创建一个新的珍宝箱
const myTreasureBox = new Set();// 往箱子里添加宝物
myTreasureBox.add('gold');
myTreasureBox.add('silver');
myTreasureBox.add('gold'); // 这个不会被添加进去console.log(myTreasureBox); // Set(2) {'gold', 'silver'}
console.log(`我的珍宝箱里有 ${myTreasureBox.size} 件宝物`); // 我的珍宝箱里有 2 件宝物

Set的三大特性

唯一性：自动去重，相同的值只能存在一个
快速查找：使用has方法可以快速判断是否包含某个值
有序遍历：按照插入顺序迭代

实际应用场景

// 场景1：数组去重
const duplicateItems = ['apple', 'banana', 'apple', 'orange'];
const uniqueItems = [...new Set(duplicateItems)];
console.log(`我去重后的水果有: ${uniqueItems.join(', ')}`);// 场景2：追踪用户访问
const visitedPages = new Set();
function trackPageVisit(page) {if (!visitedPages.has(page)) {visitedPages.add(page);console.log(`我首次访问了 ${page}`);}
}

Map：键值对的密码本

如果说Set是珍宝箱，那么Map就是一个高级的密码本，你可以用任何类型的钥匙（键）来查找对应的内容（值）。

Map的基本用法

// 创建我的密码本
const mySecretMap = new Map();// 存储秘密信息
mySecretMap.set('name', 'John');
mySecretMap.set(123, '数字密码');
mySecretMap.set({key: 'obj'}, '对象作为键');console.log(`我的名字是: ${mySecretMap.get('name')}`); // 我的名字是: John
console.log(`数字密码是: ${mySecretMap.get(123)}`); // 数字密码是: 数字密码

Map的五大优势

任意类型键：不像普通对象只能使用字符串或Symbol作为键
保持插入顺序：遍历时会按照插入顺序返回键值对
性能优化：在频繁增删键值对的场景下表现更好
直接获取大小：通过size属性直接获取键值对数量
内置迭代方法：提供keys(), values(), entries()等方法

实际应用场景

// 场景1：DOM节点元数据存储
const nodeMetadata = new Map();
const myElement = document.querySelector('#myElement');// 存储元数据而不污染DOM
nodeMetadata.set(myElement, {clickCount: 0});// 事件处理
myElement.addEventListener('click', () => {const data = nodeMetadata.get(myElement);data.clickCount++;console.log(`我被点击了 ${data.clickCount} 次`);
});// 场景2：复杂数据缓存
const apiCache = new Map();
async function fetchData(url) {if (apiCache.has(url)) {console.log('我从缓存中获取数据');return apiCache.get(url);}console.log('我发起网络请求获取数据');const response = await fetch(url);const data = await response.json();apiCache.set(url, data);return data;
}

Set和Map的内部原理探秘

Set的实现机制

Set内部使用了一种叫做"哈希表"的数据结构。当你添加一个值时：

JavaScript会计算这个值的哈希码
根据哈希码决定存储位置
如果该位置已经有相同的值（通过严格相等比较），则不会重复存储

Map的实现机制

Map同样基于哈希表，但存储的是键值对：

对键计算哈希码
根据哈希码存储键值对
使用严格相等来比较键（除了NaN，Map认为NaN等于NaN）

性能特点

查找时间：平均情况下是O(1)，最坏情况下是O(n)
插入删除：通常很快，但可能需要重新哈希
内存占用：比普通对象稍高，因为要维护额外的数据结构

常见误区与最佳实践

1. 误用引用类型作为键

const map = new Map();
map.set({key: 'a'}, 'value1');
map.set({key: 'a'}, 'value2'); // 这是两个不同的键！console.log(map.size); // 2

解决方案：使用相同的对象引用

const keyObj = {key: 'a'};
map.set(keyObj, 'value1');
map.set(keyObj, 'value2'); // 这会覆盖前一个值
console.log(map.size); // 1

2. 忽略遍历顺序

const map = new Map();
map.set('z', 1);
map.set('a', 2);// 会按照插入顺序 ('z', 'a') 输出
for (const [key, value] of map) {console.log(`我的键值对: ${key} => ${value}`);
}