作者:Dmitri Pavlutin翻譯:瘋狂的技術宅
原文:https://dmitripavlutin.com/ma...
未經允許嚴禁轉載
JavaScript 普通對象 {key: 'value'}
可用於保存結構化數據。
但是我發現很煩人的一件事:對象的鍵必須是字符串(或很少使用的符號)。
如果用數字作鍵會怎樣?在這種情況下沒有錯誤:
const names = {
1: 'One',
2: 'Two',
};
Object.keys(names); // => ['1', '2']
JavaScript 只是將對象的鍵隱式轉換爲字符串。這是一件棘手的事,因爲你失去了類型的一致性。
在本文中,我將介紹 ES2015 中提供的 JavaScript Map 對象如何解決許多普通對象的問題,包括將鍵轉換爲字符串。
1. map 可接受任意類型的鍵
如上所述,如果對象的鍵不是字符串或符號,則 JavaScript 會將其隱式轉換爲字符串。
幸運的是,map 在鍵類型上不存在問題:
const numbersMap = new Map();
numbersMap.set(1, 'one');
numbersMap.set(2, 'two');
[...numbersMap.keys()]; // => [1, 2]
1
和 2
是 numbersMap
中的鍵。這些鍵的類型 number 保持不變。
你可以在 map 中使用任何鍵類型:數字,布爾以及經典的字符串和符號。
const booleansMap = new Map();
booleansMap.set(true, "Yep");
booleansMap.set(false, "Nope");
[...booleansMap.keys()]; // => [true, false]
booleansMap
用布爾值作爲鍵沒有問題。
同樣,布爾鍵在普通對象中不起作用。
讓我們超越界限:你能把整個對象用作 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
的代碼付出的代價微不足道:
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 對鍵名沒有限制
JavaScript 中的任何對象都從其原型對象繼承屬性。普通的 JavaScript 對象也是如此。
如果覆蓋從原型繼承的屬性,則可能會破壞依賴於這些原型屬性的代碼:
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
在對象 actor
上定義的屬性 toString
覆蓋了從原型繼承的 toString()
方法。因爲它依賴於 toString()
方法,所以這破壞了 isObject()
。
檢查普通對象從原型繼承的屬性和方法列表。要避免使用這些名稱定義自定義屬性。
例如,假設有一個管理某些自定義字段的用戶界面。用戶可以通過指定名稱和值來添加字段:
將自定義字段的狀態存儲到一個普通對象中會很方便:
const userCustomFields = {
'color': 'blue',
'size': 'medium',
'toString': 'A blue box'
};
但是用戶可能會選擇一個自定義字段名稱,例如 toString
(如例中所示), constructor
等,這可能會破壞你的對象。
不要通過接受用戶的輸入在普通對象上創建鍵!
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()
(在 ES2017 中可用):
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
。
5.結論
普通的 JavaScript 對象通常可以很好地保存結構化數據。但是它們有一些限制:
- 只能用字符串或符號用作鍵
- 自己的對象屬性可能會與從原型繼承的屬性鍵衝突(例如,
toString
,constructor
等)。 - 對象不能用作鍵
所有這些問題都可以通過 map 輕鬆解決。而且它們提供了諸如迭代器和易於進行大小查找之類的好處。
不要將 map 視爲普通對象的替代品,而應視爲補充。
你知道 map 相對於普通對象的其他好處嗎?請在下面寫下你的評論!
本文首發微信公衆號:前端先鋒
歡迎掃描二維碼關注公衆號,每天都給你推送新鮮的前端技術文章
歡迎繼續閱讀本專欄其它高贊文章:
- 深入理解Shadow DOM v1
- 一步步教你用 WebVR 實現虛擬現實遊戲
- 13個幫你提高開發效率的現代CSS框架
- 快速上手BootstrapVue
- JavaScript引擎是如何工作的?從調用棧到Promise你需要知道的一切
- WebSocket實戰:在 Node 和 React 之間進行實時通信
- 關於 Git 的 20 個面試題
- 深入解析 Node.js 的 console.log
- Node.js 究竟是什麼?
- 30分鐘用Node.js構建一個API服務器
- Javascript的對象拷貝
- 程序員30歲前月薪達不到30K,該何去何從
- 14個最好的 JavaScript 數據可視化庫
- 8 個給前端的頂級 VS Code 擴展插件
- Node.js 多線程完全指南
- 把HTML轉成PDF的4個方案及實現