JavaScript中的Set和Map：理解与使用

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_优快云博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

• • 摘要：
    • 引言：
    • 正文：
    • • 1. 🌟 Set：集合数据结构
        • 2. 🛠️ Map：键值对集合数据结构
        • 3. 📝 Set和Map的应用场景
    • 总结：
    • 参考资料：

摘要：

本文将探讨JavaScript中的Set和Map数据结构。我们将了解它们的特点、用途以及如何使用它们。通过学习Set和Map，你将能更有效地管理集合数据。📚

引言：

在JavaScript中，我们经常需要处理集合数据。Set和Map是ES6引入的两种新的数据结构，它们提供了更强大的集合操作功能。本文将带你深入了解Set和Map，并学会如何使用它们。

正文：

1. 🌟 Set：集合数据结构

Set是一种新的数据结构，它类似于数组，但成员的值都是唯一的，没有重复的值。Set本身是一个构造函数，可以通过调用new Set()来创建一个新的Set实例。

Set的主要特点和用法如下：

• 添加成员：使用add(value)方法添加成员。
• 删除成员：使用delete(value)方法删除成员。
• 检查成员：使用has(value)方法检查成员是否存在。
• 遍历成员：使用forEach()方法或for...of循环遍历成员。

const mySet = new Set();
mySet.add('apple');
mySet.add('banana');
mySet.add('apple'); // 重复的值不会被添加
mySet.delete('banana'); // 删除成员
mySet.has('apple'); // 检查成员是否存在
mySet.forEach(value => {
  console.log(value);
});

2. 🛠️ Map：键值对集合数据结构

Map是另一种新的数据结构，它类似于对象，但键的范围不仅限于字符串，还可以是其他类型，如数字、对象等。Map存储键值对，并允许我们通过键来快速检索对应的值。

Map的主要特点和用法如下：

• 添加键值对：使用set(key, value)方法添加键值对。
• 获取值：使用get(key)方法通过键获取对应的值。
• 删除键值对：使用delete(key)方法删除指定的键值对。
• 检查键：使用has(key)方法检查Map中是否存在指定的键。
• 遍历键值对：使用forEach()方法或for...of循环遍历键值对。

const myMap = new Map();
myMap.set('apple', 1);
myMap.set('banana', 2);
myMap.get('apple'); // 获取键'apple'对应的值
myMap.delete('banana'); // 删除键'banana'及其对应的值
myMap.has('apple'); // 检查Map中是否存在键'apple'
myMap.forEach((value, key) => {
  console.log(key, value);
});

3. 📝 Set和Map的应用场景

Set和Map在实际开发中有许多应用场景。例如，你可以使用Set来去重数组、生成唯一的标识符，或管理集合中的元素。Map则可以用于存储键值对，如用户信息、缓存数据等。

// 使用Set去除数组中的重复元素
const numbers = [1, 2, 2, 3, 4, 4, 5];