Map 和 Object 都是用于存儲鍵值對的數(shù)據(jù)結構，但它們之間存在許多關鍵區(qū)別。

簡單來說，Map 是一個更專門化、功能更強大的鍵值對集合，而 Object 則是一個更通用的、用于描述實體的基礎數(shù)據(jù)結構。

下面我們從多個維度來詳細對比它們的區(qū)別。

核心區(qū)別對比表

詳細解釋與示例

1. 鍵的類型 (Key Type)

這是最根本的區(qū)別。

Object 的鍵只能是 String 或 Symbol。如果你使用一個非字符串的鍵（如一個對象），它會被自動通過 .toString() 方法轉換為字符串。

const obj = {};
const key = { id: 1 };

obj[key] = 'value'; // key 被轉換為字符串 "[object Object]"
console.log(obj); // { "[object Object]": "value" }
// 現(xiàn)在你無法再用 key 對象來訪問這個值，因為訪問時又會轉換為相同的字符串

Map 的鍵可以是任何數(shù)據(jù)類型，包括對象、函數(shù)、NaN等。它使用“SameValueZero”算法來判斷鍵的相等性（類似于 ===，但認為 NaN === NaN）。

const map = new Map();
const key = { id: 1 };

map.set(key, 'value');
map.set(NaN, 'This is NaN');
map.set(() => {}, 'A function as key');

console.log(map.get(key)); // 'value'
console.log(map.get(NaN)); // 'This is NaN'
// 鍵是唯一的，不會發(fā)生轉換

2. 順序 (Order)

• Map 會嚴格按照鍵值對的插入順序來記錄和迭代它們。
• Object 的順序在 ES6 之前沒有明確定義。從 ES6 開始，規(guī)范規(guī)定了：
  • String 類型的鍵會按照創(chuàng)建的順序記錄。
  • Symbol 類型的鍵則沒有固定的順序。
  • 但為了兼容性，最好不要依賴 Object 的屬性順序。

3. 迭代 (Iteration)

Map 是一個可迭代對象（實現(xiàn)了 Symbol.iterator），這意味著你可以直接用它來進行 for...of 循環(huán)，或者使用展開運算符 ... 將其轉換為數(shù)組。

const map = new Map([['a', 1], ['b', 2]]);
for (const [key, value] of map) {
  console.log(key, value);
}
// Output: a 1, b 2

console.log([...map]); // [ ['a', 1], ['b', 2] ]

Object 默認不可直接迭代。你需要使用 Object.keys(), Object.values(), 或 Object.entries() 先獲取一個數(shù)組，然后再迭代這個數(shù)組。

const obj = { a: 1, b: 2 };
for (const key of Object.keys(obj)) {
  console.log(key, obj[key]);
}

4. 大小 (Size)

Map 的大小可以通過 size 屬性輕松、高效地獲取。

console.log(map.size); // 2

Object 的大小需要通過 Object.keys(obj).length 來計算，這在性能敏感的場景下可能稍慢。

console.log(Object.keys(obj).length); // 2

5. 原型和默認鍵 (Prototype and Default Keys)

Object 可能受到原型鏈上的屬性污染。如果你不小心，可能會覆蓋或訪問到繼承來的方法（如 hasOwnProperty）。你需要使用 obj.hasOwnProperty('key') 來檢查一個屬性是否是自身的。

const obj = {};
console.log('toString' in obj); // true，因為從原型鏈繼承而來

Map 是“純凈”的，它只包含你顯式放入的鍵值對，沒有任何默認的鍵，因此更安全。

const map = new Map();
console.log(map.has('toString')); // false

6. 序列化和解析 (Serialization and Parsing)

Object 可以無縫地與 JSON 格式相互轉換。

const obj = { a: 1 };
const str = JSON.stringify(obj); // '{"a":1}'
const newObj = JSON.parse(str); // { a: 1 }

Map 默認無法被 JSON.stringify 正確處理，會序列化為一個空對象 {}。你需要自己編寫轉換邏輯。

const map = new Map([['a', 1]]);
const str = JSON.stringify(map); // '{}'

// 轉換 Map -> JSON
const mapToJson = (map) => JSON.stringify([...map]);
// 轉換 JSON -> Map
const jsonToMap = (jsonStr) => new Map(JSON.parse(jsonStr));

何時使用 Map vs Object？

使用Map的場景：

1. 鍵的類型未知或多樣：當你需要使用非字符串/符號作為鍵時（如 DOM 節(jié)點、對象等）。
2. 需要維護插入順序：并且需要依賴這個順序進行迭代或其他操作。
3. 頻繁地添加和刪除鍵值對：Map 在頻繁更新的場景下性能優(yōu)化得更好。
4. 需要避免與原型上的鍵產(chǎn)生沖突：需要一個純凈的鍵值對集合時。

使用Object的場景：

1. 處理 JSON 數(shù)據(jù)：需要頻繁地進行序列化和反序列化。
2. 結構是固定的：你需要一個“實體”來描述某個事物，其屬性和方法在開發(fā)時就是已知的（例如，user = { name: 'John', age: 30 }）。
3. 需要用到“方法”：對象可以包含函數(shù)（方法），而 Map 的值雖然也可以是函數(shù)，但語法上不如對象的方法直觀（obj.method() vs map.get('method')()）。
4. 使用簡單的字符串鍵：并且不需要 Map 提供的那些高級特性（如順序、任意鍵類型等）。

總結

在現(xiàn)代 JavaScript 開發(fā)中，當你的需求更偏向于一個純粹的“鍵值對集合”或“哈希映射”時，Map 通常是比 Object 更優(yōu)的選擇。

到此這篇關于s中 Map和 Object 的區(qū)別小結的文章就介紹到這了,更多相關js Map和Object區(qū)別內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論