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

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
a
3
undefined
4
0

弱映射

在下面的示例中,我们可以发现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>

输出结果

true
fourth
true