摘要：從到有兩種新的方式來聲明變量用于聲明塊級作用于變量用于聲明常量，其值不能被改變。更多信息箭頭函數(shù)處理多個(gè)返回值一些函數(shù)或方法能通過數(shù)組或?qū)ο蠓祷囟鄠€(gè)值。在中，總是需要?jiǎng)?chuàng)建中間變量來訪問返回值。內(nèi)置了模塊語法，但并沒有得到引擎良好支持。

這里有三種簡單地方式用于ES6編程：

Web瀏覽器：使用Babel REPL,可以將ES6編譯成ES5的平臺，并且并不需要安裝。

命令行：使用babel-node，可以執(zhí)行ES6的Node.js版本（會在內(nèi)部編譯es5）。需要通過npm安裝。

各種js引擎：根據(jù)ES6語法兼容表，找出被支持的ES6功能。

對于第一點(diǎn)和第二點(diǎn)，這有更多細(xì)節(jié)。

1.1 Babel REPL

Babel REPL主要有四個(gè)部分：

1、左上角包含es6源代碼
2、左下角可以查看es6中的語法錯(cuò)誤
3、右上角是es6被編譯成es5的源代碼
4、右下角是通過console.log()的輸出結(jié)果

1.2 babel-node

babel-node可以通過npm安裝：

$ npm install --global babel

跟node一樣，可以命令開啟REPL交互：

$ babel-node

一旦開啟REPL，就可以去執(zhí)行ES6代碼：

> let arr = [1, 2, 3];
> arr.map(x => x * x)
[ 1, 4, 9 ]

注意：babel-node目前不支持多行輸入
Babel官網(wǎng)上有管多關(guān)于Babel CLI的工具。

es6有兩種新的方式來聲明變量：
1、let用于聲明塊級作用于變量
2、const用于聲明常量，其值不能被改變。

let或const可以用來替代var聲明變量，但是不能盲目使用，因?yàn)椴煌淖饔糜驎淖兇a的行為。例如：

    var x = 3;
    function func(randomize) {
        if (randomize) {
            var x = Math.random(); // (A) scope: whole function
            return x;
        }
        return x; // accesses the x from line A
    }
    func(false); // undefined

func()會意外地返回undefined。你可以重寫這部分代碼，就知道為什么返回undefined了：

    var x = 3;
    function func(randomize) {
        var x;
        if (randomize) {
            x = Math.random();
            return x;
        }
        return x;
    }
    func(false); // undefined

如果用let代替之前的var，就會得到不同的結(jié)果：

    let x = 3;
    function func(randomize) {
        if (randomize) {
            let x = Math.random();
            return x;
        }
        return x;
    }
    func(false); // 3

因此，盲目地用let或const代替var是有風(fēng)險(xiǎn)的，我的建議是：
1、只在新代碼中使用let或const
2、丟棄舊代碼或仔細(xì)認(rèn)證

更多信息：es6中的變量和作用域

在es5中，如果要維護(hù)本地變量，不得不使用IIFE：

(function () {  // open IIFE
        var tmp = ···;
        ···
    }());  // close IIFE
    
    console.log(tmp); // ReferenceError

而在es6中，則只需要代碼塊和let聲明:

    {  // open block
        let tmp = ···;
        ···
    }  // close block
    
    console.log(tmp); // ReferenceError

更多信息：避免IIFEs

在es6中，對于字符串插值和多行字符串，Javscript能得到其字面值。

4.1 字符串插值

在es5中，是將結(jié)果放在字符串中進(jìn)行拼接：

 function printCoord(x, y) {
        console.log("("+x+", "+y+")");
    }

es6中，通過字符串字面模板，可以在字符串中插入變量值：

function printCoord(x, y) {
        console.log(`(${x}, ${y})`);
    }

4.2 多行字符串

模板字面量也能輸出多行字符串。
例如，在es5中，輸出多行字符串，得這樣：

var HTML5_SKELETON =
        "
" +
        "
" +
        "
" +
        "    
" +
        "    
" +
        "
" +
        "
" +
        "
" +
        "
";

如果通過反斜線轉(zhuǎn)義新行，代碼看起來會舒服點(diǎn)（但還是要顯示的添加新行）：

