详解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