日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

 我猜想，超過(guò)70%的JavaScript開(kāi)發(fā)人員僅使用對(duì)象來(lái)收集和維護(hù)其項(xiàng)目中的數(shù)據(jù)。好吧，確實(shí)如此，新的集合對(duì)象(例如Map和Set)即使在2015年問(wèn)世也沒(méi)有得到充分利用。

專注于為中小企業(yè)提供成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)扎魯特旗免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了近千家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

因此，今天，我將討論2015年以來(lái)的神奇新功能——Map，Set，WeakMap和WeakSet。

閱讀之前

• 這篇文章并不是要告訴你只能用它們。但我見(jiàn)過(guò)一些應(yīng)聘者在編碼考試中使用了其中的一種，我喜歡在某些情況下使用它們。由你決定何時(shí)在項(xiàng)目中使用它們。
• 你應(yīng)該知道什么是可迭代的，以便更好地了解我的討論。

Objects

我們應(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

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ù)。

/ 如何遍歷對(duì)象 /

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');
  
  
// false
 
 

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

WeakMap

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

WeakMap的名字是怎么來(lái)的呢?嗯，是因?yàn)樗c它的引用鏈接所指向的數(shù)據(jù)對(duì)象的連接或關(guān)系沒(méi)有Map的連接或關(guān)系那么強(qiáng)，所以它是弱的。

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

/ 差異1：key必須是對(duì)象 /

 
 

  
  
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ò)誤。

/ 差異2：并非Map中的所有方法都支持 /

可以使用WeakMap的方法如下。

• delete
• get
• has
• set

這個(gè)話題最大的不同是WeakMap不支持迭代對(duì)象的方法。但是為什么呢?下面將對(duì)此進(jìn)行描述。

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

與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

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}
 
 

/ 如何遍歷對(duì)象 /

由于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);
 
 

WeakSet

與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>

比較總結(jié)

相同點(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ù)。
• 支持較少的方法。

結(jié)語(yǔ)

不過(guò)，我想，很多團(tuán)隊(duì)或公司還是沒(méi)有使用Maps或Sets。也許是因?yàn)樗麄冇X(jué)得沒(méi)有必要，或者是因?yàn)閿?shù)組仍然可以做到幾乎所有他們想要的東西。

然而，在JavaScript中，Maps或Sets可能是非常獨(dú)特和強(qiáng)大的東西，這取決于每個(gè)情況。所以我希望有一天，你能有機(jī)會(huì)使用它們。

分享題目：JavaScript中的Map、WeakMap、Set和WeakSet介紹
網(wǎng)站地址：http://m.5511xx.com/article/dpedjeg.html