什麼時候使用 Map 來代替普通的 JS 對象

做者：Dmitri Pavlutin
譯者：前端小智
來源：dmitripavlutin

點贊再看，養成習慣

本文 GitHub https://github.com/qq44924588... 上已經收錄，更多往期高贊文章的分類，也整理了不少個人文檔，和教程資料。歡迎Star和完善，你們面試能夠參照考點複習，但願咱們一塊兒有點東西。

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 比普通物體的其餘好處嗎?請在下方留言。

---

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

原文： https://dmitripavlutin.com/ma...

交流

文章每週持續更新，能夠微信搜索「 大遷世界 」第一時間閱讀和催更（比博客早一到兩篇喲），本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄，整理了不少個人文檔，歡迎Star和完善，你們面試能夠參照考點複習，另外關注公衆號，後臺回覆福利，便可看到福利，你懂的。