JavaScript中的Map和WeakMap有什么区别？

Z时代
2024-01-10
分类：综合

Map和WeakMap之间的区别

Map和WeakMap的功能机制相同，但差异不大。

1）WeakMap仅接受对象作为键，而Map除对象外还接受原始数据类型，例如字符串，数字等。

2）如果没有引用充当键的对象，则WeakMap对象不会避免垃圾回收。因此，在WeakMap中没有方法来检索键，而在Map中，有诸如Map.prototype.keys()之类的方法来获取键。

3）WeakMap中不存在size属性。

映射

它用于将键与值相关联，而与数据类型（例如字符串，数字，对象等）无关。

示例

<html>
<body>
<script>
//创建一个新的Map对象
   var map = new Map();    
//用作键的对象                
   var objKey = {name: 'nhooo'};    
   document.write("</br>");
//添加一个新元素，该元素以String作为其键，并以String作为其值
   map.set('first', 'a');                    
   document.write("</br>");
//添加一个新元素，其数字为键，数组为值
   map.set(3, ['c']);      
   document.write("</br>");
//添加一个新元素，该元素具有一个Object作为其键，一个Number作为其值
   map.set(objKey, 3);
//添加一个新元素，其元素为Array，其值为
   map.set(['add', 'mapping'], 'd');          
// Checks whether an element having a key of "2" exists in the map.
   document.write(map.has(2));
   document.write("</br>");
// Checks whether an element having a key of "first" exists in the map.
   document.write(map.has('first'));
   document.write("</br>");
// Retrieves the element having key of "first". Prints "a"
   document.write(map.get('first'));
   document.write("</br>");
//检索以objKey值为键的元素。
   document.write(map.get(objKey));
   document.write("</br>");
// Retrieves the element having key of "empty". Prints "undefined"
   document.write(map.get('empty'));
   document.write("</br>");
// Retrieves the map size. Prints "4"
   document.write(map.size);
   document.write("</br>");
//删除所有值  
   map.clear();
   document.write(map.size);
</script>
</body>
</html>

输出结果

false

true

undefined

弱映射

在下面的示例中，我们可以发现WeakMap仅接受对象，而不接受任何原始值（字符串，数字）

示例

<html>
<body>
<script>
//创建一个新的WeakMap对象
   var weakMap = new WeakMap();
//用作键的对象p
   var obj4 = {d: 4};
//定义另一个将在映射中用作键的对象
   var obj5 = {e: 5};
//添加一个新元素，其对象为键，字符串为值
   weakMap.set(obj4, 'fourth');
//添加一个新元素，其对象为键，字符串为值
   weakMap.set(obj5, 'fifth');
//添加一个新元素，其功能为键，数值为数字
   weakMap.set(function(){}, 7);
//检查弱映射中是否存在以objKey4值为键的元素。
   document.write(weakMap.has(obj4));
   document.write("</br>");
// Retrieve the value of element associated with the key having the value of objKey4. Prints "first"
   document.write(weakMap.get(obj4));
   document.write("</br>");
// Deletes the element having key of objKey4. Prints "true"
   document.write(weakMap.delete(obj4));
   document.write("</br>");
//删除弱图的所有元素
   weakMap.clear();
</script>
</body>
</html>