Map?對象保存鍵值對。任何值(對象或者原始值) 都可以作為一個鍵或一個值。

語法

new Map([iterable])

參數

iterable

Iterable 可以是一個數組或者其他?iterable 對象，其元素或為鍵值對，或為兩個元素的數組。?每個鍵值對都會添加到新的 Map。null 會被當做?undefined。

描述

一個Map對象以插入順序迭代其元素?—?一個 ?for...of?循環為每次迭代返回一個[key，value]數組。

?

鍵的相等(Key equality)

鍵的比較是基于?"same-value" 算法：NaN 是與?NaN 相同的（雖然?NaN !== NaN），剩下所有其它的值是根據 === 運算符的結果判斷是否相等。在?ECMAScript 6 草稿的早期版本中視?-0?和?+0?為不相同的?(雖然?-0 === +0)，在近期版本里這個問題已經被更正，且在?Gecko 29 (Firefox 29 / Thunderbird 29 / SeaMonkey 2.26) (bug?952870) 和近期的 nightly Chrome?版本這個已經更改了。

Objects 和 maps 的比較

Object?和?Map類似的一點是,它們都允許你按鍵存取一個值,都可以刪除鍵,還可以檢測一個鍵是否綁定了值.因此,一直以來,我們都把對象當成Map來使用,不過,現在有了Map,下面的區別解釋了為什么使用Map更好點.

• 一個對象通常都有自己的原型,所以一個對象總有一個"prototype"鍵。不過，從 ES5 開始可以使用?map = Object.create(null)來創建一個沒有原型的對象。
• 一個對象的鍵只能是字符串或者?Symbols，但一個?Map 的鍵可以是任意值。
• 你可以通過size屬性很容易地得到一個Map的鍵值對個數，而對象的鍵值對個數只能手動確認。

但是這并不意味著你可以隨意使用?Map，對象仍舊是最常用的。Map?實例只適合用于集合(collections)，你應當考慮修改你原來的代碼——先前使用對象來對付集合的地方。對象應該用其字段和方法來作為記錄的。
如果你不確定要使用哪個，請思考下面的問題：

• 在運行之前 key 是否是未知的，是否需要動態地查詢 key?呢？
• 是否所有的值都是統一類型，這些值可以互換么？
• 是否需要不是字符串類型的 key ？
• 鍵值對經常增加或者刪除么？
• 是否有任意個且非常容易改變的鍵值對?
• 這個集合可以遍歷么(Is the collection iterated)?

假如以上全是“是”的話，那么你需要用?Map?來保存這個集。?相反，你有固定數目的鍵值對，獨立操作它們，區分它們的用法，那么你需要的是對象。

屬性

Map.length

屬性 length 的值為 0 。

get Map[@@species]

本構造函數用于創建派生對象。

Map.prototype

表示?Map?構造器的原型。?允許添加屬性從而應用于所有的?Map?對象。

Map?實例

所有的?Map?對象實例都會繼承 Map.prototype。

屬性

?

Map.prototype.constructor

返回一個函數，它創建了實例的原型。默認是Map函數。

Map.prototype.size

返回Map對象的鍵/值對的數量。

?

方法

?

Map.prototype.clear()

移除Map對象的所有鍵/值對 。

Map.prototype.delete(key)

移除任何與鍵相關聯的值，并且返回該值，該值在之前會被Map.prototype.has(key)返回為true。之后再調用Map.prototype.has(key)會返回false。

Map.prototype.entries()

返回一個新的 Iterator 對象，它按插入順序包含了Map對象中每個元素的 [key, value] 數組。

Map.prototype.forEach(callbackFn[, thisArg])

按插入順序，為 Map對象里的每一鍵值對調用一次callbackFn函數。如果為forEach提供了thisArg，它將在每次回調中作為this值。

Map.prototype.get(key)

返回鍵對應的值，如果不存在，則返回undefined。

Map.prototype.has(key)

返回一個布爾值，表示Map實例是否包含鍵對應的值。

Map.prototype.keys()

返回一個新的 Iterator對象， 它按插入順序包含了Map對象中每個元素的鍵 。

Map.prototype.set(key, value)

設置Map對象中鍵的值。返回該Map對象。

Map.prototype.values()

返回一個新的Iterator對象，它按插入順序包含了Map對象中每個元素的值 。

Map.prototype[@@iterator]()

返回一個新的Iterator對象，它按插入順序包含了Map對象中每個元素的 [key, value] 數組。

