本文實例講述了ES6 Map結構的應用。分享給大家供大家參考，具體如下：

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

初識map

var obj = { 'name':'Joh', qq:'5222', 'full name':'Johnny'};let map = new Map();map .set(obj, 'Hello map') .set('haha', 12) .set(52, obj) .set(NaN, new Set([1,2,3]));console.log(map);console.log(map.size); // 4

Map可以連續set,就像Set可以連續add一樣，同樣有size的api

map 的delete, has方法

var obj = { 'name':'Joh', qq:'5222', 'full name':'Johnny'};var arr = [1,2];let map = new Map();// map 可以連續setmap .set(obj,'11') .set(11,3) .set(12,'H') .set(arr,'h');var delRes = map.delete(obj); // map不可以連續 deleteconsole.log(delRes); // truevar hasBool1 = map.has(11);console.log(hasBool1); // truevar hasBool2 = map.has(arr);console.log(hasBool2); // trueconsole.log(map.size); // 3

NaN在map上的特殊性與clear方法

let map = new Map();// map 可以連續setmap .set(11,3) .set(12,'H') .set(NaN,'h1') .set(NaN,'h2'); // 覆蓋前值console.log(map.get(NaN)); // h2map.clear();console.log(map.size); // 0

和set相同，NaN在map上具有唯一性，clear方法會將集合清空

map 的構造函數參數的傳遞，取值get方法，keys方法，values方法

let map = new Map([ ['name','Joh'], ['age',10]]);let name = map.get('name');let age = map.get('age');console.log(name); // Johconsole.log(age); // 10let keys = map.keys();for(let k of keys) { console.log(k); // 分別輸出 name 和 age}let values = map.values();for(let v of values) { console.log(v); // 分別輸出 Joh 和 10}

map與set的原型屬性比較和map使用entries方法獲得數據的實體

let map = new Map([ ['name','Joh'], ['age',10]]);console.log(Set.prototype[Symbol.iterator] === Set.prototype.values); // trueconsole.log(Map.prototype[Symbol.iterator] === Map.prototype.values); // falseconsole.log(Map.prototype[Symbol.iterator] === Map.prototype.entries); // truelet entries = map.entries();for (let en of entries) { console.log(en); // 分別輸出 ['name','Joh'] 和 ['age',10]}

map內forEach方法和對象傳遞，以及內部this的使用

let map = new Map([ ['name','Joh'], ['age',10]]);var me = { name:"Joh"};map.forEach(function (val, key) { console.log(key, val); // 分別輸出 name Joh 和 "age" 10});console.log('>>>>>');map.forEach(function (val, key) { // console.log(key, val); // 分別輸出 name Joh 和 "age" 10 console.log(this); // {name: "Joh"} 此處的this就是傳遞進來的對象}, me);