箭頭操作符  http://blog.csdn.net/exialym/article/category/6170433

如果你會C#或者Java，你肯定知道lambda表示式，ES6中新增的箭頭操作符=>便有異曲同工之妙。它簡化了函式的書寫。操作符左邊為輸入的引數，而右邊則是進行的操作以及返回的值Inputs=>outputs。

我們知道在JS中回撥是經常的事，而一般回撥又以匿名函式的形式出現，每次都需要寫一個function，甚是繁瑣。當引入箭頭操作符後可以方便地寫回調了。請看下面的例子。

var array = [1, 2, 3];
//傳統寫法
array.forEach(function
 
(v, i, a) {
    console.log(v);
});
//ES6
array.forEach(v = > console.log(v));

大家可以開啟文章開頭提到的traceur線上程式碼轉譯頁面輸入程式碼來檢視效果。

類的支援

ES6中添加了對類的支援，引入了class關鍵字（其實class在JavaScript中一直是保留字，目的就是考慮到可能在以後的新版本中會用到，現在終於派上用場了）。JS本身就是面向物件的，ES6中提供的類實際上只是JS原型模式的包裝。現在提供原生的class支援後，物件的建立，繼承更加直觀了，並且父類方法的呼叫，例項化，靜態方法和建構函式等概念都更加形象化。
下面程式碼展示了類在ES6中的使用。再次囉嗦一句，你可以將程式碼貼到

//類的定義
class Animal {
    //ES6中新型構造器
    constructor(name) {
        this.name = name;
    }
    //例項方法
    sayName() {
        console.log('My name is '+this.name);
    }
}
//類的繼承
class Programmer extends Animal {
    constructor(name) {
        //直接呼叫父類構造器進行初始化
        super(name);
    }
    program() {
        console.log("I'm coding..."
 
);
    }
}
//測試我們的類
var animal=new Animal('dummy'),
wayou=new Programmer('wayou');
animal.sayName();//輸出 ‘My name is dummy’
wayou.sayName();//輸出 ‘My name is wayou’
wayou.program();//輸出 ‘I'm coding...’

增強的物件字面量

物件字面量被增強了，寫法更加簡潔與靈活，同時在定義物件的時候能夠做的事情更多了。具體表現在：

可以在物件字面量裡面定義原型
定義方法可以不用function關鍵字
直接呼叫父類方法
這樣一來，物件字面量與前面提到的類概念更加吻合，在編寫面向物件的JavaScript時更加輕鬆方便了。

//通過物件字面量建立物件
var human = {
    breathe() {
        console.log('breathing...');
    }
};
var worker = {
    __proto__: human, //設定此物件的原型為human,相當於繼承human
    company: 'freelancer',
    work() {
        console.log('working...');
    }
};
human.breathe();//輸出 ‘breathing...’
//呼叫繼承來的breathe方法
worker.breathe();//輸出 ‘breathing...’

字串模板

