JS中的Map、Set、WeakMap和WeakSet

在JavaScript中，Map、Set、WeakMap和WeakSet是四個不同的資料結構，它們都有不同的特點和用途：

1. Map ：Map是一種鍵值對的集合，其中的鍵和值可以是任意型別的，與物件類似，它們可以通過鍵來訪問值，不同之處在于，Map可以使用任意型別作為鍵，而物件只能使用字串或Symbol型別作為鍵，Map還提供了許多有用的方法，例如size屬性來獲取鍵值對的數量，以及forEach()方法來遍歷集合，
2. Set ：Set是一種值的集合，其中每個值都是唯一的，與陣列不同，它們沒有重復的元素，并且沒有特定的順序，Set提供了許多有用的方法，例如add()方法來添加新的值，delete()方法來洗掉值，has()方法來檢查是否存在某個值，以及size屬性來獲取集合的大小，
3. WeakMap ：WeakMap與Map類似，也是一種鍵值對的集合，然而，它們的鍵必須是物件，而值可以是任何型別，與Map不同的是，WeakMap的鍵是弱參考，也就是說，如果鍵物件沒有被其他地方參考，則它們可以被垃圾回收，這使得WeakMap非常適合快取資料，因為當物件不再需要時，它們可以自動從WeakMap中洗掉，從而釋放記憶體，
4. WeakSet ：WeakSet是一種值的集合，其中每個值都是唯一的，并且沒有特定的順序，與Set不同的是，它們的值也是弱參考的，因此可以被垃圾回收，WeakSet通常用于存盤物件的參考，以避免記憶體泄漏，

下面是Map、Set、WeakMap和WeakSet的例子：

1. Map：

const myMap = new Map();
const key1 = 'key1';
const key2 = { name: 'John' };
const key3 = function () { console.log('Hello!'); };
myMap.set(key1, 'value1');
myMap.set(key2, 'value2');
myMap.set(key3, 'value3');
console.log(myMap.get(key1)); // 'value1'
console.log(myMap.get(key2)); // 'value2'
console.log(myMap.get(key3)); // 'value3'
console.log(myMap.size); // 3

在這個例子中，我們創建了一個 Map 物件，并使用三個不同型別的鍵 (key1、key2、key3) 來存盤三個值 (value1、value2、value3) ，我們可以使用 get() 方法來獲取相應的值，使用 size 屬性來獲取鍵值對的數量，

2. Set：

const mySet = new Set();
mySet.add('value1');
mySet.add('value2');
mySet.add('value3');
console.log(mySet.has('value1')); // true
console.log(mySet.has('value4')); // false
console.log(mySet.size); // 3
mySet.delete('value2');
console.log(mySet.size); // 2

在這個例子中，我們創建了一個 Set 物件，并使用 add() 方法向其中添加三個值 (value1、value2、value3) ，我們可以使用 has() 方法來檢查集合中是否存在某個值，使用 size 屬性來獲取集合的大小，使用 delete() 方法來洗掉值，

3. WeakMap：

let key1 = { name: 'John' };
let key2 = { name: 'Mary' };
let weakMap = new WeakMap();
weakMap.set(key1, 'value1');
weakMap.set(key2, 'value2');
key1 = null;
console.log(weakMap.get(key1)); // undefined
console.log(weakMap.get(key2)); // 'value2'

在這個例子中，我們創建了一個 WeakMap 物件，并使用兩個物件鍵 (key1、key2) 來存盤兩個值 (value1、value2) ，然后我們將 key1 賦值為null，這將導致key1物件被垃圾回收，它們與值 value1 一起被從 WeakMap 中洗掉，當我們使用 get() 方法嘗試訪問已經被洗掉的鍵時，回傳undefined，

4. WeakSet：

let obj1 = { name: 'John' };
let obj2 = { name: 'Mary' };
let weakSet = new WeakSet([obj1, obj2]);
console.log(weakSet.has(obj1)); // true
obj1 = null;
console.log(weakSet.has(obj1)); // false

在這個例子中，我們創建了一個 WeakSet 物件，并向其中添加兩個物件 (obj1、obj2) ，我們可以使用 has() 方法檢查 WeakSet 中是否存在某個物件，當我們將 obj1 賦值為null時，它們與值一起被從 WeakSet 中洗掉，當我們使用 has() 方法嘗試訪問已經被洗掉的物件時，回傳false，

下面是Map、Set、WeakMap和WeakSet之間的區別和使用場景：

1. Map和Set：

Map 和 Set 都是集合資料結構，不同之處在于：

- Map存盤鍵值對，可以使用任何型別作為鍵，而Set只存盤值，并且每個值必須是唯一的，
- Map提供了更多的方法來操作鍵值對，如get()、set()和size屬性等，而Set則提供了更多的方法來操作值，如add()、delete()和has()等，

使用場景：

- 當需要存盤鍵值對并且需要使用鍵來訪問值時，可以使用 Map ，
- 當需要存盤唯一的值時，可以使用 Set ，

2. WeakMap和WeakSet：

WeakMap 和 WeakSet 與 Map 和 Set 類似，但是它們的鍵或值是弱參考，也就是說當鍵或值物件沒有其他參考時，它們可以被垃圾回收，不會影響程式的記憶體使用情況，不同之處在于：

- WeakMap和WeakSet只能使用物件作為鍵或值，
- WeakMap和WeakSet沒有size屬性，因為其內容可能會隨時被垃圾回收，

使用場景：

- 當需要存盤需要進行垃圾回收的物件，并且這些物件只能被作為鍵或值來存盤時，可以使用 WeakMap 和 WeakSet ，
- 當需要在記憶體受限的情況下使用快取時，可以使用 WeakMap 和 WeakSet 來存盤資料，因為它們會隨時被垃圾回收，從而釋放記憶體，

總的來說， Map 和 Set 是非常常用的資料結構，用于存盤和操作資料， WeakMap 和 WeakSet 則更適合用于快取資料和避免記憶體泄漏的情況，

標籤：JavaScript

上一篇：VSCode Webview中如何實作點擊下載圖片

下一篇：返回列表