Map

一、认识

Map 是ES6 新增的一种映射集合类型，为JavaScript带来了真正的键/值对存储机制。Map保存键值对，并且能够记住键的原始插入顺序。任何值(对象或者原始值) 都可以作为一个键或一个值。

二、语法

2.1 new Map()

const map = new Map();
console.log(map); // Map(0) {size: 0}

2.2 new Map([])

const map = new Map([[1,'一大大'],[2,'二大大']]);
console.log(map); // Map(2) {1 => '一大大', 2 => '二大大'}

三、属性

3.1 map.size

const map = new Map();
map.set(1,'一大大').set(2,'二大大');
console.log(map.size); // 2

四、方法

4.1 map.set()

map.set() 新增键值对，并且返回Map实例,因此**map实例.set()**可以链式调用。

语法

单个使用
const map = new Map();
map.set(1,'一大大');
map.set(2,'二大大');
console.log(map); // Map(2) {1 => '一大大', 2 => '二大大'}

链式调用
const map = new Map();
map.set(1,'一大大').set(2,'二大大');
console.log(map); // Map(2) {1 => '一大大', 2 => '二大大'}

4.2 map.get()

语法

const map = new Map();
map.set(1,'一大大').set(2,'二大大');
console.log(map.get(1)); // 一大大

4.3 map.has()

语法

const map = new Map();
map.set(1,'一大大').set(2,'二大大');
console.log(map.has(1)); // true

4.4 map.delete()

map.delete() 删除Map实例中的指定元素，返回一个布尔值，表示集合中是否存在要删除的值。

语法

const map = new Map();
map.set(1,'一大大').set(2,'二大大');
console.log(map); // Map(2) {1 => '一大大', 2 => '二大大'}
console.log(map.delete(1)); // true
console.log(map); // Map(1) {2 => '二大大'}

4.5 map.clear()

语法

const map = new Map();
map.set(1,'一大大').set(2,'二大大');
console.log(map); // Map(2) {1 => '一大大', 2 => '二大大'}
console.log(map.clear()); // undefined
console.log(map); // Map(0) {size: 0}

4.6 map.keys()

语法

const map = new Map();
map.set(1, "一大大").set(2, "二大大");

for(let key of map.keys()){
  console.log(key); // 1 2
}

4.7 map.values()

语法

const map = new Map();
map.set(1, "一大大").set(2, "二大大");

for(let value of map.values()){
  console.log(value); // 一大大  二大大
}

4.8 map.entries()

语法

const map = new Map();
map.set(1, "一大大").set(2, "二大大");

for(let keyValue of map.entries()){
  console.log(keyValue); // [1, '一大大']  [2, '二大大']
}

4.9 map.forEach()

语法

const map = new Map();
map.set(1, "一大大").set(2, "二大大");

map.forEach((value,key)=>{
  console.log(value,key);// 一大大 1     二大大 2
});

五、数组转换

六、相等算法

Map中的键总是唯一的，所以需要判断两个键是否相等。Map 的键的比较基于sameValueZero算法:

sameValueZero算法
function sameValueZero(x, y) {
  return (
    x === y ||
    (typeof x === "number" &&
      typeof y === "number" &&
      isNaN(x) &&
      isNaN(y))
  );
}

对于NaN而言，Map会直接认为NaN 是与 NaN 相等的（虽然 NaN !== NaN）

const map = new Map();
map.set(NaN,'nan').set(NaN,'nan');
console.log(map); // Map(1) {NaN => 'nan'}
console.log(NaN === NaN); // false

剩下所有其它的值是根据 === 运算符的结果判断是否相等

const map = new Map();
map.set(null,'null').set(undefined,'undefined');
console.log(map); // Map(2) {null => 'null', undefined => 'undefined'}
console.log(null === undefined); // false

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

七、精益求精

7.1 Map Vs Object

Map:

Map 键可以使用任何JavaScript数据类型，其映射的值也毫无限制
Map 迭代遍历严格按照键值对的插入顺序

Object:

Object 键只能使用数值、字符串和Symbol，其映射的值毫无限制

Object 迭代遍历顺序查看遍历顺序

const obj = {
  id: 1,
  8: "八",
  4: "四",
  type: "对象",
  data: "数据",
};

const result = Object.keys(obj);
console.log(result); // ['4', '8', 'id', 'type', 'data']

内村占用方面: Object和Map的工程级实现在不同浏览器之间有着明显的差异，但存储单个键/值对所占的内存数量都会随键的数量线性增加。批量添加或者删除键/值对取决于各个浏览器对该类型内存分配的工程实现。不同浏览器的情况不同，但给定固定大小的内存，Map大约可以比Object多存储50%的键值对。
插入性能: 向Object和Map中插入新键/值对的消耗大致相当，不过插入Map在所有浏览器中一般会稍微快一点。对这两个类型来说，插入速度并不会随着键/值对的数量而线性增加。如果代码涉及大量插入操作，那么显然Map的性能更佳。
查找速度: 与插入不同，从大型 Object 和 Map 中查找键/值对的性能差异极小，但如果只包含少量键/值对，则 Object 有时候速度更快。在把Object 当成数组使用的情况下（比如使用连续整数作为属性），浏览器引擎可以进行优化，在内存中使用更高效的布局。这对 Map 来说是不可能的。对这两个类型而言，查找速度不会随着键/值对数量增加而线性增加。如果代码涉及大量查找操作，那么某些情况下可能选择 Object 更好一些。
删除性能: 使用 delete 删除 Object 属性的性能一直以来饱受诟病，目前在很多浏览器中仍然如此。为此，出现了一些伪删除对象属性的操作，包括把属性值设置为 undefined 或 null 。但很多时候，这都是一种讨厌的或不适宜的折中。而对大多数浏览器引擎来说， Map 的delete() 操作都比插入和查找更快。如果代码涉及大量删除操作，那么毫无疑问应该选择 Map 。

一、认识​

二、语法​

2.1 new Map()​

2.2 new Map([])​

三、属性​

3.1 map.size​

四、方法​

4.1 map.set()​

4.2 map.get()​

4.3 map.has()​

4.4 map.delete()​

4.5 map.clear()​

4.6 map.keys()​

4.7 map.values()​

4.8 map.entries()​

4.9 map.forEach()​

五、数组转换​

六、相等算法​

七、精益求精​

7.1 Map Vs Object​