🔥《ChatGPT 指令大全與創新應用》新書上架!👉 立即購買

請解釋 Set、Map、WeakSet 和 WeakMap 的區別?

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);
  // expected output: [42, 42]
  // expected output: ["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);
    
    // 使用的时候通过查询元素是否在集合中,就可以知道它是否被禁用。而一旦元素从DOM树中删除,
    // WeakMap也会释放其内存(为了严谨,假设没有其它地方引用这个对象)。
    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 常見遍歷方法(遍歷順序會是插入順序)

  • values():返回 Map 中所有元素的值
  • keys():方法等同於 values()
  • entries():返回 Set 中所有的元素,因在 Set 中沒有鍵值(Key),返回的元素會是 [value, 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 執行環境會在特定的時間點執行垃圾回收。

© 2023 explainthis.io
酉是數據科技股份有限公司