ES6 Map与Set数据结构详解：特性、API与实战应用

作者：木棉时间：2026-10-23 07:29:03浏览：595

本文深入解析ES6引入的Map和Set数据结构。Map支持任意类型键值对，解决Object键名冲突问题；Set确保元素唯一性，常用于数组去重。文章详细列举了Map和Set的属性、方法（如set/get/add/delete）、遍历方式及相互转换技巧，并提供代码示例说明并集、交集与差集运算。

Map 数据结构基础

Map

Map 对象用于存储键值对，且能够保留插入顺序。其键和值可以是任意类型的数据，包括对象或原始值。通过构造函数 Map 可以传入一个数组作为参数来初始化实例。

Map 与 Object 的区别

Object 的键名仅限于字符串或 Symbol 类型，而 Map 的键可以是任意类型的值。

Map 中的键值对保持插入顺序（遵循先进先出原则），而 Object 的键名顺序在早期标准中并未严格定义（尽管现代引擎有特定行为，但语义上不应依赖顺序）。

Map 提供了 size 属性来直接获取键值对的数量，而 Object 需要手动计算或通过 Object.keys() 等方法间接获取。

Object 具有内置的原型链，其原型上的属性可能与用户自定义的属性名冲突；Map 没有原型链问题，不会受到原型属性干扰。

Map 的属性与方法

1.Map对象的属性

•size：返回 Map 对象中包含的键值对总数。

1.Map对象的方法

•set(key, val)：向 Map 中添加新的键值对元素。

•get(key)：根据指定的键查找并返回对应的值。

•has(key)：检查 Map 中是否存在指定的键，若存在返回 true，否则返回 false。

•delete(key)：根据指定的键从 Map 中移除对应的数据项。

•clear()：清空 Map 中的所有元素。


const m1 = new Map([['a', 111], ['b', 222]])
console.log(m1) // {"a" => 111, "b" => 222}
m1.get('a') // 111
const m2 = new Map([['c', 3]])
const m3 = new Map(m2)
m3.get('c') // 3
m3.has('c') // true
m3.set('d', 555)
m3.get('d') // 555

Map 的遍历与转换

1.遍历方法

•keys()：返回包含所有键名的迭代器。

•values()：返回包含所有键值的迭代器。

•entries()：返回包含所有键值对的迭代器，每个元素为 [key, value] 数组。

•forEach()：使用回调函数遍历 Map 中的每个成员，回调函数接收 value, key, map 三个参数。


const map = new Map([['a', 1], ['b', 2]])

for (let key of map.keys()) {
 console.log(key)
}
// "a"
// "b"

for (let value of map.values()) {
 console.log(value)
}
// 1
// 2

for (let item of map.entries()) {
 console.log(item)
}
// ["a", 1]
// ["b", 2]

// 或者
for (let [key, value] of map.entries()) {
 console.log(key, value)
}
// "a" 1
// "b" 2
// for...of...遍历map等同于使用map.entries()
for (let [key, value] of map) {
 console.log(key, value)
}
// "a" 1
// "b" 2

1.map与其他数据结构的互相转换

•map 转换为数组：可以使用扩展运算符 [...] 将 Map 转换为二维数组。


const arr = [[{'a': 1}, 111], ['b': 222]]

const myMap = new Map(arr)

[...myMap] // map转数组。 [[{'a': 1}, 111], ['b': 222]]
•Map与对象的互换
const obj = {}
const map = new Map(['a', 111], ['b', 222])
for(let [key,value] of map) {
 obj[key] = value
}
console.log(obj) // {a:111, b: 222}

•JSON 字符串转换为 Map：需先利用 JSON.parse() 将 JSON 字符串解析为对象或数组，再据此构建 Map 实例。

Set 数据结构基础

Set

Set 对象允许存储任何类型的值，无论是原始值还是对象引用。它类似于数组，但其核心特性是成员值唯一，不存在重复元素。

Set 本身是一个构造函数，用于生成 Set 数据结构。构造函数可以接受一个数组或其他具有 iterable 接口的数据结构作为参数，用于初始化 Set 实例。

