總結常見的ES6新語法特性。

前言

ES6是即將到來的新版本JavaScript語言的標準，他給咱們帶來了更「甜」的語法糖（一種語法，使得語言更容易理解和更具備可讀性，也讓咱們編寫代碼更加簡單快捷），如箭頭函數（=>）、class等等。用一句話來講就是：

ES6給咱們提供了許多的新語法和代碼特性來提升javascript的體驗

不過遺憾的是，如今尚未瀏覽器可以很好的支持es6語法，點這裏查看瀏覽器支持狀況，因此咱們在開發中還須要用babel進行轉換爲CommonJS這種模塊化標準的語法。

由於下面我會講到一些es6新特性的例子，若是想要運行試試效果的話，能夠點這裏去測試es6的代碼。

經常使用es6特性

而後我下面簡單的介紹一些很經常使用的語法特性，若是想完整的瞭解ES6，我推薦你們點這裏

定義函數

咱們先來看一個基本的新特性，在javascript中，定義函數須要關鍵字function，可是在es6中，還有更先進的寫法，咱們來看：

es6寫法：

var human = {
    breathe(name) {   //不須要function也能定義breathe函數。
        console.log(name + ' is breathing...');
    }
};
human.breathe('jarson');   //輸出 ‘jarson is breathing...’

 

轉成js代碼：

var human = {
    breathe: function(name) {
        console.log(name + 'is breathing...');
    }
};
human.breathe('jarson');

 

很神奇對不對？這樣一對比，就能夠看出es6的寫法讓人簡單易懂。彆着急，下面還有更神奇的。

建立類

咱們知道，javascript不像java是面向對象編程的語言，而只能夠說是基於對象編程的語言。因此在js中，咱們一般都是用function和prototype來模擬類這個概念。

可是如今有了es6，咱們能夠像java那樣‘明目張膽’的建立一個類了：

class Human {
    constructor(name) {
        this.name = name;
    }
    breathe() {
        console.log(this.name + " is breathing");
    }
} 
var man = new Human("jarson");
man.breathe();    //jarson is breathing

 

上面代碼轉爲js格式：

function Human(name) {
    this.name = name;
    this.breathe = function() {
        console.log(this.name + ' is breathing');
    }
}
var man = new Human('jarson');
man.breathe();    //jarson is breathing

 

因此咱們看到，咱們能夠像java那樣語義化的去建立一個類。另外，js中的繼承父類，須要用prototype來實現。那麼在es6中，又有什麼新的方法來實現類的繼承呢？繼續看：

假如咱們要建立一個Man類繼承上面的Human類，es6代碼：

class Man extends Human {
    constructor(name, sex) {
        super(name);
        this.sex = sex;
    }
    info(){
        console.log(this.name + 'is ' + this.sex);
    }
}
var xx = new Man('jarson', 'boy');
xx.breathe();   //jarson is breathing
xx.info();   //arsonis boy

 

代碼很簡單，不做贅述，可使用文章裏提到的在線工具去試試效果就能明白了。須要注意的是：super()是父類的構造函數。

模塊

在ES6標準中，javascript原生支持module了。將不一樣功能的代碼分別寫在不一樣文件中，各模塊只需導出(export)公共接口部分，而後在須要使用的地方經過模塊的導入(import)就能夠了。下面繼續看例子：

內聯導出

ES6模塊裏的對象可在建立它們的聲明中直接導出，一個模塊中可無數次使用export。

先看模塊文件app.js：

export class Human{
    constructor(name) {
        this.name = name;
    }
    breathe() {
        console.log(this.name + " is breathing");
    } 
}  
export function run(){  
    console.log('i am runing'); 
}
function eat() {
    console.log('i am eating');
}

 

例子中的模塊導出了兩個對象：Human類和run函數， eat函數沒有導出，則仍爲此模塊私有，不能被其餘文件使用。

導出一組對象

另外，其實若是須要導出的對象不少的時候，咱們能夠在最後統一導出一組對象。

更改app.js文件：

class Human{
    constructor(name) {
        this.name = name;
    }
    breathe() {
        console.log(this.name + " is breathing");
    } 
}  
function run(){  
    console.log('i am runing'); 
}
function eat() {
    console.log('i am eating');
}
export {Human, run}; 

 

這樣的寫法功能和上面同樣，並且也很明顯，在最後能夠清晰的看到導出了哪些對象。

Default導出

