淺談es6 javascript的map數據結構

本文介紹了es6 javascript的map數據結構，分享給大家，具體如下：

Map 結構的目的和基本用法

JavaScript 的對象（ Object）， 本質上是鍵值對的集合（ Hash 結構）， 但是傳統上只能用字符串當作鍵。 這給它的使用帶來了很大的限制。

var data = {}; 
var element = document.getElementById('myDiv'); 
data[element] = 'metadata'; 
data['[object HTMLDivElement]'] // "metadata" 

上面代碼原意是將一個 DOM 節點作為對象data的鍵， 但是由于對象只接受字符串作為鍵名， 所以element被自動轉為字符串[object HTMLDivElement]。

為了解決這個問題， ES6 提供了 Map 數據結構。 它類似于對象， 也是鍵值對的集合， 但是“ 鍵” 的范圍不限于字符串， 各種類型的值（ 包括對象） 都可以當作鍵。 也就是說， Object 結構提供了“ 字符串— 值” 的對應， Map 結構提供了“ 值— 值” 的對應， 是一種更完善的 Hash 結構實現。 如果你需要“ 鍵值對” 的數據結構， Map 比 Object 更合適。

var m = new Map(); 
var o = { 
 p: 'Hello World' 
}; 
m.set(o, 'content') 
m.get(o) // "content" 
m.has(o) // true 
m.delete(o) // true 
m.has(o) // false 

上面代碼使用set方法， 將對象o當作m的一個鍵， 然后又使用get方法讀取這個鍵， 接著使用delete方法刪除了這個鍵。
作為構造函數， Map 也可以接受一個數組作為參數。 該數組的成員是一個個表示鍵值對的數組。

var map = new Map([ 
 ['name', ' 張三 '], 
 ['title', 'Author'] 
]); 
map.size // 2 
map.has('name') // true 
map.get('name') // " 張三 " 
map.has('title') // true 
map.get('title') // "Author" 

上面代碼在新建 Map 實例時， 就指定了兩個鍵name和title。

Map 構造函數接受數組作為參數， 實際上執行的是下面的算法。

var items = [ 
 ['name', ' 張三 '], 
 ['title', 'Author'] 
]; 
var map = new Map(); 
items.forEach(([key, value]) => map.set(key, value)); 

下面的例子中， 字符串true和布爾值true是兩個不同的鍵。

var m = new Map([ 
 [true, 'foo'], 
 ['true', 'bar'] 
]); 
m.get(true) // 'foo' 
m.get('true') // 'bar' 

如果對同一個鍵多次賦值， 后面的值將覆蓋前面的值。

let map = new Map(); 
map 
 .set(1, 'aaa') 
 .set(1, 'bbb'); 
map.get(1) // "bbb" 

上面代碼對鍵1連續賦值兩次， 后一次的值覆蓋前一次的值。

如果讀取一個未知的鍵， 則返回undefined。

new Map().get('asfddfsasadf') 
 // undefined 

注意， 只有對同一個對象的引用， Map 結構才將其視為同一個鍵。 這一點要非常小心。

var map = new Map(); 
map.set(['a'], 555); 
map.get(['a']) // undefined 

上面代碼的set和get方法， 表面是針對同一個鍵， 但實際上這是兩個值， 內存地址是不一樣的， 因此get方法無法讀取該鍵， 返回undefined。

同理， 同樣的值的兩個實例， 在 Map 結構中被視為兩個鍵。

var map = new Map(); 
var k1 = ['a']; 
var k2 = ['a']; 
map 
 .set(k1, 111) 
 .set(k2, 222); 
map.get(k1) // 111 
map.get(k2) // 222 

上面代碼中， 變量k1和k2的值是一樣的， 但是它們在 Map 結構中被視為兩個鍵。

由上可知， Map 的鍵實際上是跟內存地址綁定的， 只要內存地址不一樣， 就視為兩個鍵。 這就解決了同名屬性碰撞（ clash） 的問題， 我們擴展別人的庫的時候， 如果使用對象作為鍵名， 就不用擔心自己的屬性與原作者的屬性同名。

如果 Map 的鍵是一個簡單類型的值（ 數字、 字符串、 布爾值）， 則只要兩個值嚴格相等， Map 將其視為一個鍵， 包括0和 - 0。 另外， 雖然NaN不嚴格相等于自身， 但 Map 將其視為同一個鍵。

let map = new Map(); 
map.set(NaN, 123); 
map.get(NaN) // 123 
map.set(-0, 123); 
map.get(+0) // 123 

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。