Map對(duì)象和普通對(duì)象的7個(gè)區(qū)別
來(lái)源 | https://levelup.gitconnected.com/7-differences-between-map-objects-and-plain-objects-9690a78fbc06
const obj = {name: 1,age: 2,};const map = new Map([['name', 1],['age', 2],]);
與普通對(duì)象相比，Map 作為哈希表提供了許多有用的功能。比如判斷一個(gè)key是否在hash表中，在map中可以使用has方法輕松判斷，但是在普通對(duì)象中可能會(huì)增加復(fù)雜度。
另外，set方法可以為Map設(shè)置key值，get方法可以獲取value，size屬性可以返回當(dāng)前Map中key/value對(duì)的數(shù)量，而plain對(duì)象需要手動(dòng)計(jì)算使用 自己的方法等。詳情見(jiàn)MDN。
2、?密鑰類(lèi)型
普通對(duì)象只接受字符串和符號(hào)作為鍵值，其他類(lèi)型將被強(qiáng)制轉(zhuǎn)換為字符串類(lèi)型，而 Map 可以接受任何類(lèi)型的鍵值（包括函數(shù)、對(duì)象或任何原語(yǔ)）。
const obj = {};const map = new Map();const key = function () {};obj[key] = 1;map.set(key, 1);// { 'function () {}': 1 }console.log('obj: ', obj);// Map(1) { [Function: key] => 1 }console.log('map: ', map);
3、Accidental keys
普通對(duì)象從原型繼承了許多屬性鍵，例如構(gòu)造函數(shù)等。因此，自己的密鑰很可能與原型上的密鑰發(fā)生沖突。但是 Map 默認(rèn)不包含任何鍵，它只包含那些顯式放入的。
const obj = {};const map = new Map();console.log(obj.constructor); // ? Object() { [native code] }console.log(map.get('constructor')); // undefined
4、Key order
雖然現(xiàn)在對(duì)普通對(duì)象的鍵進(jìn)行了排序，但情況并非總是如此，而且排序很復(fù)雜。例如，如果對(duì)象中有鍵需要轉(zhuǎn)換為字符串，則不保留對(duì)象鍵的原始順序。雖然 Map 以簡(jiǎn)單的方式排序，但它始終與我們插入的順序相同。
const obj = {name: 1,age: 2,3: 4,};const map = new Map([['name', 1],['age', 2],[3, 4],]);// The original order is not preserved.// {3: 4, name: 1, age: 2}console.log('obj: ', obj);// Map(3) { 'name' => 1, 'age' => 2, 3 => 4 }console.log('map: ', map);
5、迭代
我們可以使用 for...of 語(yǔ)句或 Map.prototype.forEach 直接迭代 Map 的屬性，而普通對(duì)象不能直接迭代。
const obj = {name: 1,age: 2,};const map = new Map([['name', 1],['age', 2],]);for (const [key, value] of map) {console.log(`${key}: `, value); // name: 1, age: 2}map.forEach((value, key) => {console.log(`${key}: `, value); // name: 1, age: 2});// Plain objects are not iterable directly.// But we can use functions like `Object.keys` to help us.Object.keys(obj).forEach((key) => {console.log(`${key}: `, obj[key]); // name: 1, age: 2});
6、序列化和解析
普通對(duì)象支持 JSON 序列化，但 Map 默認(rèn)無(wú)法獲取正確數(shù)據(jù)。
const obj = {name: 1,age: 2,};const map = new Map([['name', 1],['age', 2],]);console.log(JSON.stringify(obj)); // "{"name":1,"age":2}"console.log(JSON.stringify(map)); // "{}"
7、性能
Map 對(duì)象在涉及頻繁添加和刪除鍵值對(duì)的場(chǎng)景中表現(xiàn)更好，而普通對(duì)象沒(méi)有優(yōu)化。
總結(jié)
那么普通對(duì)象應(yīng)該被 Map 對(duì)象替換嗎？
不，如果我們想在 JSON 和原始數(shù)據(jù)之間轉(zhuǎn)換或包含特定的業(yè)務(wù)邏輯，那么我們應(yīng)該使用普通對(duì)象。因?yàn)楫?dāng)我們只想存儲(chǔ)鍵值對(duì)和循環(huán)操作或不斷添加和刪除屬性時(shí)，使用 Map 對(duì)象是更好的選擇。
Map對(duì)象雖然也是繼承自底層的Object.prototype，但它為我們提供了很多實(shí)用的方法來(lái)減輕我們的認(rèn)知負(fù)擔(dān)，比普通對(duì)象更高級(jí)。
學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)
