详解es6的新对象,map

Map对象是什么?

我的理解为:

• 它和对象一样,由键值对组成;
• 它的键可以是任意的数据类型,包括对象/数组等;
• 它的属性是有序的,遵循FIFO原则(可以简单理解为先进先出,后进后出)

如何使用Map

1.使用构造函数,创建一个map

语法 : const 变量名 = new Map([ [键1, 值1],[键2, 值2],... ])

const map1 = new Map([ ['a', 111], ['b', 222] ])

可以在控制台看到一个map,以及Map的原型对象上有哪些东西

可以看到,有size属性,还有很多方法,而且Map的原型链最上层依旧是Object

2.现在,我们来了解这些成员

属性

Map的属性目前似乎只有size一个,它代表了map实例的成员个数,类似于Array的length属性

操作map对象属性的方法

• set( key, val ) ===> 添加成员

• get( key )    ===> 通过键值查找特定的数值并返回

• has(key)     ===> 判断Map对象中是否有Key所对应的值，并返回一个布尔值

• delete(key)     ===> 通过键值从Map中移除对应的数据

• clear()    ===> 将这个Map中的所有元素删除

const map1 = new Map([ ['a', 111], ['b', 222] ])
console.log(map1.get('a')) // 打印111

console.log(map1.has('c')) // 打印false

map1.set('d', 555)
console.log(map1.get('d')) // 打印555

map1.delete('a')
console.log(map1.has('a')) // 打印false

map1.clear()
console.log(map1)  // 可以自己试试

遍历方法

1. keys()：返回键名的迭代器

const keys = map1.keys()
console.log(keys)

可以看到返回了一个迭代器生成器 MapIterator,我们可以通过for of 来遍历keys

2. values()：返回键值的迭代器

// 遍历方法和keys一样
const values = map1.values()
console.log(values)

一样用for of 来遍历values

3. entries()：返回键值对的迭代器

const entries = map1.entries()
console.log(entries)

一样用for of 来遍历entries,并且可以使用解构语法

// 将键值单独解构出来
for (let [key, value] of map.entries()) { console.log(key, value) }

4. forEach()：使用迭代器遍历每个成员

map1.forEach(item => console.log(item))

3. 最后,我们了解一下Map与其他数据结构的互换

const obj = {}
const map = new Map(['a', 111], ['b', 222])

// 转换为对象
for(let [key,value] of map) {
  obj[key] = value
}
console.log(obj) // {a:111, b: 222}

// 转换为JSON
// 需要先将map转为对象,再转为JSON字符串
JSON.parse(obj)