ES6的新特性

ES6的新特性

ES6相对于ES5新增了很多特性，使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

let const关键字

• let关键字，用来声明变量，且其变量在同一作用域下不能再次声明，且不会存在var变量提升的问题，但是会出现暂时性死区（在声明前调用），其特性在于变量生成块级作用域。
• const关键字，用来声明常量，声明时必须初始化，如果声明的是基本类型，则其值不可更改。如果声明的是引用类型，则该引用类型内的属性值可变，但不能对常量重新赋值，原因在于，const定义引用类型，其栈中保存的是数据源的地址，即为指针，指向堆中真实存放数据的地址。const规定其栈中的值不对，即指针不对，对指针指向内存中的更改不做限制。

解构赋值

解构赋值的作用就是他的语义化，解构：对数组、对象解开构造。赋值：将数组、对象解开后，将内部的值赋给对应的变量。

var arr = [1,2,3]
var obj = {
  a:1,
  b:2,
  c:3
}
//es5中
var first = arr[0]	//1
var second = arr[1]	//2
var third = arr[2]	//3

let a = obj.a	//1
let b = obj.b	//2
//es6中
var [first,second,third] = arr	//1,2,3
let {a,b} = obj	//1,2

模板字符串

模板字符串， 通过反引号 (`)来代替字符串中（’ 或 "） 模板字符串可以简化模板和数据的拼接过程。

//ES5
DOM.append('<div>'+ content + '</div>')
//ES6
DOM.append(`<div>${content}<div>`)

箭头函数

ES6新增了一个箭头函数，箭头函数相对于Function函数写法更简洁，其this指正永远指向其父级作用域且不被call、apply等修改。因为其this指针的特性，其不能用来定义构造函数。其获取多个参数，通过…rest来获取参数数组，其与arguments不同，arguments是一个参数对象，其也是通过解构赋值衍生而来的。
示例为定义一个方法，来输出参数之和。ES6中通过…rest来获取参数，其为数组。

//ES5
function fun(){
  var sum = 0
  for(var key in arguments){
    sum+=arguments[key]
  }
  console.log(sum); 
}
//ES6
var fun = (...rest)=>{
  var sum = 0
  rest.forEach(item=>{
    sum+=item
  })
  console.log(sum)
}
fun(1,2,3)

箭头函数的this指向，永远指向其父级作用域，示例中person1的call是function函数，其this指向调用他的对象，person1调用他，故this指向person1，其call输出‘张三’，示例中person1的call为箭头函数，其this指向指向其父级作用域，即window，window中没有name，返回undefined。箭头函数通过call、apply、bind改变不了this指向，function函数可以通过call、apply、bind修改this指向。

var person1 = {
  name :  '张三',
  call : function(){
    console.log(this.name);	
  }
}
var person2 = {
  name :  '李四',
  call : ()=>{
    console.log(this.name);	
  }
}
person1.call()	//张三
person2.call()	//undefined
person1.call.call(person2)	//李四
person2.call.call(person1)	//undefined

Promise

ES6新增了Promise对象来处理异步函数，其拥有三种状态：pending（运行中）、fulfilled（完成）、rejected（失败），同一时间只能存在一个状态。其结果有两种，完成和失败，且其得出结果后不可回溯。

• 初始化时，状态为：pending
• 当调用resolve(成功)，状态：pengding=>fulfilled
• 当调用reject(失败)，状态：pending=>rejected

Promise对象可通过then来接受成功的信息，通过catch来接受失败返回的信息。

let p = new Promise((reslove,reject)=>{
  if(成功条件){
    reslove('成功')
  }else{
    reject('失败')
  }
})
p.then(res=>{ //如果成功则调用then,接受reslove传的参数
  console.log(res); //成功
}).catch(rej=>{ //如果失败则调用catch,接受reject传的参数
  console.log(rej); //失败
})

Symbol

Symbol是Es6新增的一个基本数据类型，之前的基本数据类型有：number、string、null、undefined、boolean，Symbol是个对象，其具有唯一性，这种类型的对象永不相等，即始创建的时候传入相同的值，可以解决属性名冲突的问题，做为标记，且不能通过new定义。

var a = Symbol(1)
var b = Symbol(1)
console.log(a==b);	//false

Set、Map

Set是一个集合对象，其保存的值具有唯一性，在添加元素时，会事先检测元素是否存在于集合中，如果存在则不进行添加操作，不存在则将其添加至集合对象中。Set对象的原型对象中存在内置函数，可对Set对象进行相应的操作，详细请看MDN对于Set的解析。

let set = new Set()
let arr = [1,1,2,2,2,5]
arr.forEach(item=>{
  set.add(item)
})
console.log(set);//{1,2,5}

Map是一个键值对集合的对象，其健与值可以是任何类型的值，且其值是有序的，当对其进行遍历时，会根据插入顺序遍历，Map通过for of来遍历。声明的map对象都会继承Map的原型对象，拥有其操作函数，详细请看MDN对于Map的解析。

let map = new Map()
map.set('key','string类型的值')
map.set({},'obj类型的值')
map.set(function fun(){},'function类型的值')
map.set(()=>{},'箭头函数类型的值')
//通过键获取相应值
console.log(map.get('key'));
//通过for of遍历map
for(var [key, value] of map){
  console.log(value);//string类型的值  obj类型的值  function类型的值  箭头函数类型的值
}
//通过forEach遍历
map.forEach(item=>{
  console.log(item);//string类型的值  obj类型的值  function类型的值  箭头函数类型的值
})

Class

由于es5中没有对类的具体声明，且类又是面向对象编程必须的，所以在es6中引入Class，在es5通过function函数来声明类，在es6中可通过Class来声明。

//es5
function es5(name,age){
  this.name = name
  this.age = age
  this.eat = function(){
    console.log(this.name+'eat');
  }
}
//es6
class es6{
  constructor(name,age){
    this.name = name
    this.age = age
  }
  eat(){
    console.log(this.name + 'eat');
  }
}
var xiaoming = new es5('小明',12)
var xiaohong = new es6('小红',18)
xiaoming.eat()	//小明eat
xiaohong.eat()  //小红eat

Module

将一个js文件当作一个模块，通过暴露、引用来实现模块之间的连接，在es6之前，模块化通过CommonJS和AMD，前者用于服务器，后者用于浏览器。
Module命令有： export(暴露,可以有多个) 、import(引入) 、export default(引入，只可以有一个)
通过export方式导出，在导入时要加{ }，export default则不需要。

总结

es6的新增特性都是由于es5在开发中遇到的问题进行更新优化，只为了JavaScript运用的更为灵活。
如有错误，望请海涵并指正。写文章主要是为了加固知识，整理知识体系。