Set 中的特殊值处理

Set中的特殊值

Set 存储的值总是唯一的，因此需要判断两个值是否恒等。对于几个特殊值，Set 有特定的处理逻辑：

•+0 与 -0 在 Set 的唯一性判断中被视为恒等，因此它们被视为同一个值，不会重复存储。

•undefined 与 undefined 被视为恒等，因此 Set 中只存储一个 undefined。

•NaN 与 NaN 在严格相等（===）判断中不恒等，但在 Set 内部机制中认为 NaN 等于 NaN，因此 Set 中只能存在一个 NaN，不会重复。

Set 的属性与方法

1.Set实例对象的属性

•size：返回 Set 实例中成员的总数。

1.Set实例对象的方法

•add(value)：添加某个值，返回 Set 结构本身，支持链式调用。

•delete(value)：删除某个值，删除成功返回 true，否则返回 false。

•has(value)：返回一个布尔值，表示该值是否为 Set 的成员。

•clear()：清除 Set 中的所有成员，该方法没有返回值。


const mySet = new Set(['a', 'a', 'b', 1, 2, 1])
console.log(mySet) // {'a', 'b', 1, 2}
myset.add('c').add({'a': 1})
console.log(mySet) // {'a', 'b', 1, 2, 'c', {a: 1}}
console.log(mySet.size) // 6
mySet.has(2) // true

Set 的遍历方法

1.遍历方法

•keys()：返回键名的迭代器。

•values()：返回键值的迭代器。 •entries()：返回键值对的迭代器。

•forEach()：使用回调函数遍历每个成员。

由于 Set 结构没有独立的键名，只有键值（即键名和键值相同），因此 keys() 方法和 values() 方法的行为完全一致。


const set = new Set(['a', 'b', 'c'])
for (let item of set.keys()) {
 console.log(item)
}
// a
// b
// c
for (let item of set.values()) {
 console.log(item)
}
// a
// b
// c
for (let item of set.entries()) {
 console.log(item)
}
// ["a", "a"]
// ["b", "b"]
// ["c", "c"]
// 直接遍历set实例，等同于遍历set实例的values方法
for (let i of set) {
 console.log(i)
}
// a
// b
// c
set.forEach((value, key) => console.log(key + ' : ' + value))
// a: a
// b: b
// c: c

Set 的实际应用场景

1.Set 对象作用

•数组去重：利用扩展运算符 [...] 结合 Set 可以方便地对数组进行去重处理。


const mySet = new Set([1, 2, 3, 4, 4])
[...mySet] // [1, 2, 3, 4]

•合并两个 Set 对象：利用扩展运算符将两个 Set 合并为一个新的 Set。


let a = new Set([1, 2, 3])
let b = new Set([4, 3, 2])
let union = new Set([...a, ...b]) // {1, 2, 3, 4}

•交集：利用数组的 filter 方法结合 Set 的 has 方法求两个 Set 的交集。


let a = new Set([1, 2, 3])
let b = new Set([4, 3, 2])
let intersect = new Set([...a].filter(x => b.has(x))) // {2, 3} 利用数组的filter方法

•差集：利用数组的 filter 方法结合 Set 的 has 方法求两个 Set 的差集。


let a = new Set([1, 2, 3])
let b = new Set([4, 3, 2])
let difference = new Set([...a].filter(x => !b.has(x))) // {1}

总结

以上所述是小编给大家介绍的一文搞懂ES6中的Map和Set,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对本站网站的支持！如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

作者最新文章

JS运算符优先级与结合性的区别是什么？

2026-11-05 13:22:02

JS Map怎么只遍历Key或Value

2026-11-05 13:00:36

D3.js 与 ECharts 选型对比：灵活性 vs 开发效率

2026-11-05 09:45:01

为什么JS中typeof []返回object：数组类型检测误区解析

2026-11-04 19:50:47

D3.js 新手入门：环境搭建与第一个条形图实现

2026-11-04 10:49:48