JavaScript 中的 Map 和 WeakMap 有什么区别?
javascriptobject oriented programmingprogramming
Map 和 WeakMap 之间的区别
Map 和 WeakMap 的功能机制相同，但差别不大。
1) WeakMap 仅接受对象作为键，而 Map 除了对象之外，还接受字符串、数字等原始数据类型。
2) WeakMap 如果没有对充当键的对象进行引用，则对象不会避免垃圾回收。因此，WeakMap 中没有检索键的方法，而 Map 中有诸如 Map.prototype.keys() 之类的方法来获取键。
3) WeakMap 中没有 size 属性。
Map
它用于将键与值关联，而不管数据类型如何，例如字符串、数字、对象等。
示例
<html>
<body>
<script>
// 创建一个新的 Map 对象
var map = new Map();
// 定义一个将在主键中使用的对象
var objKey = {name: 'tutorialspoint'};
document.write("</br>");
// 添加一个新元素，该元素的键为字符串，值也为字符串
map.set('first', 'a');
document.write("</br>");
// 添加一个新元素，其键为数字，值是数组
map.set(3, ['c']);
document.write("</br>");
// 添加一个新元素，其键为对象，值是数字
map.set(objKey, 3);
// 添加一个新元素，其键为数组，值是字符串
map.set(['add', 'mapping'], 'd');
// 检查映射中是否存在具有键"2"的元素。
document.write(map.has(2));
document.write("</br>");
// 检查映射中是否存在具有键"first"的元素。
document.write(map.has('first'));
document.write("</br>");
// 检索具有键"first"的元素。打印"a"
document.write(map.get('first'));
document.write("</br>");
// 检索具有 objKey 值的元素。
document.write(map.get(objKey));
document.write("</br>");
// 检索具有 "empty" 键的元素。打印 "undefined"
document.write(map.get('empty'));
document.write("</br>");
// 检索地图大小。打印 "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
在下面的例子中，我们可以发现 WeakMap 只接受对象，而不接受任何原始值(字符串、数字)
示例
<html>
<body>
<script>
// 创建一个新的 WeakMap 对象
var strongMap = new WeakMap();
// 定义一个将在映射中用作键的对象
var obj4 = {d: 4};
// 定义另一个将在映射中用作键的对象
var obj5 = {e: 5};
// 添加一个新元素，该元素以对象为键，以字符串为值
weakMap.set(obj4, 'fourth');
// 添加一个新元素，其键为 Object，值是 String
weakMap.set(obj5, 'fifth');
// 添加一个新元素，其键为 Function，值是 Number
weakMap.set(function(){}, 7);
// 检查弱映射中是否存在键值为 objKey4 的元素。
document.write(weakMap.has(obj4));
document.write("</br>");
// 检索与值为 objKey4 的键关联的元素的值。打印 "first"
document.write(weakMap.get(obj4));
document.write("</br>");
// 删除具有 objKey4 键的元素。打印 "true"
document.write(weakMap.delete(obj4));
document.write("</br>");
// 删除弱映射的所有元素
weakMap.clear();
</script>
</body>
</html>
输出
true fourth true
