這篇文章主要介紹JavaScript中Map、WeakMap、Set和WeakSet有什么用，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！
成都創(chuàng)新互聯(lián)于2013年成立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目做網(wǎng)站、成都做網(wǎng)站網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元杭錦后做網(wǎng)站,已為上家服務(wù),為杭錦后各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:13518219792
我們應(yīng)該首先討論如何使用對(duì)象。
好吧，我相信90%以上的人已經(jīng)知道這部分內(nèi)容了，因?yàn)槟泓c(diǎn)擊這篇文章是為了了解新的集合對(duì)象，但對(duì)于JavaScript的初學(xué)者來(lái)說(shuō)，我們還是簡(jiǎn)單說(shuō)說(shuō)它們吧。
重慶分公司
重慶分公司
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所以我做了一個(gè) algorithm 對(duì)象，它的key和value是一個(gè)字符串類型的值，而我通過(guò)用 . 關(guān)鍵字來(lái)調(diào)用該值。
另外，for-in 循環(huán)也很適合在對(duì)象中循環(huán)。你可以用 [] 關(guān)鍵字訪問(wèn)其鍵對(duì)應(yīng)的值。但是不能使用 for-of 循環(huán)，因?yàn)閷?duì)象是不可迭代的。
對(duì)象的屬性可以用 delete 關(guān)鍵字來(lái)刪除。這樣就可以徹底擺脫對(duì)象的屬性，大家要注意不要和這種方法混淆。
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)對(duì)象的一些事項(xiàng)：
如何添加屬性
如何遍歷對(duì)象
如何刪除屬性
Map 是JavaScript中新的集合對(duì)象，其功能類似于對(duì)象。但是，與常規(guī)對(duì)象相比，存在一些主要差異。
首先，讓我們看一個(gè)創(chuàng)建Map對(duì)象的簡(jiǎn)單示例。
const map = new Map();
// Map(0) {}Map 不需要?jiǎng)?chuàng)建任何內(nèi)容，但是添加數(shù)據(jù)的方式略有不同。
map.set('name', 'john');
// Map(1) {"name" => "john"}Map 有一種特殊的方法可在其中添加稱為 set 的屬性。它有兩個(gè)參數(shù)：鍵是第一個(gè)參數(shù)，值是第二個(gè)參數(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 對(duì)象中已經(jīng)存在與新數(shù)據(jù)的鍵對(duì)應(yīng)的值，則不會(huì)添加新數(shù)據(jù)。
map.set('phone', 'Galaxy');
// Map(2) {"name" => "john", "phone" => "Galaxy"}但是你可以用其他值覆蓋現(xiàn)有數(shù)據(jù)。
Map 是一個(gè)可迭代的對(duì)象，這意味著可以使用 for-of 語(yǔ)句將其映射。
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ù)組或訪問(wèn)每個(gè)索引以獲取鍵或值。
要僅獲取鍵或值，還有一些方法可供你使用。
map.keys();
// MapIterator {"name", "phone"}
map.values();
// MapIterator {"john", "Galaxy"}
map.entries();
// MapIterator {"name" => "john", "phone" => "Galaxy"}你甚至可以使用展開(kāi)操作符(...)來(lái)獲取Map的全部數(shù)據(jù)，因?yàn)檎归_(kāi)操作符還可以在幕后與可迭代對(duì)象一起工作。
const simpleSpreadedMap = [...map]; // [Array(2), Array(2)]
從 Map 對(duì)象中刪除數(shù)據(jù)也很容易，你所需要做的就是調(diào)用 delete。
map.delete('phone');
// true
map.delete('fake');
// falsedelete 返回布爾值，該布爾值指示 delete 函數(shù)是否成功刪除了數(shù)據(jù)。如果是，則返回 true，否則返回 false。
WeakMap起源于Map，因此它們彼此非常相似。但是，WeakMap具有很大的不同。
WeakMap的名字是怎么來(lái)的呢？嗯，是因?yàn)樗c它的引用鏈接所指向的數(shù)據(jù)對(duì)象的連接或關(guān)系沒(méi)有Map的連接或關(guān)系那么強(qiáng)，所以它是弱的。
那么，這到底是什么意思呢？
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對(duì)象，但WeakMap不同，它只接受一個(gè)對(duì)象作為鍵，否則，它將返回一個(gè)錯(cuò)誤。
可以使用WeakMap的方法如下。
delete
get
has
set
這個(gè)話題最大的不同是WeakMap不支持迭代對(duì)象的方法。但是為什么呢？下面將對(duì)此進(jìn)行描述。
與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 對(duì)象被垃圾回收時(shí)，Map對(duì)象將保持引用鏈接，而WeakMap對(duì)象將丟失鏈接。所以當(dāng)你使用WeakMap時(shí)，你應(yīng)該考慮這個(gè)功能。
Set也非常類似于Map，但是Set對(duì)于單個(gè)值更有用。
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是一個(gè)可迭代的對(duì)象，因此可以使用 for-of 或 forEach 語(yǔ)句。
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可能會(huì)非常有用。
/* 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);與WeakMap一樣，WeakSet也將丟失對(duì)內(nèi)部數(shù)據(jù)的訪問(wèn)鏈接（如果內(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 被垃圾收集 */一旦對(duì)象 John 被垃圾回收，WeakSet就無(wú)法訪問(wèn)其引用 John 的數(shù)據(jù)。而且WeakSet不支持 for-of 或 forEach，因?yàn)樗豢傻?/p>
相同點(diǎn)：添加相同的值不支持。
Map vs. WeakMap：WeakMap僅接受對(duì)象作為鍵，而Map不接受。
Map and Set：
可迭代的對(duì)象，支持 for..of，forEach 或 ... 運(yùn)算符
脫離GC關(guān)系
WeakMap and WeakSet：
不是一個(gè)可迭代的對(duì)象，不能循環(huán)。
如果引用數(shù)據(jù)被垃圾收集，則無(wú)法訪問(wèn)數(shù)據(jù)。
支持較少的方法。
以上是“JavaScript中Map、WeakMap、Set和WeakSet有什么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