導出時使用關鍵字default，可將對象標註爲default對象導出。default關鍵字在每個模塊中只能使用一次。它既能夠用於內聯導出，也能夠用於一組對象導出聲明中。

查看導出default對象的語法：

...   //建立類、函數等等
export default {  //把Human類和run函數標註爲default對象導出。
    Human,  
    run  
}; 

 

無對象導入

若是模塊包含一些邏輯要執行，且不會導出任何對象，此類對象也能夠被導入到另外一模塊中，導入以後只執行邏輯。如：

import './module1.js'; 
導入默認對象

 

使用Default導出方式導出對象，該對象在import聲明中將直接被分配給某個引用，以下例中的「app」。

import app from './module1.js'; 

 

上面例子中，默認./module1.js文件只導出了一個對象；若導出了一組對象，則應該在導入聲明中一一列出這些對象，如：

import {Human, run} from './app.js'

 

let與const

在我看來，在es6新特性中，在定義變量的時候通通使用let來代替var就行了，const則很直觀，用來定義常量，即沒法被更改值的變量。

for (let i=0;i<2;i++) {
    console.log(i);  //輸出: 0,1
}

箭頭函數

ES6中新增的箭頭操做符=>簡化了函數的書寫。操做符左邊爲輸入的參數，而右邊則是進行的操做以及返回的值，這樣的寫法能夠爲咱們減小大量的代碼，看下面的實例：

let arr = [6, 8, 10, 20, 15, 9];
arr.forEach((item, i) => console.log(item, i));
let newArr = arr.filter((item) => (item<10));
console.log(newArr); //[6, 8, 9];

上面的(item, i)就是參數，後面的console.log(item, i)就是回到函數要執行的操做邏輯。

上面代碼轉爲js格式：

var arr = [6, 8, 10, 20, 15, 9];
arr.forEach(function(item, i) {
    return console.log(item, i);
});
var newArr = arr.filter(function(item) {
    return (item < 10);
});
console.log(newArr);

字符串模版

ES6中容許使用反引號 ` 來建立字符串，此種方法建立的字符串裏面能夠包含由美圓符號加花括號包裹的變量${vraible}。看一下實例就會明白了：

//產生一個隨機數
let num = Math.random();
//將這個數字輸出到console
console.log(`your num is ${num}`);

解構

若一個函數要返回多個值，常規的作法是返回一個對象，將每一個值作爲這個對象的屬性返回。在ES6中，利用解構這一特性，能夠直接返回一個數組，而後數組中的值會自動被解析到對應接收該值的變量中。咱們來看例子：

function getVal() {
    return [1, 2];
}
var [x,y] = getVal(); //函數返回值的解構
console.log('x:'+x+', y:'+y);   //輸出：x:1, y:2 

默認參數

如今能夠在定義函數的時候指定參數的默認值了，而不用像之前那樣經過邏輯或操做符來達到目的了。

function sayHello(name){
    var name=name||'tom';   //傳統的指定默認參數的方式
    console.log('Hello '+name);
}

 //運用ES6的默認參數

function sayHello2(name='tom'){  //若是沒有傳這個參數，纔會有默認值，
    console.log(`Hello ${name}`);
}
sayHello();//輸出：Hello tom
sayHello('jarson');//輸出：Hello jarson
sayHello2();//輸出：Hello tom
sayHello2('jarson');//輸出：Hello jarson

注意： sayHello2(name='tom')這裏的等號，意思是沒有傳這個參數，則設置默認值，而不是給參數賦值的意思。

Proxy

Proxy能夠監聽對象身上發生了什麼事情，並在這些事情發生後執行一些相應的操做。一會兒讓咱們對一個對象有了很強的追蹤能力，同時在數據綁定方面也頗有用處。

//定義被監聽的目標對象
let engineer = { name: 'Joe Sixpack', salary: 50 };
//定義處理程序
let interceptor = {
    set(receiver, property, value) {
        console.log(property, 'is changed to', value);
        receiver[property] = value;
    }
};
//建立代理以進行偵聽
engineer = new Proxy(engineer, interceptor);
//作一些改動來觸發代理
engineer.salary = 70;//控制檯輸出：salary is changed to 70

對於處理程序，是在被監聽的對象身上發生了相應事件以後，處理程序裏面的方法就會被調用。

結語

總的來講，雖然支持es6的狀況到目前還不是很樂觀，但es6的新語法特性讓前端和後端的差別愈來愈小了，這是一個新時代的開始，咱們必需要了解這些新的前沿知識，才能跟上時代的步伐。