基礎、型別
請解釋 Set、Map、WeakSet 和 WeakMap 的區別?
2022年11月17日
Set
Set 這個數據結構類似陣列,但是裡面的元素值都是唯一,不會有重複的值,無論此值是原始型別 (primitive values) 或引用型別 (object references)。在 JavaScript 當中,Set 本身是一種構造函式,用來生成 Set 這種數據結構,具體的做法是透過 new Set()
來生成實例。
Set 常見操作方法有
add(value)
:用來新增值delete(value)
:用來刪除每個 Set 中的值has(value)
:判斷 Set 中是否存在每個值size
方法得到元素的數量,與陣列使用arr.length
方法不一樣
Set 中沒有鍵值(Key),如果使用 entries()
遍歷,返回的元素會是 [value, value]
的形式
const set1 = new Set();
set1.add(42);
set1.add("forty two");
const iterator1 = set1.entries();
for (const entry of iterator1) {
console.log(entry);
// 預期輸出結果: [42, 42]
// 預期輸出結果: ["forty two", "forty two"]
}
Set 和 WeakSet 的區別
WeakSet 的方法和使用部分與 Set 資料結構相近,本區塊會專注在這兩者不同之處
WeakSet 內的元素值只允許是物件(Object),但 Set 可接受各種資料類型的值
const wSet = new WeakSet(); const a = [1, 2, 3]; const b = { name: "explainthis" }; wSet.add(a); // WeakSet {Array(3)} wSet.add(b); // WeakSet {{...}} wSet.add(1); // Uncaught TypeError: Invalid value used in weak set
WeakSet 內的元素都是 「弱引用」(weak reference),可以被垃圾回收機制回收。假如使用 Set ,即使某個被存入的值,在其他地方已經沒有被引用,該值仍會存在於 Set 當中,不會被垃圾回收。但如果是 WeakSet,則會被垃圾回收。如果要更有意識地做記憶體管理,WeakSet 在許多時候能派上用場。
const disableElements = new WeakSet(); const loginButton = document.querySelector("#login"); disableElements.add(loginButton); disableElements.has(loginButton); // true
Map
類似於 Object 的資料結構,都是用鍵與值 (key-value pair) 的形式儲存資料格式,但還是有許多差異,詳細可以參考這篇 《在 JavaScript 中,Map 與 object 的差別?為什麼有 object 還需要 Map?》一文。Map 本身是一種構造函式,用來生成 Map 這種數據結構,具體做法是 new Map()
來生成實例。
Map 常見操作方法有
set(key, value)
:Map 新增元素get(key)
:透過鍵 (Key) 查詢特定元素,並返回has(key)
:判斷 Map 中是否存在某鍵 (key)delete(key)
:透過鍵 (Key) 從 Map 中移除特定元素size
得到元素的數量
Map 常見遍歷方法(遍歷順序會是置放到 Map 時的順序)
values()
:返回 Map 中所有元素的值keys()
:返回 Map 中所有元素的鍵entries()
:返回 Map 中所有的元素,返回的會是[key, value]
的形式
Map 和 WeakMap 的區別
WeakMap 的方法和使用部分與 Map 資料結構相近,本區塊會專注在這兩者不同之處
WeakMap 只允許**物件 (Object) ** 作為鍵名 (key),但是
null
除外。而 Map 則是可接受各種資料類型作為鍵名(key)WeakMap 中的鍵名是「弱引用」(weak reference),鍵名 (key) 所指向的對象可以被垃圾回收,此時的鍵名 (key) 是無效的。
// 如果放入的物件在外面沒有其他引用,在 WeakMap 中會被垃圾回收掉
let food = new WeakMap();
let fruit = { name: "apple" };
food.set(fruit, "good"); // 將 dog 物件置入 WeakMap 中
fruit = null; // 移除 dog 的引用
console.log(food); // WeakMap(0) fruit 已經被垃圾回收,因此 WeakMap 中沒有項目
// 一般的 Map,即使放入的物件在外面沒有其他引用,仍在 Map 當中存放
let food = new Map();
let fruit = { name: "apple" };
food.set(fruit, "good");
console.log(food); // WeakMap(1)
fruit = null;
console.log(food); // WeakMap(1) fruit 不會被垃圾回收
在上方的強引用程式碼中,雖然 fruit
物件最後被重新賦值為 null
(意思等同於無法再透過 fruit
變數獲取該對象值,因為其中的引用被斷開),但由於 food 與此物件間存在強引用,所以被保留在記憶體中,這就是前面提到的,強引用會防止物件被垃圾回收,並將物件保留在記憶體當中; 弱引用則相反,並不能防止物件被垃圾回收,當 JavaScript 執行環境執行垃圾回收時,上述弱引用例子中的 fruit
物件會被從記憶體和 WeakMap 中刪除。
弱引用的適用情境在於,如果引用的物件在未來可能會被刪除的情況、且不想防止被垃圾回收時,就適合用 WeakMap 或 WeakSet。例如,如果我們想要記錄一些與 DOM 節點相關的數據,有一種方法是使用 Expando 擴充節點上的資訊,但壞處是會直接修改到這個 DOM 節點、且如果未來這個節點被移除時,相關資訊不會被垃圾回收掉,這時如果是使用 WeakMap 就會是很好的替代方案。
備註:如果直接將弱引用程式碼的例子在 JavaScript 執行環境中執行,可能還是會看到 WeakMap 中有值,這是因為 JavaScript 執行環境會在特定的時間點執行垃圾回收。
📚 免費訂閱我們的電子報,在瞬息萬變的 AI 時代中,持續走在最前沿