站長資訊網(wǎng)
        最全最豐富的資訊網(wǎng)站

        淺談JavaScript中的Map、WeakMap、Set和WeakSet

        淺談JavaScript中的Map、WeakMap、Set和WeakSet

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

        因此,今天,我將討論2015年以來的神奇新功能——MapSetWeakMapWeakSet。

        閱讀之前

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

        Objects

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

        好吧,我相信90%以上的人已經(jīng)知道這部分內(nèi)容了,因?yàn)槟泓c(diǎn)擊這篇文章是為了了解新的集合對象,但對于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

        所以我做了一個(gè) algorithm 對象,它的key和value是一個(gè)字符串類型的值,而我通過用 . 關(guān)鍵字來調(diào)用該值。

        另外,for-in 循環(huán)也很適合在對象中循環(huán)。你可以用 [] 關(guān)鍵字訪問其鍵對應(yīng)的值。但是不能使用 for-of 循環(huán),因?yàn)閷ο笫遣豢傻摹?/p>

        對象的屬性可以用 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)對象的一些事項(xiàng):

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

        Map

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

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

        如何添加屬性

        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 對象中已經(jīng)存在與新數(shù)據(jù)的鍵對應(yīng)的值,則不會(huì)添加新數(shù)據(jù)。

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

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

        如何遍歷對象

        Map 是一個(gè)可迭代的對象,這意味著可以使用 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ù)組或訪問每個(gè)索引以獲取鍵或值。

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

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

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

        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的名字是怎么來的呢?嗯,是因?yàn)樗c它的引用鏈接所指向的數(shù)據(jù)對象的連接或關(guān)系沒有Map的連接或關(guān)系那么強(qiáng),所以它是弱的。

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

        差異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不同,它只接受一個(gè)對象作為鍵,否則,它將返回一個(gè)錯(cuò)誤。

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

        可以使用WeakMap的方法如下。

        • delete
        • get
        • has
        • set

        這個(gè)話題最大的不同是WeakMap不支持迭代對象的方法。但是為什么呢?下面將對此進(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 對象被垃圾回收時(shí),Map對象將保持引用鏈接,而WeakMap對象將丟失鏈接。所以當(dāng)你使用WeakMap時(shí),你應(yīng)該考慮這個(gè)功能。

        Set

        Set也非常類似于Map,但是Set對于單個(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è)可迭代的對象,因此可以使用 for-offorEach 語句。

        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也將丟失對內(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-offorEach,因?yàn)樗豢傻?/p>

        比較總結(jié)

        相同點(diǎn):添加相同的值不支持。

        Map vs. WeakMap:WeakMap僅接受對象作為鍵,而Map不接受。

        Map and Set:

        • 可迭代的對象,支持 for..of,forEach... 運(yùn)算符
        • 脫離GC關(guān)系

        WeakMap and WeakSet:

        • 不是一個(gè)可迭代的對象,不能循環(huán)。
        • 如果引用數(shù)據(jù)被垃圾收集,則無法訪問數(shù)據(jù)。
        • 支持較少的方法。

        結(jié)語

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

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

        原文地址:https://medium.com/better-programming/map-weakmap-set-weakset-in-javascript-77ecb5161e3

        作者:Moon

        贊(0)
        分享到: 更多 (0)
        網(wǎng)站地圖   滬ICP備18035694號-2    滬公網(wǎng)安備31011702889846號
        主站蜘蛛池模板: 国产91精品在线| 国产微拍精品一区二区| 国产VA免费精品高清在线| 亚洲国产精品VA在线看黑人| 国产精品热久久毛片| 91精品国产色综合久久| 无码久久精品国产亚洲Av影片| 国产精品无码久久四虎| 91麻豆国产福利精品 | 国产精品精品自在线拍| 亚洲日韩精品无码专区网站| 精品人妻少妇嫩草AV无码专区| 亚洲精品小视频| 国内精品免费视频精选在线观看| 精品国产VA久久久久久久冰| 少妇人妻偷人精品免费视频| 亚洲电影日韩精品 | 日韩精品真人荷官无码| 精品国产一区二区22| 3级黄性日本午夜精品| 国产成人久久精品激情| 久久国产乱子伦免费精品| 亚洲色精品aⅴ一区区三区| 久久亚洲国产精品123区| 国产一区二区精品尤物| 92精品国产自产在线观看| 日韩精品在线一区二区| 久久精品国产亚洲一区二区| 国产在线精品一区二区不卡| 精品亚洲综合久久中文字幕| 久久久精品一区二区三区| 国产精品久久影院| 国产精品莉莉欧美自在线线| 国产精品一级香蕉一区| 九九精品免视看国产成人| 国产精品亚洲欧美一区麻豆| 国产日韩一区在线精品欧美玲| 99久久99久久精品免费看蜜桃| 99热门精品一区二区三区无码| 国产精品视频一区国模私拍| 久久99精品综合国产首页|