ES6新特性-Map

ES6新特性-Map

Map

Map是一种新的集合类型，是一种键值对存储机制。

一、基本API

const m = new Map;
const m1 = new Map([
    ['key1', 'value1'],
    ['key2', 'value2'],
    ['key3', 'value3']
]);

使用new关键字和Map构造函数可以创建一个空映射。

初始化实例时可以给Map构造函数中传入一个可迭代对象，一个需要包含键值对的数组。

1、size

通过size属性，可以获取到Map中键值对的数量。

const m2 = new Map([
    ['key1', 'value1'],
    ['key2', 'value2'],
    ['key3', 'value3'],
]);
console.log(m2.size);  // 3

2、set()、get()与has()

set()方法可以添加键值对，get()方法可以获取到值，ha()方法可以查询该Map中有无该值。

const m3 = new Map([
    ['key1', 'value1'],
    ['key2', 'value2'],
    ['key3', 'value3']
]);
console.log(m3.size)  // 3
console.log(m3.get('key1'))  // 'value1'
console.log(m3.get('key4'))  // undefined
console.log(m3.set('key4', 'value4'));
console.log(m3.has('key4'))  // true
console.log(m3.has('key5'))  // false

3、clear()与delete()

clear（）方法可以清除这个映射中的所有键值对；

delete（）方法可以删除一个键值对。

4、关于迭代

• 可以用entries（）方法来迭代map

  const m = new Map([
      ['key1', 'value1'],
      ['key2', 'value2'],
      ['key3', 'value3'],
  ]);
  console.log(m.entries())
  // ['key1', 'value1']
  // ['key2', 'value2']
  // ['key3', 'value3']
  
  

• 可以用[…]扩展运算符

  const m = new Map([
      ['key1', 'value1'],
      ['key2', 'value2'],
      ['key3', 'value3'],
  ]);
  console.log([...m]);
  // [['key1', 'value1'], ['key1', 'value1'], ['key1', 'value1'],]
  
  

• key(),value()方法

  const m = new Map([
      ['key1', 'value1'],
      ['key2', 'value2'],
      ['key3', 'value3'],
  ]);
  for(let paris of m.key()) {
      console.log(paris) // key1 key2 key3
  }
  for(let paris of m.value()) {
      console.log(paris) // value1 value2 value3
  }
  

二、Map与Object 的区别

1、Object中的键只能使用数值、字符串和符号，但是Map中的键可以使用任意类型的值（函数也可以）。

const m = new Map();

const functionKey = function() {};
const symbolKey = Symbol();
const objectKey = Object();

m.set(functionKey, "functionValue");
m.set(symbolKey, "symbolValue");
m.set(objectKey, "objectValue");

m.get(functionKey)  // "functionValue"
m.get(symbolKey)  // "symbolValue"
m.get(objectKey)  // "objectValue"

2、内存占用方面

Object与Map在工程级实现的不同浏览器间存在明显的差异，不同浏览器之间的情况不同，给定相同大小的内存空间，Map大约可以比Object多存约50%的键值对。

3、插入性能与查找速度

Object和Map在代码涉及大量插入操作时，Map性能更佳、在涉及大量的查找操作时，Object更优一点。

4、删除性能

Object删除某个属性时，需要设置为null或者undefined，Map的delete（）操作更快一些。