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

幸運(yùn)的是，map的鍵類型沒(méi)有問(wèn)題

const numbersMap = new Map();numbersMap.set(1, ’one’);numbersMap.set(2, ’two’);[...numbersMap.keys()]; // => [1, 2]

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

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

const booleansMap = new Map();booleansMap.set(true, 'Yep');booleansMap.set(false, 'Nope');[...booleansMap.keys()]; // => [true, false]

booleansMap使用booleans作為鍵，沒(méi)有問(wèn)題。相反，布爾鍵在普通對(duì)象中不起作用。

來(lái)突破一下想象:是否將整個(gè)對(duì)象作為map的鍵，答案：可以的。

對(duì)象作為鍵

假設(shè)你需要存儲(chǔ)一些與對(duì)象相關(guān)的數(shù)據(jù)，而不需要將這些數(shù)據(jù)附加到對(duì)象本身。使用普通對(duì)象是不可能的。

解決方法是使用對(duì)象-值元組數(shù)組：

const foo = { name: ’foo’ };const bar = { name: ’bar’ };const kindOfMap = [ [foo, ’Foo related data’], [bar, ’Bar related data’]]

kindOfMap是一個(gè)數(shù)組，包含對(duì)象和關(guān)聯(lián)值的對(duì)。

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

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的一個(gè)專門版本)不需要這么麻煩就能做到上面的事情:它只接受對(duì)象作為鍵。

Map和Weakmap之間的主要區(qū)別是，Weakmap允許對(duì)鍵對(duì)象進(jìn)行垃圾收集，從而防止內(nèi)存泄漏。

好了，用WeakMap重構(gòu)上面的代碼就變得很簡(jiǎn)單了：

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只接受對(duì)象作為鍵，并少了一些方法。

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

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

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

在對(duì)象參與者上定義的屬性toString覆蓋從原型繼承的toString()方法。這中斷了isObject()，因?yàn)樗蕾囉趖oString()方法。

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

例如，假設(shè)有一個(gè)管理某些自定義字段的用戶界面。 用戶可以通過(guò)指定名稱和值來(lái)添加自定義字段：

將定制字段的狀態(tài)存儲(chǔ)到普通對(duì)象中會(huì)很方便：

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

但是用戶可能會(huì)選擇一個(gè)自定義字段名稱，例如toString（如示例中所示），構(gòu)造函數(shù)等，這可能會(huì)破壞咱們的對(duì)象。

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

map沒(méi)有這個(gè)問(wèn)題，鍵值名稱不受限制：

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有一個(gè)名為toString的屬性，toString()方法都可以正常工作。

為了遍歷普通對(duì)象的屬性，必須使用其他的輔助靜態(tài)函數(shù)，如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)返回從對(duì)象提取的鍵值對(duì)數(shù)組。

但是，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()循環(huán)，展開運(yùn)算符[...map]。

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

普通對(duì)象的另一個(gè)問(wèn)題是，您無(wú)法立馬知道它包含的屬性的數(shù)量。

const exams = { ’John Smith’: ’10 points’, ’Jane Doe’: ’8 points’,};Object.keys(exams).length; // => 2

要確定exams的大小，必須通過(guò)所有鍵來(lái)確定它們的數(shù)量。

map 提供了 size 屬性，表示屬性的數(shù)量。

const examsMap = new Map([ [’John Smith’, ’10 points’], [’Jane Doe’, ’8 points’],]); examsMap.size; // => 2

確定map的屬性的數(shù)量更加簡(jiǎn)單：examsMap.size。

以上就是何時(shí)使用Map來(lái)代替普通的JS對(duì)象的詳細(xì)內(nèi)容，更多關(guān)于JS對(duì)象的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！