JavaScript中的Map、WeakMap、Set和WeakSet介紹是怎樣的

今天就跟大家聊聊有關(guān)JavaScript中的Map、WeakMap、Set和WeakSet介紹是怎樣的，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

我猜想，超過70%的JavaScript開發(fā)人員僅使用對象來收集和維護其項目中的數(shù)據(jù)。好吧，確實如此，新的集合對象(例如Map和Set)即使在2015年問世也沒有得到充分利用。

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

Objects

我們應(yīng)該首先討論如何使用對象。

好吧，我相信90%以上的人已經(jīng)知道這部分內(nèi)容了，因為你點擊這篇文章是為了了解新的集合對象，但對于JavaScript的初學(xué)者來說，我們還是簡單說說它們吧。

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是一個字符串類型的值，而我通過用 . 關(guān)鍵字來調(diào)用該值。

另外，for-in 循環(huán)也很適合在對象中循環(huán)。你可以用 [] 關(guān)鍵字訪問其鍵對應(yīng)的值。但是不能使用 for-of 循環(huán)，因為對象是不可迭代的。

對象的屬性可以用 delete 關(guān)鍵字來刪除。這樣就可以徹底擺脫對象的屬性，大家要注意不要和這種方法混淆。

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

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

好的，我們已經(jīng)快速討論了有關(guān)對象的一些事項：

• 如何添加屬性

• 如何遍歷對象

• 如何刪除屬性

Map

Map 是JavaScript中新的集合對象，其功能類似于對象。但是，與常規(guī)對象相比，存在一些主要差異。

首先，讓我們看一個創(chuàng)建Map對象的簡單示例。

/ 如何添加屬性 /

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

Map 不需要創(chuàng)建任何內(nèi)容，但是添加數(shù)據(jù)的方式略有不同。

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

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

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

但是，它不允許你在其中添加現(xiàn)有數(shù)據(jù)。如果 Map 對象中已經(jīng)存在與新數(shù)據(jù)的鍵對應(yīng)的值，則不會添加新數(shù)據(jù)。

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

但是你可以用其他值覆蓋現(xiàn)有數(shù)據(jù)。

/ 如何遍歷對象 /

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

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

要記住的一件事是 Map 以數(shù)組形式提供數(shù)據(jù)，你應(yīng)該解構(gòu)數(shù)組或訪問每個索引以獲取鍵或值。

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

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

你甚至可以使用展開操作符(...)來獲取Map的全部數(shù)據(jù)，因為展開操作符還可以在幕后與可迭代對象一起工作。

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

/ 如何刪除屬性 /

從 Map 對象中刪除數(shù)據(jù)也很容易，你所需要做的就是調(diào)用 delete。

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

delete 返回布爾值，該布爾值指示 delete 函數(shù)是否成功刪除了數(shù)據(jù)。如果是，則返回 true，否則返回 false。

WeakMap

WeakMap起源于Map，因此它們彼此非常相似。但是，WeakMap具有很大的不同。

WeakMap的名字是怎么來的呢?嗯，是因為它與它的引用鏈接所指向的數(shù)據(jù)對象的連接或關(guān)系沒有Map的連接或關(guān)系那么強，所以它是弱的。

那么，這到底是什么意思呢?

/ 差異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不支持迭代對象的方法。但是為什么呢?下面將對此進行描述。

/ 區(qū)別3：當(dāng)GC清理引用時，數(shù)據(jù)會被刪除 /

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

let John = { major: "math" };  const map = new Map(); const weakMap = new WeakMap();  map.set(John, 'John'); weakMap.set(John, 'John');  John = null; /* John 被垃圾收集 */

當(dāng)John對象被垃圾回收時，Map對象將保持引用鏈接，而WeakMap對象將丟失鏈接。所以當(dāng)你使用WeakMap時，你應(yīng)該考慮這個功能。

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 的刪除完全一樣。如果數(shù)據(jù)被成功刪除，它返回 true，否則返回 false。

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

如果你不想將相同的值添加到數(shù)組表單中，則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也將丟失對內(nèi)部數(shù)據(jù)的訪問鏈接(如果內(nèi)部數(shù)據(jù)已被垃圾收集)。

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 的數(shù)據(jù)。而且WeakSet不支持 for-of 或  forEach，因為它不可迭代。

比較總結(jié)

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

Map vs. WeakMap：WeakMap僅接受對象作為鍵，而Map不接受。

Map and Set：

• 可迭代的對象，支持 for..of，forEach 或 ... 運算符

• 脫離GC關(guān)系

WeakMap and WeakSet：

• 不是一個可迭代的對象，不能循環(huán)。

• 如果引用數(shù)據(jù)被垃圾收集，則無法訪問數(shù)據(jù)。

• 支持較少的方法。

在JavaScript中，Maps或Sets可能是非常獨特和強大的東西，這取決于每個情況。所以我希望有一天，你能有機會使用它們。

看完上述內(nèi)容，你們對JavaScript中的Map、WeakMap、Set和WeakSet介紹是怎樣的有進一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。