何時使用Map來代替普通的JS對象

Posted on by

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的鍵，答案：可以的。

對象作為鍵

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

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

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。

以上就是何時使用Map來代替普通的JS對象的詳細內容，更多關於JS對象的資料請關註WalkonNet其它相關文章！

推薦閱讀：