Map 和 Object 都是用于存儲(chǔ)鍵值對(duì)的數(shù)據(jù)結(jié)構(gòu)，但它們之間存在許多關(guān)鍵區(qū)別。

簡(jiǎn)單來(lái)說(shuō)，Map 是一個(gè)更專門(mén)化、功能更強(qiáng)大的鍵值對(duì)集合，而 Object 則是一個(gè)更通用的、用于描述實(shí)體的基礎(chǔ)數(shù)據(jù)結(jié)構(gòu)。

下面我們從多個(gè)維度來(lái)詳細(xì)對(duì)比它們的區(qū)別。

核心區(qū)別對(duì)比表

詳細(xì)解釋與示例

1. 鍵的類型 (Key Type)

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

Object 的鍵只能是 String 或 Symbol。如果你使用一個(gè)非字符串的鍵（如一個(gè)對(duì)象），它會(huì)被自動(dòng)通過(guò) .toString() 方法轉(zhuǎn)換為字符串。

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

obj[key] = 'value'; // key 被轉(zhuǎn)換為字符串 "[object Object]"
console.log(obj); // { "[object Object]": "value" }
// 現(xiàn)在你無(wú)法再用 key 對(duì)象來(lái)訪問(wèn)這個(gè)值，因?yàn)樵L問(wèn)時(shí)又會(huì)轉(zhuǎn)換為相同的字符串

Map 的鍵可以是任何數(shù)據(jù)類型，包括對(duì)象、函數(shù)、NaN等。它使用“SameValueZero”算法來(lái)判斷鍵的相等性（類似于 ===，但認(rèn)為 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'
// 鍵是唯一的，不會(huì)發(fā)生轉(zhuǎn)換

2. 順序 (Order)

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

3. 迭代 (Iteration)

Map 是一個(gè)可迭代對(duì)象（實(shí)現(xiàn)了 Symbol.iterator），這意味著你可以直接用它來(lái)進(jìn)行 for...of 循環(huán)，或者使用展開(kāi)運(yùn)算符 ... 將其轉(zhuǎ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 默認(rèn)不可直接迭代。你需要使用 Object.keys(), Object.values(), 或 Object.entries() 先獲取一個(gè)數(shù)組，然后再迭代這個(gè)數(shù)組。

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

4. 大小 (Size)

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

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

Object 的大小需要通過(guò) Object.keys(obj).length 來(lái)計(jì)算，這在性能敏感的場(chǎng)景下可能稍慢。

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

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

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

const obj = {};
console.log('toString' in obj); // true，因?yàn)閺脑玩溊^承而來(lái)

Map 是“純凈”的，它只包含你顯式放入的鍵值對(duì)，沒(méi)有任何默認(rèn)的鍵，因此更安全。

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

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

Object 可以無(wú)縫地與 JSON 格式相互轉(zhuǎn)換。

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

Map 默認(rèn)無(wú)法被 JSON.stringify 正確處理，會(huì)序列化為一個(gè)空對(duì)象 {}。你需要自己編寫(xiě)轉(zhuǎn)換邏輯。

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

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

何時(shí)使用 Map vs Object？

使用Map的場(chǎng)景：

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

使用Object的場(chǎng)景：

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

總結(jié)

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

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

最新評(píng)論