JavaScript中的Map、WeakMap、Set和WeakSet介紹

我猜測，超過70％的JavaScript開發人員僅使用對象來收集和維護其項目中的數據。好吧，確實如此，新的集合對象（例如Map和Set）即便在2015年問世也沒有獲得充分利用。

所以，今天，我將討論2015年以來的神奇新功能——Map，Set，WeakMap和WeakSet。

閱讀以前

• 這篇文章並非要告訴你只能用它們。但我見過一些應聘者在編碼考試中使用了其中的一種，我喜歡在某些狀況下使用它們。由你決定什麼時候在項目中使用它們。
• 你應該知道什麼是可迭代的，以便更好地瞭解個人討論。

---

Objects

咱們應該首先討論如何使用對象。

好吧，我相信90%以上的人已經知道這部份內容了，由於你點擊這篇文章是爲了瞭解新的集合對象，但對於JavaScript的初學者來講，咱們仍是簡單說說它們吧。

const algorithm = { site: "leetcode" };
console.log(algorithm.site); // leetcode

for (const key in algorithm) {
  console.log(key, algorithm[key]);
}

// site leetcode
delete algorithm.site;
console.log(algorithm.site); // undefined

因此我作了一個 algorithm 對象，它的key和value是一個字符串類型的值，而我經過用 . 關鍵字來調用該值。

另外，for-in 循環也很適合在對象中循環。你能夠用 [] 關鍵字訪問其鍵對應的值。可是不能使用 for-of 循環，由於對象是不可迭代的。

對象的屬性能夠用 delete 關鍵字來刪除。這樣就能夠完全擺脫對象的屬性，你們要注意不要和這種方法混淆。

const algorithm = { site: "leetcode" };
// Property is not removed!!
algorithm.site = undefined;
// Property is removed!!
delete algorithm.site;

algorithm.site = undefined 只是將新值分配給 site。

好的，咱們已經快速討論了有關對象的一些事項：

• 如何添加屬性
• 如何遍歷對象
• 如何刪除屬性

Map

Map 是JavaScript中新的集合對象，其功能相似於對象。可是，與常規對象相比，存在一些主要差別。

首先，讓咱們看一個建立Map對象的簡單示例。

如何添加屬性

const map = new Map();
// Map(0) {}

Map 不須要建立任何內容，可是添加數據的方式略有不一樣。

map.set('name', 'john');
// Map(1) {"name" => "john"}

Map 有一種特殊的方法可在其中添加稱爲 set 的屬性。它有兩個參數：鍵是第一個參數，值是第二個參數。

map.set('phone', 'iPhone');
// Map(2) {"name" => "john", "phone" => "iPhone"}
map.set('phone', 'iPhone');
// Map(2) {"name" => "john", "phone" => "iPhone"}

可是，它不容許你在其中添加現有數據。若是 Map 對象中已經存在與新數據的鍵對應的值，則不會添加新數據。

map.set('phone', 'Galaxy');
// Map(2) {"name" => "john", "phone" => "Galaxy"}

可是你能夠用其餘值覆蓋現有數據。

如何遍歷對象

Map 是一個可迭代的對象，這意味着可使用 for-of 語句將其映射。

for (const item of map) {
  console.dir(item);
}
// Array(2) ["name", "john"]
// Array(2) ["phone", "Galaxy"]

要記住的一件事是 Map 以數組形式提供數據，你應該解構數組或訪問每一個索引以獲取鍵或值。

要僅獲取鍵或值，還有一些方法可供你使用。

map.keys();
// MapIterator {"name", "phone"}
map.values();
// MapIterator {"john", "Galaxy"}
map.entries();
// MapIterator {"name" => "john", "phone" => "Galaxy"}

你甚至可使用展開操做符(...)來獲取Map的所有數據，由於展開操做符還能夠在幕後與可迭代對象一塊兒工做。

const simpleSpreadedMap = [...map];
// [Array(2), Array(2)]

如何刪除屬性

從 Map 對象中刪除數據也很容易，你所須要作的就是調用 delete。

map.delete('phone');
// true
map.delete('fake');
// false

delete 返回布爾值，該布爾值指示 delete 函數是否成功刪除了數據。若是是，則返回 true，不然返回 false。

WeakMap

WeakMap起源於Map，所以它們彼此很是類似。可是，WeakMap具備很大的不一樣。

