轉自:微信公衆號—— web前端教程
上節介紹了Set和WeakSet,這節咱就講Map和WeakMap是什麼?當然,兩者之前並沒什麼必然的聯繫,僅僅是用法類似。
什麼是Map
介紹什麼是Map,就不得不說起Object對象,我們都知道Object對象是鍵值對的集合:
//Object對象
{"name":"前端君","gender":1}
ES5中的key鍵名的類型要求一定是字符串,當然,ES6已經允許屬性名的類型是Symbol,第十一節有講解,可點擊查看。
現在,ES6 提供了Map結構給我們使用,它跟Object對象很像,但是不同的是,它的key鍵名的類型不再侷限於字符串類型了,它可以是各種類型的值;可以說,它比Object對象更加靈活了,當然,也更加複雜了。
Map的基本用法
知道了什麼是Map,我們接着來學學它的基本用法,看看它是怎麼使用的。
Map結構提供了一個構造函數給我們,我們使用的時候需要用new來創建實例:
let m = new Map();
如果想要在創建實例的同時,初始化它的內容,我們可以給它傳參,形式跟Set結構類型,都是需要用數組作爲參數,我們來試試看看:
let m = new Map([
["name","前端君"],
["gender",1]
]);
console.log(m);
//打印結果:Map {"name" => "前端君", "gender" => 1}
大家注意Map( )方法裏面的參數,首先它是一個數組,而裏面的內容也是由多個數組組成,“name”:“前端君”作爲一個鍵值對,將它們裝在一個數組裏面,[“name”:“前端君”],另外一組鍵值對也一樣:[“gender”:1 ]。這就是初始化一個Map結構實例的基本寫法。
初始化成實例後,Map結構還提供了一些實例的屬性和方法供我們實現對實例的操作。我們一起看看都有哪些屬性和方法。
set( )方法
set( )方法作用:給實例設置一對鍵值對,返回map實例。
let m = new Map();
//set方法添加
//添加一個string類型的鍵名
m.set("name","前端君");
//添加一個數字類型的鍵名
m.set(1,2);
console.log(m);
//打印結果:Map {"name" => "前端君", 1 => 2}
set方法的使用很簡單,只需要給方法傳入key和value作爲鍵名和鍵值即可。注意:第三行代碼中,我們傳入的key是數字1,這就證明了,Map結構確實可以存儲非字符串類型的鍵名,當然你還可以設置更多其它類型的鍵名,比如:
//數組類型的鍵名
m.set([1],2);
//對象類型的鍵名
m.set({"name":"Zhangsan"},2);
//布爾類型的鍵名
m.set(true,2);
//Symbol類型的鍵名
m.set(Symbol('name'),2);
//null爲鍵名
m.set(null,2);
//undefined爲鍵名
m.set(undefined,2);
以上6種類型值都可以作爲鍵名,可以成功添加鍵值對,沒毛病。
使用set方法的時候有一點需要注意,如果你設置一個已經存在的鍵名,那麼後面的鍵值會覆蓋前面的鍵值。我們演示一下:
let m = new Map();
m.set("name","前端君");
console.log(m);
//結果:Map {"name" => "前端君"}
//再次設置name的值
m.set("name","隔壁老王");
console.log(m);
//結果:Map {"name" => "隔壁老王"}
上面的案例,我們第一次把name的值設置爲“前端君”,當再次使用set方法設置name的值的時候,後者成功覆蓋了前者的值,從此“前端君” 變 “隔壁老王”。
get( )方法
get( )方法作用:獲取指定鍵名的鍵值,返回鍵值。
let m = new Map([["name","前端君"]]);
m.get("name");//結果:前端君
m.get("gender");//結果:undefined
get方法使用也很簡單,只需要指定鍵名即可。獲取存在對應的鍵值,如果鍵值對存在,就會返回鍵值;否則,返回undefined,這個也很好理解。
delete( )方法
delete( )方法作用:刪除指定的鍵值對,刪除成功返回:true,否則返回:false。
let m = new Map();
m.set("name","前端君");
//結果:Map {"name" => "前端君"}
m.delete("name");//結果:true
m.delete("gender");//結果:false
我們使用delete方法,刪除“name”的時候成功,返回了true。刪除“gender”的時候,由於Map結構中不存在鍵名:“gender”,所以刪除失敗,返回false。
clear( )方法
跟Set結構一樣,Map結構也提供了clear( )方法,讓你一次性刪除所有鍵值對。
let m = new Map();
m.set("name","前端君");
m.set("gender",1);
m.clear();
console.log(m);
//打印結果:Map {}
使用clear方法後,我們再打印一下變量m,發現什麼都沒有,一個空的Map結構,說明clear方法起作用了。
has( )方法
has( )方法作用:判斷Map實例內是否含有指定的鍵值對,有就返回:true,否則返回:false。
let m = new Map();
m.set("name","前端君");
m.has('name');//結果:true
m.has('age');//結果:false
Map實例中含有鍵名:name,就返回了true,鍵名age不存在,就返回false。好理解吧,比較簡單。
可遍歷
Object對象能被for...in遍歷,Map結構也不示弱,同樣可以被遍歷。我們可以使用ES6的新特性for...of來遍歷它的鍵名或者鍵值。
entries( )方法
entries( )方法作用:返回實例的鍵值對遍歷器。
我們在第十三節說過,for...of可以遍歷具有遍歷器接口的對象。那麼,我們就結合for...of來演示一下Map結構的遍歷。
let m = new Map([
["name","前端君"],
["age",25]
]);
for(let [key,value] of m.entries()){
console.log(key+' '+value);
}
//打印結果:name 前端君
// age 25
案例中的 m.entries( ) 返回鍵值對的遍歷器,使用了for...of來遍歷這個遍歷器,得到的值分別賦值到key和value,然後控制檯分別輸出它們。
還記得嗎?上一節中,介紹Set結構的遍歷的時候,也是這樣的遍歷方式。
keys( ) 和 values( ) 方法
keys( )方法:返回實例所有鍵名的遍歷器。
values( ) 方法:返回實例所有鍵值的遍歷器。
既然都是遍歷器,那就用for...of把它們遍歷出來吧:
let m = new Map([
["name","前端君"],
["age",25]
]);
//使用keys方法獲取鍵名
for(let key of m.keys()){
console.log(key);
}
//打印結果:name
// age
//使用values方法獲取鍵值
for(let value of m.values()){
console.log(value);
}
//打印結果:前端君
// 25
keys方法和values方法的使用方式一致,只是返回的結果不同。
forEach( )方法
除了使用以上三個方法實現遍歷以外,我們還可以使用forEach遍歷每一個鍵值對:
let m = new Map([
["name","前端君"],
["age",25]
]);
m.forEach(function(value,key){
console.log(key+':'+value);
});
//打印結果:name:前端君
// age:25
forEach方法接收一個匿名函數,給匿名函數傳參value和key,分別是Map實例的鍵名和鍵值,這個方法的使用相信大家一定不會陌生。
size屬性
其中一個常用的屬性就是size:獲取實例的成員數。
let m = new Map();
m.set(1,3);
m.set('1','3');
m.size;//結果:2
使用set方法給實例m添加了兩個鍵值對成員,所以實例的 size爲:2。
什麼是WeakMap
講了Map結構,我們現在講WeakMap結構。
WeakMap結構和Map結構很類似,不同點在於WeakMap結構的鍵名只支持引用類型的數據。哪些是引用類型的值呢?比如:數組,對象,函數。
關於什麼是引用類型,其中涉及到了傳址和傳值的區別,還記得裝修工張師傅和王師傅的例子嗎?第三節有詳細的講解,點擊可查看。
WeakMap的基本用法
WeakMap結構的使用方式和Map結構一樣:
let wm = new WeakMap();
兩者都是使用new來創建實例。如果添加鍵值對的話,我們同樣是使用set方法,不過鍵名的類型必須要求是引用類型的值,我們來看看:
let wm = new WeakMap();
//數組類型的鍵名
wm.set([1],2);
//對象類型的鍵名
wm.set({'name':'Zhangsan'},2);
//函數類型的鍵名
function fn(){};
wm.set(fn,2);
console.log(wm);
//打印:WeakMap {
[1] => 2,
Object {name: "Zhangsan"} => 2,
function => 2
}
從打印結果可以看出,以上類型的鍵名都可以成功添加到WeakMap實例中。
WeakMap和Map的區別
如果是普通的值類型則不允許。比如:字符串,數字,null,undefined,布爾類型。而Map結構是允許的,這就是兩者的不同之處,謹記。
跟Map一樣,WeakMap也擁有get、has、delete方法,用法和用途都一樣。不同地方在於,WeakMap不支持clear方法,不支持遍歷,也就沒有了keys、values、entries、forEach這4個方法,也沒有屬性size。
理由跟WeakSet結構一樣:鍵名中的引用類型是弱引用,你永遠不知道這個引用對象什麼時候會被垃圾回收機制回收了,如果這個引用類型的值被垃圾機制回收了,WeakMap實例中的對應鍵值對也會消失。
本節小結
總結:Map結構是一個鍵值對的集合,跟Object對象不同的是,Map結構的鍵名可以是任何類型的值,而WeakMap結構的鍵名只允許是引用類型的值。
它們都提供了各自的方法和屬性供開發者使用:set、get、has、delete等相同的方法,其中Map結構還多了clear方法,size屬性和一些用於遍歷的方法:keys、values、entries、forEach。