Map 對象保存鍵值對，并且能夠記住鍵的原始插入順序冷蚂。任何值(對象或者原始值) 都可以作為一個鍵或一個值。

描述

一個Map對象在迭代時會根據(jù)對象中元素的插入順序來進(jìn)行 — 一個 for...of 循環(huán)在每次迭代后會返回一個形式為[key汛闸，value]的數(shù)組

鍵的相等(Key equality)

• 鍵的比較是基于 [sameValueZero] 算法：
• NaN 是與 NaN 相等的（雖然 NaN !== NaN）蝙茶，剩下所有其它的值是根據(jù) === 運(yùn)算符的結(jié)果判斷是否相等。
• 在目前的ECMAScript規(guī)范中诸老，-0和+0被認(rèn)為是相等的隆夯，盡管這在早期的草案中并不是這樣。有關(guān)詳細(xì)信息别伏，請參閱瀏覽器兼容性 表中的“Value equality for -0 and 0”蹄衷。

Objects 和 maps 的比較

Objects 和 Maps 類似的是，它們都允許你按鍵存取一個值厘肮、刪除鍵愧口、檢測一個鍵是否綁定了值。因此（并且也沒有其他內(nèi)建的替代方式了）過去我們一直都把對象當(dāng)成 Maps 使用轴脐。不過 Maps 和 Objects 有一些重要的區(qū)別调卑，在下列情況里使用 Map 會是更好的選擇：

構(gòu)造函數(shù)

Map()
創(chuàng)建 Map 對象

屬性

Map.length
屬性 length 的值為 0 祈搜。
想要計算一個Map 中的條目數(shù)量较店， 使用 Map.prototype.size

get Map[@@species]
本構(gòu)造函數(shù)用于創(chuàng)建派生對象。

Map.prototype (en-US)
表示 Map 構(gòu)造器的原型夭问。 允許添加屬性從而應(yīng)用于所有的 Map 對象泽西。

Map 實(shí)例

所有的 Map 對象實(shí)例都會繼承 Map.prototype (en-US)。

屬性

{{page('zh-CN/Web/JavaScript/Reference/Global_Objects/Map/prototype','屬性')}}

方法

{{page('zh-CN/Web/JavaScript/Reference/Global_Objects/Map/prototype','方法')}}

示例

使用 Map 對象

let myMap = new Map();

let keyObj = {};
let keyFunc = function() {};
let keyString = 'a string';

// 添加鍵
myMap.set(keyString, "和鍵'a string'關(guān)聯(lián)的值");
myMap.set(keyObj, "和鍵keyObj關(guān)聯(lián)的值");
myMap.set(keyFunc, "和鍵keyFunc關(guān)聯(lián)的值");

myMap.size; // 3

// 讀取值
myMap.get(keyString);    // "和鍵'a string'關(guān)聯(lián)的值"
myMap.get(keyObj);       // "和鍵keyObj關(guān)聯(lián)的值"
myMap.get(keyFunc);      // "和鍵keyFunc關(guān)聯(lián)的值"

myMap.get('a string');   // "和鍵'a string'關(guān)聯(lián)的值"
                         // 因為keyString === 'a string'
myMap.get({});           // undefined, 因為keyObj !== {}
myMap.get(function() {}); // undefined, 因為keyFunc !== function () {}

將 NaN 作為 Map 的鍵

NaN 也可以作為Map對象的鍵缰趋。雖然 NaN 和任何值甚至和自己都不相等(NaN !== NaN 返回true)捧杉，但下面的例子表明，NaN作為Map的鍵來說是沒有區(qū)別的:

let myMap = new Map();
myMap.set(NaN, "not a number");

myMap.get(NaN); // "not a number"

let otherNaN = Number("foo");
myMap.get(otherNaN); // "not a number"

使用 for..of 方法迭代 Map

Map可以使用for..of循環(huán)來實(shí)現(xiàn)迭代：

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

