详解ES6

首先，还是介绍一下ES6，ES6全称为ECMAScript,由于目前的ES6是2015年发布的，所以又称为ECMAScript 2015.在越来越多程序员开始使用ES6在自己的项目中的今天，即使ES6的兼容性还有待提高，我们也要对其了解

本文主要从let, const, class, extends, super, arrow functions, template string, destructuring, default, rest arguments几个特性来介绍ES6

1.const

大家都知道，js中声明变量用var，事实上，js并不存在常量之说，当然也并非不可实现，比如借用对象来创建一个不可变属性的对象来近似伪造常量，当取对象时，覆盖属性值来实现，然而，这到底显得多余又复杂。

ES6用const解决了这种情况，其使用方法

const a =1; 

const声明一个常量；并且不可覆盖

2.let

js中还有个问题，也总是让人觉得恼火，就是作用域问题，首先我们都知道一个函数为一个作用域，在函数体内定义的变量，在整个函数中生效，并不在函数外生效。但if语句,for循环内的变量不存在作用域问题，存在于上下文，尤其当函数声明提升和变量提升加作用域遇到一起的时候，要注意的问题还是很多的，举个例子

up();
var foo = 1;
var bar = 2;
function  up(){
 console.log("foo is",foo);
    if(foo == 1) {
        var x = 5;
    }
    if(bar == 2) {
        console.log(x);
    }
   var foo = 'bar';
 console.log("foo is",foo);
}
console.log("foo is",foo);

此例中需要考虑的问题很多，每个console值都不同，这无疑对我们开发造成了一定的麻烦，稍有不注意。就不知从何改起

因此，ES6新增了let,let为块级作用域。也就是说，一个判断语句均为一个块级作用域，在此之外在引用此let,会报错

其使用方法： let x=2;

举例：

function chunk() {
    if(foo) {
        let x = 5;
    }
    if(bar) {
        console.log(x); //error
    }
}

3.class,extends,super

ES5中有几个令人头疼的属性，事实上，js实际上并没有“类“的说法，由于过于不方便，我们用原型，原型链的形式添加了类似可以实现继承的方法。实际上这种写法由于和大多数后端语言java c#等编程语言相差甚远并且语法复杂，this指向混乱，这让很多习惯写后端语言的大神们并不习惯，终于在ES6里提供了更接近传统语言的写入引用了CLASS。

class Parents {
    constructor(){
        this.type = 'parents'
    }
    says(say){
        console.log(this.type + ' says ' + say)
    }
}

let parent = new Parents ()
parent .says('hello') //parent says hello

class Kid extends Parents {
    constructor(){
        super()
        this.type = 'kid'
    }
}

let kid = new Kid()

从上面的代码可以看出这种“类”的形式已经很接近传统意义了。首先定义一个类名为Parent的类，constructor(){}为构造方法，在构造方法内定义的方法与属性都是实例本身的，而constructor外的方法与属性是大家共享的。

两个类之间可以用extends来实现继承，通过extends来继承可以直接继承其要继承的类中（Parents）所有属性和方法。

supper();指父类的实例，在新建实例时子类必须在constructor(){}中调用super();由于子类没有自己的this对象，只能通过继承父类的this来进行操作，如若不调用super(),则子类无this对象。

4.箭头函数(arrow functions)  =>

所谓箭头函数的形式为“=>”

原来写函数：

function a(){
  a=a++;
}

现在写函数

a()=>{a=a++}

此外。箭头函数还有一个非常大的作用，就是this指向问题，大家可能都遇见过一个函数内,定时器的this是指向全局的，不是函数本身，要解决这个问题我们需要把this赋给一个变量，再用变量指代this 或是将定时器的函数绑定this方可，如果用的是=>就不会有这种问题出现。箭头函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

5.字符串模版（template string)

ES6出现之前我们如果想用类似于jquery的框架把html模版添加到页面中是要用一堆++来连接的，这样不仅麻烦，而且非常容易造成xss攻击

之前

$("#div").append(
  "a:" + a + "</br> " +
  "b, " +
  "<em>" + c +
  "</em>d!"
);

ES6给了我们一种新的写法

$("#div").append(`
a:${a}</br>
b<em>$(c)</em>d!
`)

用反引号`来标识起始，用$()来引用变量

6.default、rest

在ES6中如果想给一个函数，当函数没传参或忘记传参时给其一个默认值

function aa(type = 'aa')｛
  type=type+"是个默认值"
console.log(type)
｝

rest的用法：

function aa(...types){
  console.log(types)
}

aa('a','b','c','d')

此例中传入多个参数，内容以循环的形式输出，并且输出结果为数组

本文参考地址：http://www.jianshu.com/p/ebfeb687eb70