var HTML5_SKELETON = "
        

        

        

            

            

        

        

        

        ";

而es6得模板字面量能跨多行：

const HTML5_SKELETON = `
        
        
        
            
            
        
        
        
        `;

更多信息：字面量模板

在es5中，在函數(shù)表達(dá)式中必須小心使用this。在示例中，我創(chuàng)建了輔助變量_this_，以便于我能再line B處使用：

function UiComponent {
        var _this = this; // (A)
        var button = document.getElementById("myButton");
        button.addEventListener("click", function () {
            console.log("CLICK");
            _this.handleClick(); // (B)
        });
    }
    UiComponent.prototype.handleClick = function () {
        ···
    };

在es6中，可以使用箭頭函數(shù)，它不會影響this：

class UiComponent {
        constructor() {
            let button = document.getElementById("myButton");
            button.addEventListener("click", () => {
                console.log("CLICK");
                this.handleClick(); // (A)
            });
        }
        handleClick() {
            ···
        }
    }

對于只返回結(jié)果的短小回調(diào)函數(shù)，箭頭函數(shù)是非常便利的。
在es5中，如下的回調(diào)是相對冗長的：

var arr = [1, 2, 3];
    var squares = arr.map(function (x) { return x * x });

在es6中，箭頭函數(shù)會更簡潔：

let arr = [1, 2, 3];
    let squares = arr.map(x => x * x);

在定義參數(shù)時(shí)，如果只有一個(gè)參數(shù)，括號是可以省略的。因而，(x) => x x and x => x x 都是允許的。
更多信息：箭頭函數(shù)

一些函數(shù)或方法能通過數(shù)組或?qū)ο蠓祷囟鄠€(gè)值。在es5中，總是需要?jiǎng)?chuàng)建中間變量來訪問返回值。es6中，可以使用解構(gòu)。

exec()返回類數(shù)組對象的捕獲組。es5中，當(dāng)要訪問捕獲組的值時(shí)，需要一個(gè)中間變量：

var matchObj =
        /^(ffffdd)-(dd)-(dd)$/
        .exec("2999-12-31");
    var year = matchObj[1];
    var month = matchObj[2];
    var day = matchObj[3];

es6中，解構(gòu)使代碼更簡單：

let [, year, month, day] =
        /^(ffffdd)-(dd)-(dd)$/
        .exec("2999-12-31");

空得逗號表示跳過數(shù)組的第一個(gè)元素。

Object.getOwnPropertyDescriptor()會返回一個(gè)屬性描述符對象。

es5中，仍需要一個(gè)中間變量來訪問你感興趣的對象屬性值：

var obj = { foo: 123 };
    
    var propDesc = Object.getOwnPropertyDescriptor(obj, "foo");
    var writable = propDesc.writable;
    var configurable = propDesc.configurable;
    
    console.log(writable, configurable); // true true

es6，可以使用解構(gòu)：

let obj = { foo: 123 };
    
    let {writable, configurable} =
        Object.getOwnPropertyDescriptor(obj, "foo");
    
    console.log(writable, configurable); // true true

{writable, configurable}的值如下：

 { writable: writable, configurable: configurable }

更多信息：解構(gòu)

先說es6，一般會這樣迭代數(shù)組：

var arr = ["a", "b", "c"];
    for (var i=0; i
也可以使用Array的forEach：
arr.forEach(function (elem) {
        console.log(elem);
    });
for循環(huán)的優(yōu)點(diǎn)是可以中斷，forEach的優(yōu)點(diǎn)是簡潔。
而es6的for-of循環(huán)則結(jié)合了兩者的優(yōu)點(diǎn)：
let arr = ["a", "b", "c"];
    for (let elem of arr) {
        console.log(elem);
    }
for-of循環(huán)也能通過數(shù)組的entries方法和解構(gòu)返回?cái)?shù)組的索引和對應(yīng)的值：
for (let [index, elem] of arr.entries()) {
        console.log(index+". "+elem);
    }
更多信息：for-of循環(huán)
8. 參數(shù)默認(rèn)值
es5中，指定參數(shù)默認(rèn)值得這樣：
function foo(x, y) {
        x = x || 0;
        y = y || 0;
        ···
    }
