Map与WeakMap的区别

WeakMap要求key必须是一个对象类型。
Map和WeakMap的最大区别在于,Map中key是一个强引用类型,WeakMap是一个弱引用类型。

使用Map代码:

		let obj = { message: "HelloWorld" };
        let oneMap = new Map();
        oneMap.set(obj, 'map');


        obj = null
        console.log(oneMap);

结果:
在这里插入图片描述
当obj删除了对 {message: “HelloWorld”} 的引用后,由于Map是采用强引用, {message: “HelloWorld”} 将不会被内存删除。

使用WeakMap代码:

        let obj = { message: "HelloWorld" };
        let weakmap = new WeakMap();
        weakmap.set(obj, 'weakmap');


        obj = null
        console.log(weakmap);

结果:
在这里插入图片描述
当obj删除了对 {message: “HelloWorld”} 的引用后,由于没有其他操作对 {message: “HelloWorld”} 的强引用,于是 {message: “HelloWorld”} 将会在内存中被删除。

### JavaScriptMap WeakMap区别及用法 #### 定义基本特性 `Map` `WeakMap` 都是 JavaScript 提供的数据结构,用于存储键值对。然而,它们的设计目标适用场景存在显著差异。 - **Map**: 是一种通用的集合数据结构,允许任何类型的值作为键或值[^1]。它提供了丰富的操作方法,如 `.set()`、`.get()`、`.delete()` `.clear()` 等。 - **WeakMap**: 主要设计目的是支持更灵活的对象生命周期管理。它的键必须是对象类型,并且这些对象不会阻止垃圾回收机制的工作[^3]。 #### 键的约束条件 - 对于 `Map` 而言,其键可以是任意类型的数据,无论是原始值(如字符串、数字)还是复杂对象都可以充当键。 - 反之,在 `WeakMap` 中,仅限于使用对象作为键。如果尝试传入非对象类型的键,则会抛出错误。 #### 垃圾回收行为 这是两者间最重要的不同之处之一: - 当某个对象被设置为 `WeakMap` 的键时,即使该对象不再有其他引用指向它,只要没有外部强引用维持住这个对象的存在状态,那么此对象就可能随时被销毁并释放内存空间[^4]。 - 相较之下,普通的 `Map` 不具备这样的功能;一旦某项被加入到常规意义上的映射表里边去以后,除非显式调用了删除命令或者清空整个容器的操作之外,默认情况下是不会自动移除掉那些条目的。 #### 方法集对比 | Method | Available in Map? | Available in WeakMap? | |--------------|-------------------|------------------------| | .set(key, value) | Yes | No | | .get(key) | Yes | Yes | | .has(key) | Yes | Yes | | .delete(key) | Yes | Yes | | .size | Yes | No | 值得注意的是,尽管二者都实现了部分相似的功能接口比如获取指定key对应的value(.get())以及判断是否存在特定key(.has()),但是由于实现原理上的根本差别决定了它们各自独有的特点无法互相替代. #### 使用案例分析 下面给出两个简单的例子来展示如何分别利用这两种工具解决问题: ##### Example with Map: 假设我们需要记录一组用户的登录次数. ```javascript let userLoginCounts = new Map(); function incrementUserLogins(userId){ let count = userLoginCounts.get(userId); if(count === undefined){ count = 0; } userLoginCounts.set(userId, ++count); } incrementUserLogins('alice'); console.log(userLoginCounts.get('alice')); // Output: 1 ``` ##### Example with WeakMap: 设想有一个需求是要给某些DOM节点附加额外的信息而不影响原有结构. ```javascript const domNodeInfo = new WeakMap(); const buttonElement = document.querySelector('#myButton'); domNodeInfo.set(buttonElement,{clickCount : 0}); buttonElement.addEventListener('click', () => { let info = domNodeInfo.get(buttonElement); info.clickCount +=1 ; }); ``` 通过上述实例可以看出,在处理动态变化频繁而且希望减少不必要的资源占用的应用场合下选用合适的映射形式尤为重要。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值