?

示例

使用映射對象

var myMap = new Map(); var keyObj = {}, keyFunc = function () {}, keyString = "a string"; // 添加鍵 myMap.set(keyString, "和鍵'a string'關聯的值"); myMap.set(keyObj, "和鍵keyObj關聯的值"); myMap.set(keyFunc, "和鍵keyFunc關聯的值"); myMap.size; // 3 // 讀取值 myMap.get(keyString); // "和鍵'a string'關聯的值" myMap.get(keyObj); // "和鍵keyObj關聯的值" myMap.get(keyFunc); // "和鍵keyFunc關聯的值" myMap.get("a string"); // "和鍵'a string'關聯的值" // 因為keyString === 'a string' myMap.get({}); // undefined, 因為keyObj !== {} myMap.get(function() {}) // undefined, 因為keyFunc !== function () {}

將NaN作為映射的鍵

NaN 也可以作為Map對象的鍵. 雖然 NaN 和任何值甚至和自己都不相等(NaN !== NaN 返回true), 但下面的例子表明, 兩個NaN作為Map的鍵來說是沒有區別的:

var myMap = new Map(); myMap.set(NaN, "not a number"); myMap.get(NaN); // "not a number" var otherNaN = Number("foo"); myMap.get(otherNaN); // "not a number"

使用for..of方法迭代映射

映射也可以使用for..of循環來實現迭代：

var myMap = new Map(); myMap.set(0, "zero"); myMap.set(1, "one"); for (var [key, value] of myMap) { console.log(key + " = " + value); } // 將會顯示兩個log。一個是"0 = zero"另一個是"1 = one" for (var key of myMap.keys()) { console.log(key); } // 將會顯示兩個log。 一個是 "0" 另一個是 "1" for (var value of myMap.values()) { console.log(value); } // 將會顯示兩個log。 一個是 "zero" 另一個是 "one" for (var [key, value] of myMap.entries()) { console.log(key + " = " + value); } // 將會顯示兩個log。 一個是 "0 = zero" 另一個是 "1 = one"

使用forEach()方法迭代映射

映射也可以通過forEach()方法迭代：

myMap.forEach(function(value, key) { console.log(key + " = " + value); }, myMap) // 將會顯示兩個logs。 一個是 "0 = zero" 另一個是 "1 = one"

映射與數組對象的關系

var kvArray = [["key1", "value1"], ["key2", "value2"]];// 使用映射對象常規的構造函數將一個二維鍵值對數組對象轉換成一個映射關系 var myMap = new Map(kvArray);myMap.get("key1"); // 返回值為 "value1"// 使用展開運算符將一個映射關系轉換成一個二維鍵值對數組對象 console.log(uneval([...myMap])); // 將會向您顯示和kvArray相同的數組// 或者使用展開運算符作用在鍵或者值的迭代器上，進而得到只含有鍵或者值得數組 console.log(uneval([...myMap.keys()])); // 輸出 ["key1", "key2"]

規范

SpecificationStatusComment

ECMAScript 2015 (6th Edition, ECMA-262) Map	Standard	Initial definition.
ECMAScript Latest Draft (ECMA-262) Map	Living Standard	?

瀏覽器兼容情況

?

• Desktop
• Mobile

FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari

Basic support	38 [1]	12	13 (13)	11	25	7.1
Constructor argument: new Map(iterable)	38	12	13 (13)	未實現	25	9
iterable	38	12	17 (17)	未實現	25	7.1
Map.clear()	31 38	12	19 (19)	11	25	7.1
Map.keys(), Map.values(), Map.entries()	37 38	12	20 (20)	未實現	25	7.1
Map.forEach()	36 38	12	25 (25)	11	25	7.1
Key equality for -0 and 0	34 38	12	29 (29)	未實現	25	9
Constructor argument: new Map(null)	(Yes)	12	37 (37)	11	(Yes)	9
Monkey-patched set() in Constructor	(Yes)	12	37 (37)	未實現	(Yes)	9
Map[@@species]	51	13	41 (41)	未實現	38	10
Map() without new throws	(Yes)	12	42 (42)	11	(Yes)	9

?

[1] Starting with Chrome 31，the feature was available behind a preference. In chrome://flags, activate the entry “Enable Experimental JavaScript”.

轉載于:https://www.cnblogs.com/h2zZhou/p/7477544.html

總結

以上是生活随笔為你收集整理的Map与object的区别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。