ES6 新特性梳理系列丨新的数据结构-Map

ES6 新特性梳理系列文章将在本号持续发布，一起查漏补缺学个痛快！若您有遇到其它相关问题，非常欢迎在评论中留言讨论，达到帮助更多人的目的。若感本文对您有所帮助请点个赞吧！

---

JavaScript 与 ECMAScript

JavaScript 诞生于1995年，设计者是就职于 Netscape 公司的工程师 Brendan Eich。它是一门仅用10天就完成设计的编程语言，但至今为止已对业界保持26年的影响，且势头愈发强劲

1996年 Netscape 将 JavaScript 提交给ECMA，希望它可以成为“标准化一个通用的、跨平台的、中立于厂商的脚本语言的语法和语义标准”，1997年 ECMA 确定将 JavaScript 作为浏览器脚本语言的标准，并为之重命名为 ECMAScript，所以通常来讲我们将 ECMAScript 视为 JavaScript 的标准，而 JavaScript 则是 ECMAScript 的实现及扩展

1997年-1999年连续发布了ES1-ES3发布，2000年开始酝酿新版本的升级内容，中间因标准委员会意见未能达成一致，只做了部分功能的小范围升级及支持，于2009年12月发布了过渡版 ECMAScript 5.0，2011年6月发布 ECMAScript 5.1 并成为 ISO 国际标准

2013年3月 ECMAScript 6 草案冻结，2013年12月 ECMAScript 草案发布，2015年6月 ECMAScript 6 正式通过，成为新的国际标准。ES6 泛指自2015年升级为 ECMAScript 6.0 后的所有子版本，如：ES2015-ES2020，等同于ES6.0-ES6.5，这是 JavaScript 走向企业级编程语言的强势升级

不断升级的标准与实现，对于开发效率及产品质量起到强有力的支撑，接下来我们开始梳理ES6的新特性吧！

---

什么是 Map

与之前讲的 Set 一样，Map 也是 ES6 新增的一个数据结构。在对象中，我们只能使用字符串来表示键名，这样给键值对的表现形式带来了很大的限制。Map 就是为了解决这个限制，可以使用各种类型的值（包括对象）当做键。

也就是说，对象结构为我们提供了“字符串--值”的形式，Map 结构为我们提供了“值--值”的形式。Map 使键值对的表现形式更加完善。所以在日常使用中，应该尽量使用 Map 来表现。

---

创建一个 Map

通过new Mao()，可以创建一个 Map 对象

var m = new Map()
typeof m // Object
console.log(s)  // [Object Map]

Map() 函数也可以接收一个数组作为参数