WeakMap的名字是怎麼來的呢？嗯，是由於它與它的引用連接所指向的數據對象的鏈接或關係沒有Map的鏈接或關係那麼強，因此它是弱的。

那麼，這究竟是什麼意思呢？

差別1：key必須是對象

const John = { name: 'John' };
const weakMap = new WeakMap();
weakMap.set(John, 'student');
// WeakMap {{...} => "student"}
weakMap.set('john', 'student');
// Uncaught TypeError: Invalid value used as weak map key

你能夠將任何值做爲鍵傳入Map對象，但WeakMap不一樣，它只接受一個對象做爲鍵，不然，它將返回一個錯誤。

差別2：並不是Map中的全部方法都支持

可使用WeakMap的方法以下。

• delete
• get
• has
• set

這個話題最大的不一樣是WeakMap不支持迭代對象的方法。可是爲何呢？下面將對此進行描述。

區別3：當GC清理引用時，數據會被刪除

與Map相比，這是最大的不一樣。

let John = { major: "math" };

const map = new Map();
const weakMap = new WeakMap();

map.set(John, 'John');
weakMap.set(John, 'John');

John = null;
/* John 被垃圾收集 */

當 John 對象被垃圾回收時，Map對象將保持引用連接，而WeakMap對象將丟失連接。因此當你使用WeakMap時，你應該考慮這個功能。

Set

Set也很是相似於Map，可是Set對於單個值更有用。

如何添加屬性

const set = new Set();

set.add(1);
set.add('john');
set.add(BigInt(10));
// Set(4) {1, "john", 10n}

與Map同樣，Set也阻止咱們添加相同的值。

set.add(5);
// Set(1) {5}

set.add(5);
// Set(1) {5}

如何遍歷對象

因爲Set是一個可迭代的對象，所以可使用 for-of 或 forEach 語句。

for (const val of set) {
  console.dir(val);
}
// 1
// 'John'
// 10n
// 5

set.forEach(val => console.dir(val));
// 1
// 'John'
// 10n
// 5

如何刪除屬性

這一部分和 Map 的刪除徹底同樣。若是數據被成功刪除，它返回 true，不然返回 false。

set.delete(5); 
// true

set.delete(function(){});
// false;

若是你不想將相同的值添加到數組表單中，則Set可能會很是有用。

/* With Set */
const set = new Set();
set.add(1);
set.add(2);
set.add(2);
set.add(3);
set.add(3);
// Set {1, 2, 3}

// Converting to Array
const arr = [ ...set ];
// [1, 2, 3]

Object.prototype.toString.call(arr);
// [object Array]

/* Without Set */
const hasSameVal = val => ar.some(v === val);
const ar = [];

if (!hasSameVal(1)) ar.push(1);
if (!hasSameVal(2)) ar.push(2);
if (!hasSameVal(3)) ar.push(3);

WeakSet

與WeakMap同樣，WeakSet也將丟失對內部數據的訪問連接（若是內部數據已被垃圾收集）。

let John = { major: "math" };

const set = new Set();
const weakSet = new WeakSet();

set.add(John);
// Set {{...}}
weakSet.add(John);
// WeakSet {{...}}

John = null;
/* John 被垃圾收集 */

一旦對象 John 被垃圾回收，WeakSet就沒法訪問其引用 John 的數據。並且WeakSet不支持 for-of 或 forEach，由於它不可迭代。

比較總結

相同點：添加相同的值不支持。

Map vs. WeakMap：WeakMap僅接受對象做爲鍵，而Map不接受。

Map and Set：

• 可迭代的對象，支持 for..of，forEach 或 ... 運算符
• 脫離GC關係

WeakMap and WeakSet：

• 不是一個可迭代的對象，不能循環。
• 若是引用數據被垃圾收集，則沒法訪問數據。
• 支持較少的方法。

結語

不過，我想，不少團隊或公司仍是沒有使用Maps或Sets。也許是由於他們以爲沒有必要，或者是由於數組仍然能夠作到幾乎全部他們想要的東西。

然而，在JavaScript中，Maps或Sets多是很是獨特和強大的東西，這取決於每一個狀況。因此我但願有一天，你能有機會使用它們。

---

本文首發於公衆號 《前端全棧開發者》 ID：by-zhangbing-dev，第一時間閱讀最新文章，會優先兩天發表新文章。關注後私信回覆：大禮包，送某網精品視頻課程網盤資料，準能爲你節省很多錢！