Javascript Map和WeakMap的區別用法及代碼示例

在這篇文章中，我們將討論ES6引入的Map和WeakMap之間的區別。 Javascript 對象僅支持一個關鍵對象。為了支持多個關鍵對象，Then Map 走上了這條道路。

Map：Map 是一個無序列表的鍵值對，其中鍵和值可以是任何類型，如字符串、布爾值、數字等。為了更好地理解，我們以 Map 及其屬性為例。

例子：這個例子展示了Map在Javascript中的實現。

Javascript


// Creating an empty map
const myMap = new Map();
// Creating a set by inserting the key-value pair
console.log(myMap);
myMap.set("info", { name: "Sam", age: 36 });
// Access the elements of a Map
console.log(myMap);
console.log(myMap.get("info"));
// Checking the element in a Map using has() method
console.log("check whether info is there or not - "
    + myMap.has("info"));
// Returning the number of elements using size property
console.log("The no.of elements in a Map are " + myMap.size);
// Removing the element from the map using
// clear() and delete() methods
// removing a particular element
myMap.delete("address");
myMap.delete("info"); // true
console.log(myMap);
// Iteration through the map
// using forEach method()
const map2 = new Map();
map2.set("name", "Sam");
map2.set("age", "36");
// looping through Map
map2.forEach(function (value, key) {
    console.log(key + "- " + value);
});

輸出

Map(0) {}
Map(1) { 'info' => { name: 'Sam', age: 36 } }
{ name: 'Sam', age: 36 }
check whether info is there or not - true
The no.of elements in a Map are 1
Map(0) {}
name- Sam
age- 36

WeakMap：在 Weak Map 中，每個鍵隻能是一個對象和函數。它用於存儲弱對象引用。為了更好地理解，我們以WeakMap及其屬性為例：

例子：這個例子展示了Map在Javascript中的實現。

Javascript


// Creating a WeakMap
const myweakMap = new WeakMap();
console.log(myweakMap); // WeakMap {} 
let obj = {};
// Adding object (element) to WeakMap
myweakMap.set(obj, 'hello everyone');
console.log(myweakMap);
// Access the element of a WeakMap using get() method
console.log("The element of a WeakMap - " + myweakMap.get(obj));
// Checking the element in a map using has() method
console.log("check if an element is present in WeakMap - "
    + myweakMap.has(obj));
// Delete the element of WeakMap using delete() method
console.log("deleting the element of WeakMap - "
    + myweakMap.delete(obj));
console.log(myweakMap); // WeakMap {}
// WeakMaps are not iterable. It will return
// an error. For example,
const weakMap1 = new WeakMap();
console.log(weakMap1); // WeakMap {} 
let obj1 = {};
// Adding object (element) to WeakMap
weakMap.set(obj1, 'hello');
// Looping through WeakMap
for (let i of weakMap1) {
    console.log(i);  // TypeError
}

輸出：

WeakMap { <items unknown> }
WeakMap { <items unknown> }
The element of a WeakMap - hello everyone
check if an element is present in WeakMap - true
deleting the element of WeakMap - true
WeakMap { <items unknown> }
WeakMap { <items unknown> }

ReferenceError: weakMap is not defined

Map 和 WeakMap 的區別：

Map	WeakMap
Map 是鍵值對的無序列表，其中鍵和值可以是任何類型，如字符串、布爾值、數字等。	在 Weak Map 中，每個鍵隻能是一個對象和函數。它用於存儲弱對象引用。
Map是可迭代的。	WeakMaps 不可迭代。
即使您不使用Map，Map也會保留所有內容。	WeakMaps 保存對 key 的引用，而不是 key 本身。
垃圾Collector不會從 “Map” 中刪除鍵指針，也不會從內存中刪除鍵。	垃圾Collector繼續從 “WeakMap” 中刪除鍵指針，並從內存中刪除鍵。 WeakMap 允許垃圾Collector執行其任務，但不允許 Map。
Map有一些屬性：.set、.get、.delete、.size、.has、.forEach、迭代器。	WeakMaps 有一些屬性：.set、.get、.delete、.has。
您可以使用以下方法創建新Map新Map().	您可以使用以下命令創建新的WeakMap新WeakMap().

相關用法

注：本文由純淨天空篩選整理自deekshashukla03102001大神的英文原創作品 What is the difference between Map and WeakMap in JavaScript ?。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。