Map是日常編程中比較常用的數(shù)據(jù)結(jié)構(gòu)之一。它保留了可以很容易地通過(guò)其鍵來(lái)訪問(wèn)的鍵值對(duì)。在Java中，使用HashMap來(lái)實(shí)現(xiàn)這個(gè)目的是很明顯的。然而，在JavaScript中，使用一個(gè)普通的對(duì)象來(lái)實(shí)現(xiàn)這個(gè)目標(biāo)是非常方便的。

[[332917]]

const map = {}; 
 
// 插入鍵值對(duì) 
map['key1'] = 'value1'; 
map['key2'] = 'value2'; 
map['key3'] = 'value3'; 
 
// 檢查map包含的鍵 
if (map.hasOwnProperty('key1')) { 
  console.log('Map contains key1'); 
} 
 
// 通過(guò)特定的鍵獲得值 
console.log(map['key1']); 

但是JavaScript中有一個(gè)專門用于此目的的內(nèi)置數(shù)據(jù)結(jié)構(gòu)：Map。讓我給你一些理由，讓你喜歡Map而不是普通的對(duì)象。

1.更多鍵類型

對(duì)象只能有符號(hào)(symbols)或字符串。Map可以將任何類型的值作為鍵：對(duì)象，函數(shù)或基元(primitives)。

const map = new Map(); 
const myFunction = () => console.log('I am a useful function.'); 
const myNumber = 666; 
const myObject = { 
  name: 'plainObjectValue', 
  otherKey: 'otherValue' 
}; 
map.set(myFunction, 'function as a key'); 
map.set(myNumber, 'number as a key'); 
map.set(myObject, 'object as a key'); 
 
console.log(map.get(myFunction)); // function as a key 
console.log(map.get(myNumber)); // number as a key 
console.log(map.get(myObject)); // object as a key 

2.更好地確定大小

Map提供了一個(gè)size屬性，但一個(gè)普通對(duì)象的大小卻必須通過(guò)艱難的方式來(lái)確定。確定Map的大小可以在O(1)時(shí)間內(nèi)完成，而確定一個(gè)普通對(duì)象的大小則需要O(n)步。

const map = new Map(); 
map.set('someKey1', 1); 
map.set('someKey2', 1); 
... 
map.set('someKey100', 1); 
 
console.log(map.size) // 100, Runtime: O(1) 
 
const plainObjMap = {}; 
plainObjMap['someKey1'] = 1; 
plainObjMap['someKey2'] = 1; 
... 
plainObjMap['someKey100'] = 1; 
 
console.log(Object.keys(plainObjMap).length) // 100, Runtime: O(n) 

3.更好的性能

對(duì)Map進(jìn)行了優(yōu)化，以便頻繁地添加和刪除條目。

此外，Map的條目數(shù)可以在恒定的時(shí)間內(nèi)被檢索，而一個(gè)普通對(duì)象的條目數(shù)必須被計(jì)算，這需要O(n)時(shí)間。

以我的Macbook Pro為例，這是一張有1000萬(wàn)個(gè)條目的Map的平均大小確定時(shí)間。

• 普通JS對(duì)象: ~1.6 s
• Map: < 1 ms

此外，它不需要將任何鍵轉(zhuǎn)換為字符串，這可以節(jié)省很多時(shí)間。

4.直接迭代

對(duì)象必須通過(guò)獲取鍵并對(duì)其進(jìn)行迭代。另一方面，Map是可迭代的，這意味著它可以直接迭代。

const map = new Map(); 
map.set('someKey1', 1); 
map.set('someKey2', 2); 
map.set('someKey3', 3); 
 
for (let [key, value] of map) { 
  console.log(`${key} = ${value}`); 
} 
// someKey1 = 1 
// someKey2 = 2 
// someKey3 = 3 
 
const plainObjMap = {}; 
plainObjMap['someKey1'] = 1; 
plainObjMap['someKey2'] = 2; 
plainObjMap['someKey3'] = 3; 
 
for (let key of Object.keys(plainObjMap)) { 
  const value = plainObjMap[key]; 
  console.log(`${key} = ${value}`); 
} 
// someKey1 = 1 
// someKey2 = 2 
// someKey3 = 3 

5.key順序

在ECMAScript 2015之前，一個(gè)對(duì)象的鍵不保證以任何特定的順序出現(xiàn)。在Map上迭代保證鍵按插入順序出現(xiàn)。

6.無(wú)鍵覆蓋

一個(gè)普通對(duì)象由于其原型已經(jīng)包含了一些鍵，你的鍵和對(duì)象已經(jīng)包含的鍵之間可能會(huì)有沖突。Map在創(chuàng)建時(shí)不包含任何鍵。

注意：自ECMAScript 2015年起，你可以通過(guò)使用 Object.create(null) 來(lái)創(chuàng)建你的普通對(duì)象圖來(lái)避免意外的鍵覆蓋。

const map = new Map(); 
map.set('someKey1', 1); 
map.set('someKey2', 2); 
map.set('toString', 3); // No problem for Map 
 
const plainObjMap = new Map(); 
plainObjMap['someKey1'] = 1; 
plainObjMap['someKey2'] = 2; 
plainObjMap['toString'] = 3; // Oops, native property