var m = new Map([
  ['name','张三'],
  ['age','18']
)
console.log(...m) 
// Array ["name", "张三"] Array ["age", "18"]

关于 ... 扩展运算符参考本系列  ES6 新特性梳理系列丨变量的解构赋值

---

Map 的属性和方法

• size 属性

  size 属性返回 Map 结构的成员总数，就是键值对的个数

var m = new Map([
  ['name','张三'],
  ['age','18']
)
console.log(m.size) // 2

• set(key,value) 方法

  set 方法是用来设置 map 中的键值对的，然后返回整个 Map 结构。当要设置的键已经有值时，会覆盖当前值，否则重新生成新值。

var m = new Map()
let a = m.set('name','zhangsan')
let fn = function(){
  console.log('键值是一个函数')
}
let b = m.set('fn',fn)


// m,a,b 指向同一个map对象
console.log(...m) 
// Array ["name", "zhangsan"] Array ["fn", function(){
//  console.log('键值是一个函数')
// }]
console.log(...a)
// Array ["name", "zhangsan"] Array ["fn", function(){
//  console.log('键值是一个函数')
// }]
console.log(...b)
// Array ["name", "zhangsan"] Array ["fn", function(){
//  console.log('键值是一个函数')
// }]

• get(key) 方法

  get 方法用来读取指定 map 中对应的键值，如果找不到对应的键，就返回 undefined

var m = new Map();
let a = m.set('name','zhangsan')
m.get('name')  
// zhangsan

• has(key) 方法

  has 方法用来判断指定 map 中是否存在指定的键，存在返回 true，不存在返回 false

var m = new Map();
let a = m.set('name','zhangsan')
m.has('name')  
// true
m.has('age')  
// false

• delete(key)方法

  delete 方法用来删除指定的 map 中某一个键，删除成功返回 true，否则返回 false

var m = new Map();
m.set('name','zhangsan')
m.set('age','18')
m.has('name')  
// true
m.delete('name')  
m.has('name')  
// false
m.has('age')
// true
console.log(m.delete('hobby'))
// false

• clear（） 方法

  clear 方法用来清空 map，没有返回值

var m = new Map();
m.set('name','zhangsan')
m.set('age','18')
m.has('name')  
// true  
m.has('age')
// true
m.clear()
console.log(m.size)
// 0
‍

---

Map 的遍历

• keys(): 返回键名的遍历器

• values() : 返回键值的遍历器

• entries() : 返回键值对的遍历器

• forEach() : 返回Map的所有成员

var m = new Map([
  ['name','张三'],
  ['age',18]
])
for(let i of m.keys()){
  console.log(i)
}
// name
// age 


for(let i of m.values()){
  console.log(i)
}
// 张三
// 18


for(let i of m.entries()){
  console.log(i)
}
// ['name':'张三']
// ['age':18]


for(let [key,value] of m){
  console.log(key,value)
}
// "name" "张三"
// "age"  18


// 与扩展运算符结合
console.log(...m.keys())
// "name" "age"
console.log(...m.values())
// "张三" 18
console.log(...m.entries())
// ["name","张三"]  ["age",18]

---

与其他结构的互相转换

• map 转为数组     ---  通过扩展运算符

let m = new Map()
m.set('name','zhangsan')
m.set('age',18)
console.log([...m])
// [ ["name","zhangsan"],["age",18] ]

‍

• 数组转为 map     ---  通过map构造函数传参

let arr = []
let m = new Map([
  ['name','张三'],
  ['age',18]
])
console.log([...m])
// [ ["name","zhangsan"],["age",18] ]

• map 转为对象     ---  前提是 map 所有的键都是字符串

let m = new Map([
  ['name','张三'],
  ['age',18]
])
let newObj = Object.create(null)
for(let [key,value] of m){
  newObj[key] = value
}
console.log(newObj) 
// {name:'张三'，age:18}

• 对象转为 Map

let newObj = {name:'张三',age:18}
let m = new Map()
for(let k = Object.keys(newObj)){
  m.set(k,newObj(k))
}
console.log(...m) 
// [ ["name","张三"],["age",18] ]

• Map 转为 JSON

// 情况一， 键名都是字符串：先转为对象，在转为 JSON
let m = new Map([
  ['name','张三'],
  ['age',18]
])
let newObj = Object.create(null)
for(let [key,value] of m){
  newObj[key] = value
}
console.log(JSON.stringify(newObj))
// "{"name":"张三","age":18}


// 情况一， 键名不止是字符串：直接转为数组 JSON
let m = new Map([
  [true,'张三'],    // 键是Boolean类型
  [false,18]
])
console.log([...m])
// [ [true, "张三"], [false, 18]]
console.log(JSON.stringify(m))
// "[[true,"张三"],[false,18]]"

• JSON 转为 Map

// 情况一， 键名都是字符串：先转为对象，在转为 Map
let json = '{"name":'zhangsan',"name":18}'
let obj = JSON.parse(json)
console.log(obj)
// { name: 'zhangsan', name: 18 }
let m = new Map()
for(let k = Object.keys(obj)){
  m.set(k,newObj(k))
}
console.log(...m) 
// [ ["name","张三"],["age",18] ]

---

ES6 新特性梳理系列文章将在本号持续发布，一起查漏补缺学个痛快！若您有遇到其它相关问题，非常欢迎在评论中留言讨论，达到帮助更多人的目的。若感本文对您有所帮助请点个赞吧！

叶阳辉

HFun 前端攻城狮

往期精彩：

• ES6 新特性梳理系列丨Var + Let + Const 的区别与作用域

• ES6 新特性梳理系列丨变量的解构赋值

• ES6 新特性梳理系列丨Symbol - 新的数据类型

• ES6 新特性梳理系列丨新的数据结构-Set