JavaScript 中比Object更强大的Map

博主网站：www.dzyong.top

微信公众号：《前端筱园》

Map对象保存键值对，并且能够记住键的原始插入顺序，最为主要的一点是可以以任意值作为键。

语法

new Map([iterable])

iterable：可以是一个数组或者其他iterable对象，其元素为键值对（如:[[1: 'a'],[2: 'b']]）。每个键值对都会被添加到Map中。当为null时会被当做undefined。

let map = new Map([[ 1, 'one' ],[ 2, 'two' ]])//map  {1 => "one", 2 => "two"}

键是否相等

键的比较是基于 sameValueZero算法

NaN是与NaN相等的（虽然NaN ！== NaN），其他的值根据 === 运算符的结果进行判断是否相等

在目前的ECMAScript规范中，-0与+0被认为是相等的。

Objects 和 maps 的比较

相同点：都允许按键存取一个值、删除键、检测一个键是否绑定了值。

区别：

Object的键只能是字符串或者Symbols，但是Map可以是任意值，包括函数、对象、基本类型。
Map中的键值是有序的，他会按照我们插入的顺序返回，而Object中是无序的。
可通过Map.size属性返回键值对的个数，而Object的个数只能手动计算。
Map可直接进行迭代，而Object的迭代需要先获取它的键值组。
Object有自己的原型，自己设置的键名可能会与原型链上的键名产生冲突。ES5开始可以使用map = Object.create(null)来创建一个没有原型的对象。
Map在涉及频繁增删键值对的场景下性能更佳。

属性

Map.length

值为0，可通过Map.size()计算一个Map中的键值对数量

Map.prototype

表示Map构造器的原型。允许添加属性从而应用于所有的Map对象。

Map实例

所有的Map对象都会继承Map.prototype。

属性

Map.prototype.size

返回Map对象的键/值对的数量。

Map.prototype.constructor

回一个函数，它创建了实例的原型。默认是Map函数。

方法

Map.prototype.clear()

移除Map对象的所有键/值对。

Map.prototype.delete(key)

如果 Map 对象中存在该元素，则移除它并返回 true；否则如果该元素不存在则返回 false。随后调用 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] 数组。

示例

使用Map 对象

let myMap = new Map();

let keyObj = {};
let keyFunc = function() {};
let 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 () {}

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

拓展

复制或合并Maps

这是一个浅复制过程，数据本身并没有被克隆。

let original = new Map([
  [1, 'one']
]);
let clone = new Map(original);
console.log(clone.get(1)); // one
console.log(original === clone); // false.

合并两个Map对象时，如果有重复的键值，则后面的会覆盖前面的。

拓展运算符的本质是将Map转为数组。

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

let second = new Map([
  [1, 'uno'],
  [2, 'dos']
]);
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对象同数组进行合并时，如果有重复的键值，则后面的会覆盖前面的。

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

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

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