站長資訊網
        最全最豐富的資訊網站

        es6 map有序嗎

        map是有序的。ES6中的map類型是一種儲存著許多鍵值對的有序列表,其中的鍵名和對應的值支持所有數據類型;鍵名的等價性判斷是通過調用“Objext.is()”方法來實現的,所以數字5與字符串“5”會被判定為兩種類型,可以分別作為兩種獨立的鍵出現在程序中。

        es6 map有序嗎

        前端(vue)入門到精通課程:進入學習
        Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調試工具:點擊使用

        本教程操作環境:windows7系統、ECMAScript 6版、Dell G3電腦。

        一、map集合

        JavaScript的對象(object),本質是上鍵值對的集合,但是傳統上只能用字符串當做鍵值對。

        為了解決這個問題,ES6提供了map數據結構。它類似對象,也是鍵值對的集合。但是這個鍵的范圍不限于字符串,各種類型的值(包括對象)都可以當做鍵。也就是說object結構提供了(字符串-值)的對應,map結構實現

        ES6中的map類型是一種儲存著許多鍵值對的有序列表,其中的鍵名和對應的值支持所有數據類型。鍵名的等價性判斷是通過調用Objext.is()方法來實現的,所以數字5與字符串‘5’會被判定為兩種類型,可以分別作為兩種獨立的鍵出現在程序中。

        注意:有一個例外,map集合中將+0和-0視為相等,與Object.is()結果不同,如果需要“鍵值對”的數據結構,map比object更合適,具有極快的查找速度

        1、屬性:size

        返回map的元素數

        2、基本方法

        (1)set()

        給map添加數據,返回添加后的map(給已存在的鍵賦值后會覆蓋掉之前的值)

        (2)get()

        獲取某個key的值,返回key對應的值,沒有則返回undefined

        (3)has()

        檢測是否存在某個key,返回布爾值

        let map = new Map();   map.set('JacksonWang','123'); map.set('LEO','456'); map.set('Z-','789');   console.log(map.size); console.log(map.get('JacksonWang')); console.log(map.get('LEO')); console.log(map.has('Z-'));   //輸出:    3 //        123 //        456 //        true
        登錄后復制

        (4)delete()

        刪除某個key及其對應的value,返回布爾值,成功刪除則為true

        (5)clear()

        清除所有的值,返回undefined

        let map = new Map();   map.set('JacksonWang','123'); map.set('LEO','456'); map.set('Z-','789');   map.delete('Z-'); console.log(map.size);   console.log(map.clear())   //輸出:  2 //      undefined
        登錄后復制

        3、遍歷方式

        注意:map的遍歷順序就是插入順序

        (1)keys()

        獲取map的所有key

        (2)values()

        獲取map的所有值

        (3)entries()

        獲取map的所有成員

        let map = new Map();   map.set('JacksonWang','123'); map.set('LEO','456'); map.set('Z-','789');   console.log(map.keys())//打印所有的鍵 console.log(map.values())//打印所有的值 console.log(map.entries())//以鍵值對的方式   /*輸出: [Map Iterator] { 'JacksonWang', 'LEO', 'Z-' } [Map Iterator] { '123', '456', '789' } [Map Entries] {   [ 'JacksonWang', '123' ],   [ 'LEO', '456' ],   [ 'Z-', '789' ] }*/
        登錄后復制

        (4)forEach()

        遍歷map的所有成員

        let map = new Map();   map.set('JacksonWang','123'); map.set('LEO','456'); map.set('Z-','789');   for(const [key,value] of map.entries()){     console.log(`${key}:${value}`); } /*輸出: JacksonWang:123 LEO:456 Z-:789 */
        登錄后復制

        4、轉為數組

        map結構轉為數組解構

        let map1 = new Map([     [1,'One'],     [2,'Two'],     [3,'Three'] ])   console.log([...map1.keys()]); console.log(...map1.entries()) console.log([...map1.entries()]);   /*輸出: [ 1, 2, 3 ] [ 1, 'One' ] [ 2, 'Two' ] [ 3, 'Three' ] [ [ 1, 'One' ], [ 2, 'Two' ], [ 3, 'Three' ] ] */
        登錄后復制

        二、weakmap集合

        WeakMap是弱引用Map集合,也用于存儲對象的弱引用。WeakMap集合中的鍵名必須是一個對象,如果使用非對象鍵名會報錯:集合中保存的是這些對象的弱引用,如果在弱引用之外的不存在其他的強引用,引擎的垃圾回收機制會自動回收這個對象,同時會移出WeakMap集合中的鍵值對。但是只有集合的鍵名遵循這個規則,鍵名對應的值如果是一個對象,則保存的對象的強引用,不會觸發垃圾回收裝置

        1、WeakMap集合的用途

        (1)存儲DOM元素

        <!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title> </head> <body>     <button id="btn">WeskMap測試</button>     <script>         let btn = document.querySelector('#btn');         let wmap = new WeakMap();         wmap.set(btn,{timesClicked:0})//在map中放一個鍵值對,btn為鍵           btn.addEventListener('click',function(){             let temp = wmap.get(btn);//從這里獲取鍵名為btn的值             temp.timesClicked++;             console.log(temp.timesClicked)         },false)     </script> </body> </html>
        登錄后復制

        代碼中的myElement是一個DOM節點,每當發生click事件,就更新一下狀態。我們將這個狀態作為鍵值放在WeakMap里,對應的鍵名就是myElement,一旦這個DOM節點刪除,該狀態就會自動消失,不存在內存泄漏的風險

        es6 map有序嗎

        (2)注冊監聽事件的listener對象

        <!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title> </head> <body>     <button id="btn">WeskMap測試</button>     <script>         let btn = document.querySelector('#btn');         let wmap = new WeakMap();         wmap.set(btn,{timesClicked:0})//在map中放一個鍵值對,btn為鍵           // btn.addEventListener('click',function(){         //     let temp = wmap.get(btn);//從這里獲取鍵名為btn的值         //     temp.timesClicked++;         //     console.log(temp.timesClicked)         // },false)         function f1(){             let temp = wmap.get(btn);//從這里獲取鍵名為btn的值             temp.timesClicked++;             console.log(temp.timesClicked)         }         btn.addEventListener('click',f1,false)     </script> </body> </html>
        登錄后復制

        所體現的效果是一樣的

        (3)部署私有屬性

        function Person(name){     this._name = name; }   Person.prototype.getName = function(){     return this._name; } //但這是,創建一個Person對象的時候,我們可以直接訪問name let p = new Person('張三'); console.log(p._name)   //輸出:張三
        登錄后復制

        我們不想讓用戶直接訪問name屬性,直接使用下面的方法將name包裝成私有屬性

        let Person = (function(){     let privateData = new WeakMap();     function Person(yourname){         privateData.set(this,{_name:yourname})//this當前這個鍵的對象     }     Person.prototype.getName = function(){         return privateData.get(this)._name;//     }     return Person; })();//定義好了函數就開始執行   let p = new Person('jack'); console.log(p._name)//因為name的私有型,所以在外不可訪問 console.log(p.getName())   /*輸出: undefined jack */
        登錄后復制

        贊(0)
        分享到: 更多 (0)
        網站地圖   滬ICP備18035694號-2    滬公網安備31011702889846號
        主站蜘蛛池模板: 亚洲国产精品嫩草影院| 国产99视频精品免费视频76| 国产精品久久久久天天影视| 精品国产污污免费网站入口| 91精品全国免费观看青青| 久久精品亚洲福利| 久久精品国产91久久综合麻豆自制 | 一本一本久久A久久综合精品 | 麻豆国产在线精品国偷产拍| 久久精品亚洲男人的天堂| 桃花岛精品亚洲国产成人| 国产欧美日韩综合精品一区二区| 午夜精品一区二区三区在线观看| 国产精品自产拍在线观看| 亚洲日韩国产精品第一页一区| 国产高清一级毛片精品| 国产伦精品一区二区免费| 成人精品一区二区三区免费看 | 欧美精品一区二区三区免费观看| 国产亚洲精品a在线观看 | 中文精品99久久国产| 精品成人一区二区三区四区| 久久久久99精品成人片三人毛片| 尤物国产在线精品福利一区| 日韩精品一区二区三区色欲AV | 国产精品亚洲mnbav网站| 国产精品高清一区二区三区不卡 | 麻豆精品国产自产在线观看一区| 国产成人精品一区二区三区| 久久精品一区二区三区不卡| 1024国产欧美日韩精品| CAOPORM国产精品视频免费| 经典国产乱子伦精品视频| 久久狠狠高潮亚洲精品| 精品国产乱码一区二区三区| 国产精品免费观看调教网| 97精品人妻系列无码人妻| 99国产欧美精品久久久蜜芽| 97热久久免费频精品99| 91精品国产高清91久久久久久| 精品亚洲成a人片在线观看少妇|