這篇文章主要介紹了淺談es6 javascript的map資料結構，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧
本文介紹了es6 javascript的map資料結構，分享給大家，具體如下：
Map 結構的目的和基本用法
JavaScript 的物件（ Object）， 基本上就是鍵值對的集合（ Hash 結構）， 但傳統上只能用字串當作鍵。這給它的使用帶來了很大的限制。
var data = {};
var element = document.getElementById('myp');
data[element] = 'metadata';
data['[object HTMLpElement]'] // "metadata"登入後複製
上面程式碼原意是將一個 DOM 節點當作物件data的鍵， 但由於物件只接受字串作為鍵名， 所以element被自動轉為字串[object HTMLpElement]。
為了解決這個問題， 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
登入後複製
上面是我整理給大家的，希望未來會對大家有幫助。
相關文章：
vue-cli設定檔（詳細教學）
#使用jQuery封裝animate.css（詳細教學）
在vuex中如何實作閒置狀態進行重設
以上是詳細解讀javascript中map資料結構的詳細內容。更多資訊請關注PHP中文網其他相關文章！
