JS 普通對象 {key: 'value'} 用于存放結構化數據。但有一件事我覺得很煩:對象鍵必須是字符串(或很少使用的 symbol)。

如果將數字用作鍵會怎樣？在這種情況下不會有錯誤：

const?names?=?{
??1:?'One',
??2:?'Two',
};

Object.keys(names);?//?=>?['1',?'2']

JS 會隱式地將對象的鍵轉換為字符串，這種默認行為丟失了類型的一致性，要解決也挺棘手的。但 ES6 中的Map 對象可以幫我們解決這類的問題，Look See See。

1. Map 接受任何類型的鍵

如前所述，如果對象的鍵不是 string 或 symbol，JS 將隱式地將其轉換為字符串。

幸運的是，map 的鍵類型沒有問題

const?numbersMap?=?new?Map();

numbersMap.set(1,?'one');
numbersMap.set(2,?'two');

[...numbersMap.keys()];?//?=>?[1,?2]

1 和 2 是 numbersMap 中的鍵，這些鍵的類型(數字)保持不變。

可以在 mpa 中使用任何鍵類型:數字、布爾值、字符串和 symbol。

const?booleansMap?=?new?Map();

booleansMap.set(true,?"Yep");
booleansMap.set(false,?"Nope");

[...booleansMap.keys()];?//?=>?[true,?false]

booleansMap 使用 booleans 作為鍵，沒有問題。相反，布爾鍵在普通對象中不起作用。

來突破一下想象:是否將整個對象作為 map 的鍵，答案：可以的。

1.1 對象作為鍵

假設你需要存儲一些與對象相關的數據，而不需要將這些數據附加到對象本身。使用普通對象是不可能的。

解決方法是使用對象-值元組數組：

const?foo?=?{?name:?'foo'?};
const?bar?=?{?name:?'bar'?};

const?kindOfMap?=?[
??[foo,?'Foo?related?data'],
??[bar,?'Bar?related?data']
]

kindOfMap 是一個數組，包含對象和關聯值的對。

這種方法最大的問題是按鍵訪問值的復雜度O(n)，咱們必須遍歷整個數組才能通過鍵獲得所需的值。

function?getByKey(kindOfMap,?key)?{
??for?(const?[k,?v]?of?kindOfMap)?{
????if?(key?===?k)?{
??????return?v;
????}
??}
??return?undefined;
}

getByKey(kindOfMap,?foo);?//?=>?'Foo?related?data'

WeakMap (Map的一個專門版本)不需要這么麻煩就能做到上面的事情:它只接受對象作為鍵。

Map 和 Weakmap 之間的主要區別是，Weakmap 允許對鍵對象進行垃圾收集，從而防止內存泄漏。

好了，用 WeakMap 重構上面的代碼就變得很簡單了：

const?foo?=?{?name:?'foo'?};
const?bar?=?{?name:?'bar'?};

const?mapOfObjects?=?new?WeakMap();

mapOfObjects.set(foo,?'Foo?related?data');
mapOfObjects.set(bar,?'Bar?related?data');

mapOfObjects.get(foo);?//?=>?'Foo?related?data'

與 Map 相反，WeakMap 只接受對象作為鍵，并少了一些方法。

2. map 對鍵名沒有限制

JS 中的任何對象都從原型對象繼承屬性，普通對象也是如此。

如果重寫從原型繼承的屬性，則可能會破壞依賴這些原型屬性的代碼：

function?isPlainObject(value)?{
??return?value.toString()?===?'[object?Object]';
}

const?actor?=?{
??name:?'Harrison?Ford',
??toString:?'Actor:?Harrison?Ford'
};

//?Does?not?work!
isPlainObject(actor);?//?TypeError:?value.toString?is?not?a?function

在對象參與者上定義的屬性 toString 覆蓋從原型繼承的 toString() 方法。這中斷了isObject()，因為它依賴于 toString() 方法。

檢查普通對象從原型繼承的屬性和方法的列表, 避免使用這些方法名定義自定義屬性。

例如，假設有一個管理某些自定義字段的用戶界面。用戶可以通過指定名稱和值來添加自定義字段：

將定制字段的狀態存儲到普通對象中會很方便：

const?userCustomFields?=?{
??'color':????'blue',
??'size':?????'medium',
??'toString':?'A?blue?box'
};

但是用戶可能會選擇一個自定義字段名稱，例如toString(如示例中所示)，構造函數等，這可能會破壞咱們的對象。

不要使用用戶輸入的值作為普通對象上鍵。

map 沒有這個問題，鍵值名稱不受限制：

function?isMap(value)?{
??return?value.toString()?===?'[object?Map]';
}

const?actorMap?=?new?Map();

actorMap.set('name',?'Harrison?Ford');
actorMap.set('toString',?'Actor:?Harrison?Ford');

//?Works!
isMap(actorMap);?//?=>?true

不管 actorMap 有一個名為toString的屬性，toString()方法都可以正常工作。

3. map 是可迭代

為了遍歷普通對象的屬性，必須使用其他的輔助靜態函數，如 Object.keys()或 Object.entries():

const?colorsHex?=?{
??'white':?'#FFFFFF',
??'black':?'#000000'
};

for?(const?[color,?hex]?of?Object.entries(colorsHex))?{
??console.log(color,?hex);
}
//?'white'?'#FFFFFF'
//?'black'?'#000000'

Object.entries(colorsHex) 返回從對象提取的鍵值對數組。

但是，map 本身是可迭代的：

const?colorsHexMap?=?new?Map();

colorsHexMap.set('white',?'#FFFFFF');
colorsHexMap.set('black',?'#000000');

for?(const?[color,?hex]?of?colorsHexMap)?{
??console.log(color,?hex);
}
//?'white'?'#FFFFFF'
//?'black'?'#000000'

colorsHexMap是可迭代。可以在任何接受迭代的地方使用它:for()循環，展開運算符[...map]。

map 提供了返回可迭代方法：map.keys() 遍歷鍵，map.values() 遍歷值

4. map 的大小

普通對象的另一個問題是，您無法立馬知道它包含的屬性的數量。

const?exams?=?{
??'John?Smith':?'10?points',
??'Jane?Doe':?'8?points',
};

Object.keys(exams).length;?//?=>?2

要確定 exams 的大小，必須通過所有鍵來確定它們的數量。

map 提供了 size 屬性，表示屬性的數量。

const?examsMap?=?new?Map([
??['John?Smith',?'10?points'],
??['Jane?Doe',?'8?points'],
]);

examsMap.size;?//?=>?2

確定 map 的屬性的數量更加簡單：examsMap.size。

總結

普通 JS 對象通常可以很好地保存結構化數據，但它們也有一些局限性:

1. 只能用字符串或 sybmol 作為鍵

2. 自己的對象屬性可能會與從原型繼承的屬性鍵沖突(例如 toString，constructor等)。

3. 對象不能用作鍵

所有這些問題都可以通過 map 輕松解決。而且，它們提供了諸如迭代器和易于進行大小查找之類的好處。

不要將 map 當作普通對象的替代品，而應視為是普通對象補充。

你還知道 map 比普通物體的其他好處嗎?請在下方留言。

原文：https://dmitripavlutin.com/maps-vs-plain-objects-javascript/
作者：Dmitri Pavlutin ?譯者：前端小智 ?來源：dmitripavlutin

交流

Vue 中如何讓 input 聚焦？

高級 Vue 技巧：控制父類的 slot

如何構建運行良好的Vue組件

如何在 Vue 中對事件進行防抖和節流？(小智的第三個視頻)