站長資訊網(wǎng)
map是有序的。ES6中的map類型是一種儲存著許多鍵值對的有序列表，其中的鍵名和對應(yīng)的值支持所有數(shù)據(jù)類型；鍵名的等價性判斷是通過調(diào)用“Objext.is()”方法來實現(xiàn)的，所以數(shù)字5與字符串“5”會被判定為兩種類型，可以分別作為兩種獨立的鍵出現(xiàn)在程序中。
前端（vue）入門到精通課程：進入學(xué)習(xí)
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調(diào)試工具：點擊使用
本教程操作環(huán)境：windows7系統(tǒng)、ECMAScript 6版、Dell G3電腦。
一、map集合
JavaScript的對象（object），本質(zhì)是上鍵值對的集合，但是傳統(tǒng)上只能用字符串當做鍵值對。
為了解決這個問題，ES6提供了map數(shù)據(jù)結(jié)構(gòu)。它類似對象，也是鍵值對的集合。但是這個鍵的范圍不限于字符串，各種類型的值（包括對象）都可以當做鍵。也就是說object結(jié)構(gòu)提供了（字符串-值）的對應(yīng)，map結(jié)構(gòu)實現(xiàn)
ES6中的map類型是一種儲存著許多鍵值對的有序列表，其中的鍵名和對應(yīng)的值支持所有數(shù)據(jù)類型。鍵名的等價性判斷是通過調(diào)用Objext.is()方法來實現(xiàn)的，所以數(shù)字5與字符串‘5’會被判定為兩種類型，可以分別作為兩種獨立的鍵出現(xiàn)在程序中。
注意：有一個例外，map集合中將+0和-0視為相等，與Object.is()結(jié)果不同，如果需要“鍵值對”的數(shù)據(jù)結(jié)構(gòu)，map比object更合適，具有極快的查找速度
1、屬性：size
返回map的元素數(shù)
2、基本方法
（1）set()
給map添加數(shù)據(jù)，返回添加后的map（給已存在的鍵賦值后會覆蓋掉之前的值）
（2）get()
獲取某個key的值，返回key對應(yīng)的值，沒有則返回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及其對應(yīng)的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、轉(zhuǎn)為數(shù)組
map結(jié)構(gòu)轉(zhuǎn)為數(shù)組解構(gòu)
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集合中的鍵值對。但是只有集合的鍵名遵循這個規(guī)則，鍵名對應(yīng)的值如果是一個對象，則保存的對象的強引用，不會觸發(fā)垃圾回收裝置
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節(jié)點，每當發(fā)生click事件，就更新一下狀態(tài)。我們將這個狀態(tài)作為鍵值放在WeakMap里，對應(yīng)的鍵名就是myElement，一旦這個DOM節(jié)點刪除，該狀態(tài)就會自動消失，不存在內(nèi)存泄漏的風(fēng)險
（2）注冊監(jiān)聽事件的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>
所體現(xiàn)的效果是一樣的
（3）部署私有屬性
function Person(name){ this._name = name; } Person.prototype.getName = function(){ return this._name; } //但這是，創(chuàng)建一個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; })();//定義好了函數(shù)就開始執(zhí)行 let p = new Person('jack'); console.log(p._name)//因為name的私有型，所以在外不可訪問 console.log(p.getName()) /*輸出: undefined jack */
【
