前言

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的新語法特性讓前端和後端的差異越來越小了，這是一個新時代的開始，我們必須要了解這些新的前沿知識，才能跟上時代的步伐。

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