es6有個(gè)更簡潔的語法：
function foo(x=0, y=0) {
        ···
    }
es6語法還一個(gè)優(yōu)點(diǎn)：參數(shù)默認(rèn)值只能被undefined觸發(fā)，而在es5中，則會被任何z為false的值觸發(fā)。
更多信息：參數(shù)默認(rèn)值
9. 命名參數(shù)
在Javascript中，命名參數(shù)的普遍方式是對象字面量：
selectEntries({ start: 0, end: -1 });
其等價(jià)實(shí)現(xiàn)：
function selectEntries(options) {
        var start = options.start || 0;
        var end = options.end || -1;
        var step = options.step || 1;
        ···
    }
es6中，解構(gòu)是語法更簡單：
function selectEntries({ start=0, end=-1, step=1 }) {
        ···
    }
9.1 使參數(shù)可選
es5中使參數(shù)可選的做法是這樣的：
function selectEntries(options) {
        options = options || {}; // (A)
        var start = options.start || 0;
        var end = options.end || -1;
        var step = options.step || 1;
        ···
    }
es6中，可以指定{}為參數(shù)的默認(rèn)值：
function selectEntries({ start=0, end=-1, step=1 } = {}) {
        ···
    }
更多信息：：模擬命名參數(shù)
10. 從arguments到參數(shù)擴(kuò)展
es5中，若想讓方法或函數(shù)接受任意個(gè)數(shù)的參數(shù)，就必須使用指定的arguments變量：
function logAllArguments() {
        for (var i=0; i < arguments.length; i++) {
            console.log(arguments[i]);
        }
    }

es6中，可以使用...操作達(dá)到同樣地效果：
function logAllArguments(...args) {
        for (let arg of args) {
            console.log(arg);
        }
    }
還有更nice的語法：
function format(pattern, ...args) {
        ···
    }
而es5中的處理則相對笨拙：
function format() {
        var pattern = arguments[0];
        var args = arguments.slice(1);
        ···
    }
更多信息：Rest parameters
11. 從apply到散布操作符(...)
es5中，apply()會將數(shù)組轉(zhuǎn)會成參數(shù)，es6中使用散布操作符達(dá)到同樣地目的。
11.1 Math.max()
es5-->apply():
> Math.max.apply(null, [-1, 5, 11, 3])
    11
es6-->spread operator:
> Math.max(...[-1, 5, 11, 3])
    11
11.2 Array.prototype.push()
es5-->apply():
    var arr1 = ["a", "b"];
    var arr2 = ["c", "d"];
    
    arr1.push.apply(arr1, arr2);
        // arr1 is now ["a", "b", "c", "d"]
es6-->spread operator:
    let arr1 = ["a", "b"];
    let arr2 = ["c", "d"];
    
    arr1.push(...arr2);
        // arr1 is now ["a", "b", "c", "d"]
更多信息：spread operator
12. 從concat()到（...）
ES5 – concat():
    var arr1 = ["a", "b"];
    var arr2 = ["c"];
    var arr3 = ["d", "e"];
    
    console.log(arr1.concat(arr2, arr3));
        // [ "a", "b", "c", "d", "e" ]
ES6 – spread operator:
    let arr1 = ["a", "b"];
    let arr2 = ["c"];
    let arr3 = ["d", "e"];
    
    console.log([...arr1, ...arr2, ...arr3]);
        // [ "a", "b", "c", "d", "e" ]
更多信息：spread operator
13. 從構(gòu)造器到類
對于構(gòu)造器語法，es6的類則更簡便。
13.1 基本類
es5中實(shí)現(xiàn)一個(gè)基本類如下：
function Person(name) {
        this.name = name;
    }
    Person.prototype.describe = function () {
        return "Person called "+this.name;
    };
es6中，類提供了更簡潔的語法：
class Person {
        constructor(name) {
            this.name = name;
        }
        describe() {
            return "Person called "+this.name;
        }
    }
13.2 派生類
es5實(shí)現(xiàn)了類的派生，下面是實(shí)現(xiàn)派生類的一種規(guī)范方法：
function Employee(name, title) {
        Person.call(this, name); // super(name)
        this.title = title;
    }
    Employee.prototype = Object.create(Person.prototype);
    Employee.prototype.constructor = Employee;
    Employee.prototype.describe = function () {
        return Person.prototype.describe.call(this) // super.describe()
               + " (" + this.title + ")";
    };
