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