在JavaScript中，Map 和 Object 看起來都是用鍵值對來存儲數(shù)據(jù)，那么他們有什么不同呢？

不同點(diǎn)

Key filed

在 Object 中， key 必須是簡單數(shù)據(jù)類型（整數(shù)，字符串或者是 symbol），而在 Map 中則可以是 JavaScript 支持的所有數(shù)據(jù)類型，也就是說可以用一個(gè) Object 來當(dāng)做一個(gè)Map元素的 key。

元素順序

Map 元素的順序遵循插入的順序，而 Object 的則沒有這一特性。

繼承

Map 繼承自 Object 對象。

新建實(shí)例

Object 支持以下幾種方法來創(chuàng)建新的實(shí)例：

var obj = {...};
var obj = new Object();
var obj = Object.create(null);

Map 僅支持下面這一種構(gòu)建方法：

var map = new Map([[1, 2], [2, 3]]); // map = {1 => 2, 2 => 3}

數(shù)據(jù)訪問

Map 想要訪問元素，可以使用 Map 本身的原生方法：

map.get(1) // 2

Object 可以通過 . 和 [ ] 來訪問

obj.id;
obj['id'];

判斷某個(gè)元素是否在 Map 中可以使用

map.has(1);

判斷某個(gè)元素是不是在 Object 中需要以下操作：

obj.id === undefined;
// 或者
'id' in obj;

另外需要注意的一點(diǎn)是，Object 可以使用 Object.prototype.hasOwnProperty() 來判斷某個(gè)key是否是這個(gè)對象本身的屬性，從原型鏈繼承的屬性不包括在內(nèi)。

新增一個(gè)數(shù)據(jù)

Map 可以使用 set() 操作：

map.set(key, value)
// 當(dāng)傳入的 key 已經(jīng)存在的時(shí)候，Map 會覆蓋之前的值

Object 新增一個(gè)屬性可以使用：

obj['key'] = value;
obj.key = value;
// object也會覆蓋

刪除數(shù)據(jù)

在 Object 中沒有原生的刪除方法，我們可以使用如下方式：

delete obj.id;
// 下面這種做法效率更高
obj.id = undefined

需要注意的是，使用 delete 會真正的將屬性從對象中刪除，而使用賦值 undefined 的方式，僅僅是值變成了 undefined。屬性仍然在對象上，也就意味著 在使用 for … in… 去遍歷的時(shí)候，仍然會訪問到該屬性。

Map 有原生的 delete 方法來刪除元素：

var isDeleteSucceeded = map.delete(1);
console.log(isDeleteSucceeded ); // true
// 全部刪除
map.clear();

獲取size

Map 自身有 size 屬性，可以自己維持 size 的變化。
Object 則需要借助 Object.keys() 來計(jì)算

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

Iterating

Map 自身支持迭代，Object 不支持。

如何確定一個(gè)類型是不是支持迭代呢？ 可以使用以下方法：

console.log(typeof obj[Symbol.iterator]); // undefined
console.log(typeof map[Symbol.iterator]); // function

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

雖然Map 在很多時(shí)候優(yōu)于 Object，但是作為 JavaScript 最基礎(chǔ)的數(shù)據(jù)類型，還是有很多情景更適合使用 Object。

• 當(dāng)所要存儲的是簡單數(shù)據(jù)類型，并且 key 都為字符串或者整數(shù)或者 Symbol 的時(shí)候，優(yōu)先使用 Object ，因?yàn)镺bject可以使用 字符變量 的方式創(chuàng)建，更加高效。
• 當(dāng)需要在單獨(dú)的邏輯中訪問屬性或者元素的時(shí)候，應(yīng)該使用 Object，例如：

var obj = {
id: 1,
name: “It's Me!”,
print: function(){
return Object Id: ${this.id}, with Name: ${this.name};
}
}
console.log(obj.print());//Object Id: 1, with Name: It's Me.
// 以上操作不能用 Map 實(shí)現(xiàn)

• JSON 直接支持 Object，但不支持 Map
• Map 是純粹的 hash， 而 Object 還存在一些其他內(nèi)在邏輯，所以在執(zhí)行 delete 的時(shí)候會有性能問題。所以寫入刪除密集的情況應(yīng)該使用 Map。
• Map 會按照插入順序保持元素的順序，而Object做不到。
• Map 在存儲大量元素的時(shí)候性能表現(xiàn)更好，特別是在代碼執(zhí)行時(shí)不能確定 key 的類型的情況。

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

最新評論