JavaScript中Map和Set数据结构使用方法详解

更新时间：2025年03月26日 08:46:26 作者：红虾程序员

这篇文章主要介绍了JavaScript中Map和Set数据结构使用方法的相关资料,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数据结构内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

javascript模拟命名空间
JavaScript 没有任何特定语言功能来支持命名空间，但很容易使用对象来模拟命名空间。今天我们就来探讨下这个问题，希望大家能够喜欢。
2015-04-04
JS正则表达式验证密码格式的集中情况总结
这篇文章主要介绍了JS正则表达式验证密码格式的集中情况总结,需要的朋友可以参考下
2017-02-02
JS实现的N多简单无缝滚动代码(包含图文效果)
这篇文章主要介绍了JS实现的N多简单无缝滚动代码,包含了文字及图文等多种滚动效果,涉及JavaScript递归调用及定时函数触发实现页面元素动态变换的相关技巧,需要的朋友可以参考下
2015-11-11
微信小程序如何实现点击图片放大功能
这篇文章主要介绍了微信小程序如何实现点击图片放大功能,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-01-01
js实现列表自动滚动循环播放
这篇文章主要为大家详细介绍了js实现列表自动滚动循环播放，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
JavaScript处理中文字符串的Base64编码与解码的两种方法
这篇文章主要介绍了在 JavaScript 中处理中文字符串的 Base64 编码与解码,解释了 Base64 编码与中文字符冲突的原因,分别阐述了手动实现和使用TextEncoder和TextDecoder API 两种方法,包括编码和解码的具体实现及示例,最后总结了两种方法的适用场景
2025-01-01
JS中document获取元素的常用方法(附案例)
这篇文章主要介绍了JS中document获取元素的常用方法,并提供了具体的示例代码,这些方法涵盖了从单个元素到多个元素的获取方式,需要的朋友可以参考下
2025-05-05
JavaScript实现数组去重的十种方法分享
去重是开发中经常会碰到的一个热点问题，这篇文章主要介绍了JavaScript中实现数组去重的10种方法，文中的示例代码讲解详细，感兴趣的可以了解一下
2022-11-11
微信小程序实现时间预约功能
这篇文章主要为大家详细介绍了微信小程序实现时间预约基本功能，一个类似电商的时间预约功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-11-11
微信小程序中网络请求缓存的解决方法
这篇文章主要给大家介绍了关于微信小程序中网络请求缓存的解决方法，文中通过示例代码介绍的非常详细，对大家学习或者使用微信小程序具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-12-12