for (let key of myMap.keys()) {
  console.log(key);
}
// 將會顯示兩個log味抖。 一個是 "0" 另一個是 "1"

for (let value of myMap.values()) {
  console.log(value);
}
// 將會顯示兩個log。 一個是 "zero" 另一個是 "one"

for (let [key, value] of myMap.entries()) {
  console.log(key + " = " + value);
}
// 將會顯示兩個log灰粮。 一個是 "0 = zero" 另一個是 "1 = one"

使用 forEach() 方法迭代 Map

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

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

Map 與數(shù)組的關(guān)系

let kvArray = [["key1", "value1"], ["key2", "value2"]];

// 使用常規(guī)的Map構(gòu)造函數(shù)可以將一個二維鍵值對數(shù)組轉(zhuǎn)換成一個Map對象
let myMap = new Map(kvArray);

myMap.get("key1"); // 返回值為 "value1"

// 使用Array.from函數(shù)可以將一個Map對象轉(zhuǎn)換成一個二維鍵值對數(shù)組
console.log(Array.from(myMap)); // 輸出和kvArray相同的數(shù)組

// 更簡潔的方法來做如上同樣的事情，使用展開運(yùn)算符
console.log([...myMap]);

// 或者在鍵或者值的迭代器上使用Array.from粘舟，進(jìn)而得到只含有鍵或者值的數(shù)組
console.log(Array.from(myMap.keys())); // 輸出 ["key1", "key2"]

復(fù)制或合并 Maps

Map 能像數(shù)組一樣被復(fù)制：

let original = new Map([
  [1, 'one']
]);

let clone = new Map(original);

console.log(clone.get(1)); // one
console.log(original === clone); // false. 淺比較 不為同一個對象的引用
重要：請記住熔脂，數(shù)據(jù)本身未被克隆。

Map對象間可以進(jìn)行合并柑肴，但是會保持鍵的唯一性霞揉。

let first = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
]);

let second = new Map([
  [1, 'uno'],
  [2, 'dos']
]);

// 合并兩個Map對象時，如果有重復(fù)的鍵值晰骑，則后面的會覆蓋前面的适秩。
// 展開運(yùn)算符本質(zhì)上是將Map對象轉(zhuǎn)換成數(shù)組。
let merged = new Map([...first, ...second]);

console.log(merged.get(1)); // uno
console.log(merged.get(2)); // dos
console.log(merged.get(3)); // three

Map對象也能與數(shù)組合并：

  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
]);

let second = new Map([
  [1, 'uno'],
  [2, 'dos']
]);

// Map對象同數(shù)組進(jìn)行合并時，如果有重復(fù)的鍵值秽荞，則后面的會覆蓋前面的骤公。
let merged = new Map([...first, ...second, [1, 'eins']]);

console.log(merged.get(1)); // eins
console.log(merged.get(2)); // dos
console.log(merged.get(3)); // three

使用說明

請注意！為Map設(shè)置對象屬性也是可以的扬跋，但是可能引起大量的混亂阶捆。

所以，你還是可以這樣做...

let wrongMap = new Map()
wrongMap['bla'] = 'blaa'
wrongMap['bla2'] = 'blaaa2'

console.log(wrongMap)  // Map { bla: 'blaa', bla2: 'blaaa2' }

...但是钦听，這樣做的話趁猴，它的行為會不符合預(yù)期:

wrongMap.has('bla')    // false
wrongMap.delete('bla') // false
console.log(wrongMap)  // Map { bla: 'blaa', bla2: 'blaaa2' }

無論如何，和正確用法比較起來彪见，幾乎沒有什么不同:

let myMap = new Map()
myMap.set('bla','blaa')
myMap.set('bla2','blaa2')
console.log(myMap)  // Map { 'bla' => 'blaa', 'bla2' => 'blaa2' }

myMap.has('bla')    // true
myMap.delete('bla') // true
console.log(myMap)  // Map { 'bla2' => 'blaa2' }

本文參考資料：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map