何時使用Map來代替普通的JS對象
1. Map 接受任何類型的鍵
如前所述，如果對象的鍵不是string或symbol，JS 將隱式地將其轉(zhuǎn)換為字符串。
幸運的是，map的鍵類型沒有問題
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作為鍵，沒有問題。相反，布爾鍵在普通對象中不起作用。
來突破一下想象:是否將整個對象作為map的鍵，答案：可以的。
對象作為鍵
假設(shè)你需要存儲一些與對象相關(guān)的數(shù)據(jù)，而不需要將這些數(shù)據(jù)附加到對象本身。使用普通對象是不可能的。
解決方法是使用對象-值元組數(shù)組：
const foo = { name: 'foo' };
const bar = { name: 'bar' };
const kindOfMap = [
[foo, 'Foo related data'],
[bar, 'Bar related data']
]
kindOfMap是一個數(shù)組，包含對象和關(guān)聯(lián)值的對。
這種方法最大的問題是按鍵訪問值的復(fù)雜度O(n)，咱們必須遍歷整個數(shù)組才能通過鍵獲得所需的值。
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之間的主要區(qū)別是，Weakmap允許對鍵對象進行垃圾收集，從而防止內(nèi)存泄漏。
好了，用WeakMap重構(gòu)上面的代碼就變得很簡單了：
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()方法。
檢查普通對象從原型繼承的屬性和方法的列表, 避免使用這些方法名定義自定義屬性。
例如，假設(shè)有一個管理某些自定義字段的用戶界面。 用戶可以通過指定名稱和值來添加自定義字段：
將定制字段的狀態(tài)存儲到普通對象中會很方便：
const userCustomFields = {
'color': 'blue',
'size': 'medium',
'toString': 'A blue box'
};
但是用戶可能會選擇一個自定義字段名稱，例如toString（如示例中所示），構(gòu)造函數(shù)等，這可能會破壞咱們的對象。
不要使用用戶輸入的值作為普通對象上鍵。
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 是可迭代
為了遍歷普通對象的屬性，必須使用其他的輔助靜態(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)返回從對象提取的鍵值對數(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)，展開運算符[...map]。
map提供了返回可迭代方法：map.keys()遍歷鍵，map.values()遍歷值
4. map 的大小
普通對象的另一個問題是，您無法立馬知道它包含的屬性的數(shù)量。
const exams = {
'John Smith': '10 points',
'Jane Doe': '8 points',
};
Object.keys(exams).length; // => 2
要確定exams的大小，必須通過所有鍵來確定它們的數(shù)量。
map 提供了 size 屬性，表示屬性的數(shù)量。
const examsMap = new Map([ ['John Smith', '10 points'], ['Jane Doe', '8 points'], ]); examsMap.size; // => 2
確定map的屬性的數(shù)量更加簡單：examsMap.size。
以上就是何時使用Map來代替普通的JS對象的詳細內(nèi)容，更多關(guān)于JS對象的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章為大家主要介紹了js獲取url參數(shù)值的幾種方式詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪<BR>2023-07-07
ES6 Class中實現(xiàn)私有屬性的一些方法總結(jié)
這篇文章主要給大家介紹了關(guān)于ES6 Class中實現(xiàn)私有屬性的一些方法，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用ES6具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
這篇文章主要介紹了JavaScript Dom 綁定事件操作,結(jié)合實例形式詳細分析了JavaScript實現(xiàn)dom綁定事件的相關(guān)實現(xiàn)方法與操作注意事項,需要的朋友可以參考下2019-10-10
相信不少同學(xué)在面試的時候經(jīng)常在基礎(chǔ)上就掛掉了，當下行情實屬嚴峻，如果我們基礎(chǔ)都沒有打牢固的話，實屬有點面試浪費機會。本文就來和大家聊聊JavaScript中的原型&原型鏈，希望對大家有所幫助2023-02-02
JavaScript使用正則表達式獲取全部分組內(nèi)容的方法示例
這篇文章主要介紹了JavaScript使用正則表達式獲取全部分組內(nèi)容的方法,結(jié)合實例形式分析了javascript正則匹配的相關(guān)操作技巧,需要的朋友可以參考下2017-01-01
這篇文章主要介紹了json 字符串之間的相互轉(zhuǎn)換 ,通過eval()函數(shù)可以將JSON字符串轉(zhuǎn)化為對象，本需要的朋友可以參考下2014-08-08
本文通過實例代碼給大家介紹了ES6中的Promise，感興趣的朋友參考下吧2017-10-10
這篇文章主要給大家介紹了關(guān)于利用JS如何獲取form表單數(shù)據(jù)的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用JS具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
這篇文章主要介紹了json按某個鍵的值進行排序的相關(guān)資料,代碼簡單易懂，非常不錯，需要的朋友可以參考下2016-12-12
我們知道js有很多事件,事件說白了就是 鼠標點擊,鼠標移動 ,鍵盤打字什么的這些人為的操作,本文給大家介紹JS中function(e) 其中的e代表什么意思,感興趣的朋友一起看看吧2024-01-01