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