es6內(nèi)置了類派生語法，要借助extends關(guān)鍵字：
class Employee extends Person {
        constructor(name, title) {
            super(name);
            this.title = title;
        }
        describe() {
            return super.describe() + " (" + this.title + ")";
        }
    }
更多信息：類
14. 從自定義error到Error派生
跟上面有點(diǎn)類似。es5中自定義error:
function MyError() {
        // Use Error as a function
        var superInstance = Error.apply(null, arguments);
        copyOwnPropertiesFrom(this, superInstance);
    }
    MyError.prototype = Object.create(Error.prototype);
    MyError.prototype.constructor = MyError;
es6通過派生實(shí)現(xiàn):
class MyError extends Error {
    }
更多信心：Subclassing built-in constructors
15. 從對象字面量的函數(shù)表達(dá)式和方法定義
語法上的差別。es5實(shí)現(xiàn)：
var obj = {
        foo: function () {
            ···
        },
        bar: function () {
            this.foo();
        }, // trailing comma is legal in ES5
    }
es6:
 let obj = {
        foo() {
            ···
        },
        bar() {
            this.foo();
        },
    }

更多信息：方法定義
16. 從對象到圖
es5中利用對象來實(shí)現(xiàn)圖的數(shù)據(jù)結(jié)構(gòu)，需要將對象的prototype指向null，并保證__proto__上沒有對應(yīng)的鍵。
var dict = Object.create(null);
    function countWords(word) {
        var escapedWord = escapeKey(word);
        if (escapedWord in dict) {
            dict[escapedWord]++;
        } else {
            dict[escapedWord] = 1;
        }
    }
    function escapeKey(key) {
        if (key.indexOf("__proto__") === 0) {
            return key+"%";
        } else {
            return key;
        }
    }
es6則內(nèi)置了Map數(shù)據(jù)結(jié)構(gòu)；
let map = new Map();
    function countWords(word) {
        let count = map.get(word) || 0;
        map.set(word, count + 1);
    }
更多信息：Maps and Sets
17. 從CommonJS模塊到es6 模塊
es5中，模塊系統(tǒng)是基于AMD或CommocJS語法。es6內(nèi)置了模塊語法，但并沒有得到Javascript引擎良好支持。
17.1 多個(gè)導(dǎo)出
在CommonJS中，可以這樣實(shí)現(xiàn)：
 //------ lib.js ------
    var sqrt = Math.sqrt;
    function square(x) {
        return x * x;
    }
    function diag(x, y) {
        return sqrt(square(x) + square(y));
    }
    module.exports = {
        sqrt: sqrt,
        square: square,
        diag: diag,
    };
    
    //------ main1.js ------
    var square = require("lib").square;
    var diag = require("lib").diag;
    
    console.log(square(11)); // 121
    console.log(diag(4, 3)); // 5
es6的語法是醬紫的：
//------ lib.js ------
    export const sqrt = Math.sqrt;
    export function square(x) {
        return x * x;
    }
    export function diag(x, y) {
        return sqrt(square(x) + square(y));
    }
    
    //------ main1.js ------
    import { square, diag } from "lib";
    console.log(square(11)); // 121
    console.log(diag(4, 3)); // 5
或者作為一個(gè)對象導(dǎo)入：
//------ main2.js ------
    import * as lib from "lib"; // (A)
    console.log(lib.square(11)); // 121
    console.log(lib.diag(4, 3)); // 5
17.2 單個(gè)導(dǎo)出
Node.js繼承了CommonJS的語法，能從模塊導(dǎo)出單個(gè)值：
 //------ myFunc.js ------
    module.exports = function () { ··· };
    
    //------ main1.js ------
    var myFunc = require("myFunc");
    myFunc();
es6通過export default實(shí)現(xiàn)：
//------ myFunc.js ------
    export default function () { ··· } // no semicolon!
    
    //------ main1.js ------
    import myFunc from "myFunc";
    myFunc();
更多信息：Modules

相關(guān)文章：ECMAScript 6新特性介紹
譯文出處：Getting started with ECMAScript 6