站長資訊網(wǎng)
map是引用類型；map（集合）是es6新增的一種引用數(shù)據(jù)類型，表示數(shù)據(jù)的映射關(guān)系。map集合數(shù)據(jù)類型中數(shù)據(jù)是以“鍵/值”的方式存儲的，可以使用對象的屬性作為鍵，使用屬性來引用值；map可以使用new來創(chuàng)建，例“const myMap = new Map();”。
本教程操作環(huán)境：windows7系統(tǒng)、ECMAScript 6版、Dell G3電腦。
map是引用類型。
es6 map
在ES6之前，在JavaScript中實現(xiàn)‘鍵’=>‘值’，也就是我們常說的鍵值對，是用Object來完成的。但這種實現(xiàn)方式在特殊場景下的有問題的，ES6又出了一個為Map的新集合類型，為這門語言帶來正真的鍵值對存儲機(jī)制。
map（集合）是es6新增的一種引用數(shù)據(jù)類型，表示數(shù)據(jù)的映射關(guān)系；map集合數(shù)據(jù)類型中數(shù)據(jù)是以“鍵/值”的方式存儲的，可以使用對象的屬性作為鍵，使用屬性來引用值。
使用new關(guān)鍵字來實例一個map
let m = new Map(); console.log(m); // Map(0) {}
創(chuàng)建時初始化:
傳入一個二維數(shù)組參數(shù)(可迭代對象，內(nèi)部以數(shù)組的方式傳入鍵值)
每個子數(shù)組，第一個元素是map對應(yīng)的key， 第二個元素是map對應(yīng)的value
let m = new Map([[{}, 222], [{}, '123']]); console.log(m); // Map(2) { {} => 222, {} => '123' }
1-2-1 添加映射元素
通過set()方法添加，傳入兩個參數(shù)，第一個傳入映射的鍵，第二個傳入映射的值。返回的是該映射集合（意味著可以鏈?zhǔn)教砑樱?/p>
let m = new Map(); m.set('prop', '值'); console.log(m); // Map(1) { 'prop' => '值' }
鏈?zhǔn)教砑渔I值
let m = new Map(); m.set('prop', '值').set('prop2', false).set('num', {id: 13}); console.log(m); // Map(3) { 'prop' => '值', 'prop2' => false, 'num' => { id: 13 } }
1-2-2 映射集合長度
使用size屬性可以獲取到當(dāng)前集合元素數(shù)量
let m = new Map(); m.set('prop', '值').set('prop2', false).set('num', {id: 13}); console.log(m.size);
1-2-3 獲取元素
通過get()方法獲取到元素，傳入獲取目標(biāo)的key
let m = new Map(); m.set('prop', '值').set('prop2', false).set('num', {id: 13}); console.log(m.get('prop2')); // false
1-2-4 刪除元素
通過delete()方法刪除映射集合中的某個元素，返回刪除成功或失敗的布爾值
let m = new Map(); m.set('prop', '值').set('prop2', false).set('num', {id: 13}); m.delete('prop2'); // true console.log(m.get('prop2'), m.size); // undefined 2
1-2-5 檢測元素是否存在
使用has()方法檢測目標(biāo)元素是否存在，返回檢測結(jié)果的布爾值
let m = new Map(); m.set('prop', '值').set('prop2', false).set('num', {id: 13}); m.delete('prop2'); // true console.log(m.has('prop2'), m.has('num')); // false true
1-2-6 清除元素方法
使用clear()方法可以清除所有的元素， 返回清除成功的布爾值
let m = new Map(); m.set('prop', '值').set('prop2', false).set('num', {id: 13}); m.clear(); // true console.log(m); // Map(0) {}
map可以根據(jù)插入順序迭代元素
映射實例會提供(iterator).能夠以插入的順序生成[key, value]形式的數(shù)組， 可以通過entries()方法(或者提供的Symbol.iterator)迭代器接口遍歷。
let m = new Map(); m.set('prop', '值').set('prop2', false).set('num', {id: 13}); console.log(m.entries === m[Symbol.iterator]);// true for(let k1 of m.entries()){ console.log(k1); // [ 'prop', '值' ] // [ 'prop2', false ] // [ 'num', { id: 13 } ] // 遍歷的屬性即對應(yīng)映射元素的鍵值對數(shù)組 } for(let k2 of m.keys()){ console.log(k2); // prop // prop2 // num // 遍歷的屬性對應(yīng)映射元素的鍵 } for(let k3 of m.values()){ console.log(k3); // 值 // false // { id: 13 } // 遍歷的屬性對應(yīng)映射元素的值 } for(let k4 of m[Symbol.iterator]()){ console.log(k4); // [ 'prop', '值' ] // [ 'prop2', false ] // [ 'num', { id: 13 } ] // 遍歷的屬性即對應(yīng)映射元素的鍵值對數(shù)組 }
- 內(nèi)存占用
瀏覽器的差異會導(dǎo)致兩種存儲方式占用的內(nèi)存占用所不同，不過在給定內(nèi)存大小的情況下，map比Object多存儲大約50%的鍵值對
- 插入性能
插入速度上面 map 和 Object性能大致相同， 但是如果代碼涉及大量的插入，建議使用map
- 查找速度
差異較小，只包含少量鍵值對的情況下Object更好
- 刪除性能
Object 的delete()性能較差，而map的刪除delete()性能好，如果數(shù)據(jù)涉及到大量的刪除操作，建議使用map
【
