一文读懂 JS 中的 Map 结构

你好，我是沐爸，欢迎点赞、收藏、评论和关注。

上次聊了 Set 数据结构，今天我们聊下 Map，看看它与 Set、与普通对象有什么区别？下面直接进入正题。

一、Set 和 Map 有什么区别？

• Set 是一个集合，类似于数组，但是成员的值都是唯一的，不能重复。主要用于快速查找、去重等场景。
• Map 是一组键值对的集合，其中每个元素都是一个键值对。与普通的对象不同，Map 的键不仅限于字符串，也可以是任意类型（如对象或函数）。

二、WeakMap 和 Map 的区别？

WeakMap 结构与 Map 结构类似，也是用于生成键值对的集合。两者的区别在于：

• WeakMap 只接受对象（null除外）和 Symbol 值作为键名，不接受其他类型的值作为键名。
• WeakMap 对象不计入垃圾回收机制。
• Map 可遍历，WeakMap 不可遍历。

三、Map 实例有哪些属性和方法？

1.属性：

• size：返回 Map 实例的成员总数

2.方法：

• 操作方法：
  • set(key, value) 添加键值，返回 Map 实例本身
  • get(key) 获取key对应的键值，获取不到返回undefined
  • has(key) 查询该键存在于 Map 对象中，返回一个布尔值
  • delete(key) 删除某个键值对，成功返回true，失败返回false
  • clear() 清除所有成员，没有返回值
• 遍历方法：
  • keys() 返回键名的遍历器
  • values() 返回键值的遍历器
  • entries() 返回键值对的遍历器
  • forEach() 使用回调函数遍历每个成员

// 示例1
const m = new Map();
const o = {p: 'Hello World'};m.set(o, 'content')
m.get(o) // "content"
m.has(o) // true
m.delete(o) // true
m.has(o) // false
m.set(o, 'content')
m.clear()// 示例2
const map = new Map().set(1, 'a').set(2, 'b');for (let item of map.keys()) console.log(item)
// 1
// 2for (let item of map.values()) console.log(item)
// 'a'
// 'b'map.forEach(item => console.log(item))
// 'a'
// 'b'for (let item of map.entries()) console.log(item)
// [1, 'a']
// [2, 'b']

set 方法重复给相同的 key（键）设置值，新值会覆盖旧值。

let map = new Map()
map.set(1, 'a')
map.set(1, 'b')
// Map(1) {1 => 'b'}

set 方法返回的是当前的 Map 对象，因此可以采用链式写法。

const map = new Map().set(1, 'a').set(2, 'b').set(3, 'c');

任何具有 Iterator 接口、且每个成员都是一个双元素的数组的数据结构都可以当作 Map 构造函数的参数。

// 示例1：数组参数
const map = new Map([['name', '张三'],['title', 'Author']
]);// 示例2：Set参数
const set = new Set([[1, 'a'],[2, 'b']
])
const map = new Map(set)
map // Map(2) {1 => 'a', 2 => 'b'}// 示例3：Map参数
const m1 = new Map([[1, 'a']]);
m1 // {1 => 'a'}
const m2 - new Map(m1)
m2 // {1 => 'a'}

Map 具有 iterator 接口，可直接用 for…of 循环遍历。

const map = new Map().set(1, 'a').set(2, 'b');for (let item of map) console.log(item)
// [1, 'a']
// [2, 'b']

只有对同一个对象的引用，Map 结构才将其视为同一个键。这一点要非常小心。

const map = new Map();map.set(['a'], 1);
map.get(['a']) // undefinedlet b = ['b']
map.set(b, 2)
map.get(b) // 2

Map 将两个 NaN 视为相等，将 -0和+0视为相等。

const map = new Map();map.set(-0, 'a')
map.set(+0, 'b')
map.set(NaN, 'c')
map.set(NaN, 'd')map // Map(2) {0 => 'b', NaN => 'd'}

四、Map与数组、对象的相互转换

1.Map 转数组

const map = new Map().set(1, 'a').set(2, 'b');
[...map]  // [[1, 'a'], [2, 'b']]

2.Map 转对象

const map = new Map().set(1, 'a').set(2, 'b');function mapToObj(map) {let obj = {}for (let [key, value] of map) {obj[key] = value}return obj
}mapToObj(map) // {1: 'a', 2: 'b'}

3.数组转 Map

const arr = [[1, 'a'],[2, 'b']
]
const map = new Map(arr)
map // Map(2) {1 => 'a', 2 => 'b'}

4.对象转 Map

const obj = {1: 'a', 2: 'b'}
const map = new Map(Object.entries(obj))
map // Map(2) {'1' => 'a', '2' => 'b'}

五、Map 的使用场景有哪些？

• 快速查找：当你需要存储键值对，并希望根据键快速检索值时，Map是理想选择。
• 非字符串键：对象通常只能使用字符串作为键，而 Map 允许使用任何类型的值（包括对象、数组、函数等）作为键。
• 有序集合：Map 保持键值对的插入顺序，这在需要按照特定顺序处理元素时很有用。
• 数据缓存：Map 的 delete 和 clear 方法提供了管理缓存数据的便利方式，有助于避免内存泄漏。

六、WeakMap 如何使用？

• WeakMap 只接受对象（null除外）和 Symbol 值作为键名，不接受其他类型的值作为键名
• 有4个方法：get、set、has，delete，用法同 Map
• 没有 size 属性和 clear 方法，不支持遍历，for/forEach/keys()/values()/entries()都不能用

const wm = new WeakMap();wm.set(1, 2) // 报错
wm.set(null, 2) // 报错
wm.set(Symbol(), 2) // 不报错
wm.set({}, 2) // 不报错// size、forEach、clear 方法都不存在
wm.size // undefined
wm.forEach // undefined
wm.clear // undefined

七、WeakMap 的使用场景？

• 对象关联数据：将特定数据关联到对象上，而不用担心这些数据影响对象的垃圾回收。
• 缓存：作为缓存结构，自动处理无用对象的内存回收，避免内存泄漏。
• 私有数据存储：提供一种方式存储对象的私有数据，外部无法直接访问。
• 解决循环引用：在复杂的对象图中，帮助处理循环引用导致的内存回收问题。

关联阅读：一文读懂 JS 中的 Set 结构

好了，分享结束，谢谢点赞，下期再见。