创建一个空Map

const map = new Map()
console.log(map)

上面代码可以看到Map 采用new 关键字进行创建

再看看控制台的打印：

可以看到 有个Entrites 属性 里面为空， size属性 值为0.

创建Entrites 有值， size 不为0的Map

const map = new Map(
  [
    ['name', '小明'],
    ['age', 18]
  ]
)
console.log(map)

可以看到Map 接收一个二位数组， 二位数组中的第一个值将作为键值， 第二个值做为value。可以通过get 方法来获取值，

map 增删改查

查（get）

console.log(map.get('name'))

以上代码会在控制台打印出小明。

**增（set）**可以采用set 方法进行添加：

map.set('sex', '男')
console.log(map)

可以看到map 中多了sex =》 男

**删（delete）**可以使用delete 方法进行删除

map.set('sex', '男')
map.delete('age')
console.log(map)

可以看到age 被删除了

map 有哪些特点呢？

1. 键值唯一

const map = new Map(
  [
    ['name', '小明'],
    ['age', 18]
  ]
)
map.set('sex', '男')
map.set('sex', '男')
console.log(map)

上面的代码我们添加了两次性别， 但是打印出来只看见一个

2. 键值可以是任意类型

const map = new Map(
  [
    [ { a: 1}, '对象'],
    [ function () {},  '函数'],
    [ [1, 2, 3],  '数组'],
    [ new Date(),  '时间'],
    [1, '数字'],
    [Symbol(), 1],
    [NaN, 1],
    [undefined , 1],
    [null , 1]
  ]
)
console.log(map)

可以看到上面的代码都正常的输出了结果。

3. map是可迭代的， 是有序的，按照new Map 和set的时候顺序排序，从上面的例子都可以看出来。

4. map 的内容是放在Entrites 下面的，和原型prototype 是隔离的

Map 和Object 的区别：

1. 内容装在Entries 上， Object 是原型上

2. 键值任意类型， Object 键类型只能是String 或者Symbol

3. size, Object 没有size

4. 可迭代, Object 不肯迭代，也就是不能拿for of

5. 增删改查方法不同， 底层有优化

6. map 不支持序列化和解析， Object 支持序列化和解析，也就是JSON.stringify 和JSON.parse

其他方法介绍：

clear 清空map

const map = new Map(
  [
    ['name', '小明'],
    ['age', 18 ]
  ]
)
map.clear()
console.log(map)

结果：

has 判断键值存不存在

const map = new Map(
  [
    ['name', '小明'],
    ['age', 18 ]
  ]
)
console.log(map.has('age'))
console.log(map.has('hello'))

结果：

entries 方法 返回一个可迭代的Entrites

结果：

可以调用这个方法做处理之后给map 做序列化

const map = new Map(
  [
    ['name', '小明'],
    ['age', 18 ]
  ]
)
function replacer(key, value) {
  if(value instanceof Map) {
    return {
      dataType: 'Map',
      value: Array.from(value.entries()), 
    };
  } else {
    return value;
  }
}
const res = JSON.stringify(map, replacer)
console.log(res)

结果：

values 方法和 keys 方法差不多，不做过多介绍。

forEach 方法遍历：

const map = new Map(
  [
    ['name', '小明'],
    ['age', 18 ]
  ]
)
map.forEach((item, key, a ) => {
  console.log(item, key,a)
})

结果：

可以看到 forEach 回调有三个参数， 第一个是value, 第二个是值， 第三个是map 本身。

Map 为什么要有增删改查的方法， 而不是用点去操作

1. 因为map 的内容是放在Entrites 下面的, 不是在原型上面