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

一文读懂 JS 中的 Map 结构

article 2024/9/22 11:36:57

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

上次聊了 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
// 2

for (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']) // undefined

let 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