字串模板相對簡單易懂些。ES6中允許使用反引號 ` 來建立字串，此種方法建立的字串裡面可以包含由美元符號加花括號包裹的變數${vraible}。如果你使用過像C#等後端強型別語言的話，對此功能應該不會陌生。

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

解構

自動解析陣列或物件中的值。比如若一個函式要返回多個值，常規的做法是返回一個物件，將每個值做為這個物件的屬性返回。但在ES6中，利用解構這一特性，可以直接返回一個數組，然後陣列中的值會自動被解析到對應接收該值的變數中。

var [x,y]=getVal(),//函式返回值的解構
    [name,,age]=['wayou','male','secrect'];//陣列解構

function getVal() {
    return [ 1, 2 ];
}

console.log('x:'+x+', y:'+y);//輸出：x:1, y:2 
console.log('name:'+name+', age:'+age);//輸出： name:wayou, age:secrect

引數預設值，不定引數，拓展引數

預設引數值

現在可以在定義函式的時候指定引數的預設值了，而不用像以前那樣通過邏輯或操作符來達到目的了。

function sayHello(name){
    //傳統的指定預設引數的方式
    var name=name||'dude';
    console.log('Hello '+name);
}
//運用ES6的預設引數
function sayHello2(name='dude'){
    console.log(`Hello ${name}`);
}
sayHello();//輸出：Hello dude
sayHello('Wayou');//輸出：Hello Wayou
sayHello2();//輸出：Hello dude
sayHello2('Wayou');//輸出：Hello Wayou

不定引數

不定引數是在函式中使用命名引數同時接收不定數量的未命名引數。這只是一種語法糖，在以前的JavaScript程式碼中我們可以通過arguments變數來達到這一目的。不定引數的格式是三個句點後跟代表所有不定引數的變數名。比如下面這個例子中，…x代表了所有傳入add函式的引數。

//將所有引數相加的函式
function add(...x){
    return x.reduce((m,n)=>m+n);
}
//傳遞任意個數的引數
console.log(add(1,2,3));//輸出：6
console.log(add(1,2,3,4,5));//輸出：15

拓展引數

拓展引數則是另一種形式的語法糖，它允許傳遞陣列或者類陣列直接做為函式的引數而不用通過apply。

var people=['Wayou','John','Sherlock'];
//sayHello函式本來接收三個單獨的引數人妖，人二和人三
function sayHello(people1,people2,people3){
    console.log(`Hello ${people1},${people2},${people3}`);
}
//但是我們將一個數組以拓展引數的形式傳遞，它能很好地對映到每個單獨的引數
sayHello(...people);//輸出：Hello Wayou,John,Sherlock 

//而在以前，如果需要傳遞陣列當引數，我們需要使用函式的apply方法
sayHello.apply(null,people);//輸出：Hello Wayou,John,Sherlock

let與const 關鍵字

可以把let看成var，只是它定義的變數被限定在了特定範圍內才能使用，而離開這個範圍則無效。const則很直觀，用來定義常量，即無法被更改值的變數。

for (let i=0;i<2;i++)console.log(i);//輸出: 0,1
console.log(i);//輸出：undefined,嚴格模式下會報錯

for of 值遍歷

我們都知道for in 迴圈用於遍歷陣列，類陣列或物件，ES6中新引入的for of迴圈功能相似，不同的是每次迴圈它提供的不是序號而是值。

var someArray = [ "a", "b", "c" ];

for (v of someArray) {
    console.log(v);//輸出 a,b,c
}

注意，此功能google traceur並未實現，所以無法模擬除錯,下面有些功能也是如此

iterator, generator

這一部分的內容有點生澀，詳情可以參見這裡。以下是些基本概念。
iterator:它是這麼一個物件，擁有一個next方法，這個方法返回一個物件{done,value}，這個物件包含兩個屬性，一個布林型別的done和包含任意值的value
iterable: 這是這麼一個物件，擁有一個obj[@@iterator]方法，這個方法返回一個iterator
generator: 它是一種特殊的iterator。反的next方法可以接收一個引數並且返回值取決與它的建構函式（generator function）。generator同時擁有一個throw方法
generator 函式: 即generator的建構函式。此函式內可以使用yield關鍵字。在yield出現的地方可以通過generator的next或throw方法向外界傳遞值。generator 函式是通過function*來宣告的
yield 關鍵字：它可以暫停函式的執行，隨後可以再進進入函式繼續執行

模組

在ES6標準中，JavaScript原生支援module了。這種將JS程式碼分割成不同功能的小塊進行模組化的概念是在一些三方規範中流行起來的，比如CommonJS和AMD模式。
將不同功能的程式碼分別寫在不同檔案中，各模組只需匯出公共介面部分，然後通過模組的匯入的方式可以在其他地方使用。下面的例子來自tutsplus:

// point.js
module "point" {
    export class Point {
        constructor (x, y) {
            public x = x;
            public y = y;
        }
    }
}

// myapp.js
//宣告引用的模組
module point from "/point.js";
//這裡可以看出，儘管聲明瞭引用的模組，還是可以通過指定需要的部分進行匯入
import Point from "point";

var origin = new Point(0, 0);
console.log(origin);

Map，Set 和 WeakMap，WeakSet

這些是新加的集合型別，提供了更加方便的獲取屬性值的方法，不用像以前一樣用hasOwnProperty來檢查某個屬性是屬於原型鏈上的呢還是當前物件的。同時，在進行屬性值新增與獲取時有專門的get，set 方法。
下方程式碼來自es6feature

// Sets
var s = new Set();
s.add("hello").add("goodbye").add("hello");
s.size === 2;
s.has("hello") === true;

// Maps
var m = new Map();
m.set("hello", 42);
m.set(s, 34);
m.get(s) == 34;

有時候我們會把物件作為一個物件的鍵用來存放屬性值，普通集合型別比如簡單物件會阻止垃圾回收器對這些作為屬性鍵存在的物件的回收，有造成記憶體洩漏的危險。而WeakMap,WeakSet則更加安全些，這些作為屬性鍵的物件如果沒有別的變數在引用它們，則會被回收釋放掉，具體還看下面的例子。
正文程式碼來自es6feature

// Weak Maps
var wm = new WeakMap();
wm.set(s, { extra: 42 });
wm.size === undefined

// Weak Sets
var ws = new WeakSet();
ws.add({ data: 42 });//因為新增到ws的這個臨時物件沒有其他變數引用它，所以ws不會儲存它的值，也就是說這次新增其實沒有意思

Proxies

Proxy可以監聽物件身上發生了什麼事情，並在這些事情發生後執行一些相應的操作。一下子讓我們對一個物件有了很強的追蹤能力，同時在資料繫結方面也很有用處。
以下例子借用自這裡。

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

上面程式碼我已加了註釋，這裡進一步解釋。對於處理程式，是在被偵聽的物件身上發生了相應事件之後，處理程式裡面的方法就會被呼叫，上面例子中我們設定了set的處理函式，表明，如果我們偵聽的物件的屬性被更改，也就是被set了，那這個處理程式就會被呼叫，同時通過引數能夠得知是哪個屬性被更改，更改為了什麼值。

Symbols

我們知道物件其實是鍵值對的集合，而鍵通常來說是字串。而現在除了字串外，我們還可以用symbol這種值來做為物件的鍵。Symbol是一種基本型別，像數字，字串還有布林一樣，它不是一個物件。Symbol 通過呼叫symbol函式產生，它接收一個可選的名字引數，該函式返回的symbol是唯一的。之後就可以用這個返回值做為物件的鍵了。Symbol還可以用來建立私有屬性，外部無法直接訪問由symbol做為鍵的屬性值。
以下例子來自es6features

(function() {

  // 建立symbol
  var key = Symbol("key");

  function MyClass(privateData) {
    this[key] = privateData;
  }

  MyClass.prototype = {
    doStuff: function() {
      ... this[key] ...
    }
  };

})();

var c = new MyClass("hello")
c["key"] === undefined//無法訪問該屬性，因為是私有的

Math，Number，String，Object 的新API

對Math,Number,String還有Object等添加了許多新的API。下面程式碼同樣來自es6features，對這些新API進行了簡單展示。

Number.EPSILON
Number.isInteger(Infinity) // false
Number.isNaN("NaN") // false

Math.acosh(3) // 1.762747174039086
Math.hypot(3, 4) // 5
Math.imul(Math.pow(2, 32) - 1, Math.pow(2, 32) - 2) // 2

"abcde".contains("cd") // true
"abc".repeat(3) // "abcabcabc"

Array.from(document.querySelectorAll('*')) // Returns a real Array
Array.of(1, 2, 3) // Similar to new Array(...), but without special one-arg behavior
[0, 0, 0].fill(7, 1) // [0,7,7]
[1,2,3].findIndex(x => x == 2) // 1
["a", "b", "c"].entries() // iterator [0, "a"], [1,"b"], [2,"c"]
["a", "b", "c"].keys() // iterator 0, 1, 2
["a", "b", "c"].values() // iterator "a", "b", "c"

Object.assign(Point, { origin: new Point(0,0) })

Promises

Promises是處理非同步操作的一種模式，之前在很多三方庫中有實現，比如jQuery的deferred 物件。當你發起一個非同步請求，並綁定了.when(), .done()等事件處理程式時，其實就是在應用promise模式。

//建立promise
var promise = new Promise(function(resolve, reject) {
    // 進行一些非同步或耗時操作
    if ( /*如果成功 */ ) {
        resolve("Stuff worked!");
    } else {
        reject(Error("It broke"));
    }
});
//繫結處理程式
promise.then(function(result) {
    //promise成功的話會執行這裡
    console.log(result); // "Stuff worked!"
}, function(err) {
    //promise失敗會執行這裡
    console.log(err); // Error: "It broke"
});

總結

總結就是一句話，前後端差異越來越小了。