摘要：它是一個通用標準，奠定了的基本語法。年月發(fā)布了的第一個版本，正式名稱就是標準簡稱。結語的基本擴展還有一些沒有在這里詳細介紹。

ES6標準以及頒布兩年了，但是，好像還沒有完全走進我們的日常開發(fā)。這篇文章從ES6的基本類型擴展入手，逐步展開對ES6的介紹。

JavaScript是由Netscape創(chuàng)造的，該公司1996年11月將JavaScript語言提交國際標準化組織ECMA。于是ECMA次年就發(fā)布了ECMAScript 1.0版本。之所以不采用JavaScript命名，原因有兩個，一個是版權問題，另一個也是想通過ECMAScript表明制定者是ECMA而非Netscape。當然，這不是我們關注的重點。

1998年，發(fā)布了ECMAScript 2.0，1999年發(fā)布了ECMAScript 3.0。這是ECMAScript自頒布以來最廣為支持的版本，我們現在所使用的JavaScript語法和規(guī)定大部分都來源于這個版本。它是一個通用標準，奠定了JavaScript的基本語法。2000年后，4.0開始提上日程，但是由于各方分歧很大，導致4.0草案流產，只在最后發(fā)布了一個小的改進版本，即ES 3.1，不久后更名為ECMAScript 5.0。

2011年，ECMAScript 5.1版發(fā)布后，就開始制定6.0版了。2015年6月發(fā)布了ES6的第一個版本，正式名稱就是《ECMAScript 2015標準》（簡稱 ES2015）。2016年6月，小幅修訂的《ECMAScript 2016標準》（簡稱 ES2016）如期發(fā)布，這個版本可以看作是 ES6.1 版，因為兩者的差異非常小，基本上是同一個標準。根據計劃，2017年6月發(fā)布 ES2017 標準。因此，ES6 既是一個歷史名詞，也是一個泛指，含義是5.1版以后的 JavaScript 的下一代標準，涵蓋了ES2015、ES2016、ES2017等等，而ES2015 則是正式名稱，特指該年發(fā)布的正式版本的語言標準。

在ES6之前，JavaScript的作用域只有兩種：全局作用域和函數作用域。而在這兩個作用域里，存在一種奇怪的現象--變量提升。MDN上的介紹是 在編譯階段將變量和函數聲明放入內存中，但仍然保留在編碼中鍵入的位置。

    function(){
        console.log(a);
        var a= "hello";
    }


    function(){
        var a = undefined;
        console.log(a);
        a= "hello";
    }

上面的兩段代碼是等價的，也說明了變量提升的本質。在函數作用域內，函數或者變量的聲明會被放到作用域頂部，而其他操作仍然保留在原來的鍵入位置。

ES6中引入塊級作用域的概念，和Java或者C語言中的局部變量作用域很像。因此，ES6中的塊級作用域存在以下特點：暫時性死區(qū)、不可重復命名、不存在變量提升。通過關鍵字let和const聲明的變量只在塊級作用域內有效。

    {
        let i = 1;
    }
    console.log(i);//Error

上面的代碼塊解釋了ES6中的塊級作用域的概念，一個{}即為一個塊級作用域，作用域內的變量在作用域外無法被訪問。

塊級作用域首先帶來的問題就是暫時性死區(qū)。從作用域開始到變量被聲明之前的空間內是該變量的死區(qū)，在這個空間內不能對該變量進行任何操作。例如：

    {
        //死區(qū)開始
        i = 2;//Error
        console.log(i);//Error            
        let i = 1;//死區(qū)結束
    }

這個很容易理解，var聲明的變量可以重復命名，后來的命名可以把之前的覆蓋掉，但是let聲明的變量如果出現重復命名的情況，會直接報錯。

const用來聲明常量，一旦聲明，值就不可改變。因此，const一旦聲明，就必須立即初始化。這一點和Java或者C語言很像。

但是對于復合型變量，變量名不是指向數據，而是指向數據所在的地址。因此，const定義的復合型變量，只能保證變量名指向的地址不變，并不能確保改地址的內存儲的數據不變。

    const foo = {};
    foo.a = 1;

    foo = {}//Error

    const b = [];
    b.length = 1;
    b = [];//Error

上面的一段代碼中，分別用const聲明了一個對象和一個數組。我們可以給對象或者數組的一個屬性賦值，但是不能直接給對象或者數組整體賦值。

結構賦值是ES6引入的一種新的變量賦值方式， MDN上的解釋是：解構賦值語法是一個Javascript表達式，這使得可以將值從數組或屬性從對象提取到不同的變量中。

    let [a, b, c] = [1, 2, 3];
    console.log(a,b,c);//1 2 3

    let [foo, [[bar], baz]] = [1, [[2], 3]];
    console.log(foo, bar, baz);//1 2 3

上面的代碼是兩種數組解構賦值，只要等號左邊的變量在右邊的數組中能夠找到對應的位置，就可以進行解構賦值。

對象的結構賦值和數組略有不同。let { key:name } = obj。等價于 let name = obj[key]。

let obj = { first: "hello", second: "world" };
let { first: f, second: s } = obj;
console.log(f, s);//hello world
console.log(first, second);//Error

let { foo, bar } = { foo: "aaa", bar: "bbb" };
console.log(foo, bar);// aaa bbb

let { bar, foo } = { foo: "aaa", bar: "bbb" };
console.log(foo, bar);// aaa bbb

后兩段代碼是對象屬性名和值相同時的簡潔寫法。從后兩段代碼我們可以了解到對象解構賦值的本質：先在對象內部找到和變量名相同的屬性，然后再把屬性值賦給變量。對象的解構賦值本身是一次變量賦值運算。

解構賦值也可以設置默認值，當結構失敗時，直接取默認值。例如：

    var {x = 3} = {};
    console.log(x); //3

    var {x, y = 5} = {x: 1};
    console.log(x, y) // 1 5

用作變量交換。 [x, y] = [y, x];

函數返回多個值。 [x, y] = func();

對象的快速賦值。 let a={x:1,y:2,z:3,w:4}; let {x,y}=a; let b={x,y};

導入模塊的部分功能。 import {getOS} from "../utils";

函數的解構參數（函數的擴展里詳解）

ES6中為函數加入了添加默認值的功能。

    function log(x, y = "World") {
    console.log(x, y);
    }

    log("Hello");//Hello World

下邊的代碼有點意思，是函數解構參數的默認值寫法。

    // 寫法一
    function m1({x = 0, y = 0} = {}) {
        return [x, y];
    }

    // 寫法二
    function m2({x, y} = { x: 0, y: 0 }) {
        return [x, y];
    }


    m1({x: 3});
    m2({x: 3});

兩種寫法略有不同，所表達的意思也不一樣。首先，函數的解構參數的寫法是這樣的：

    function add({x, y}){
        return x + y;
    }

當然，這里也可以是數組解構，上面的代碼拿對象解構做事例。

寫法一，兩個大括號相等，表達的意思是函數參數擁有默認值，當m1函數被調用時沒有傳遞參數時，區(qū)默認值即{}。之后，進行解構賦值。方法一里的解構賦值是帶有默認值的解構賦值，因此，當解構失敗時，x和y分別取默認值0。所以m1({x: 3})的執(zhí)行結果是[3,0]。

寫法二，兩個大括號相等，同樣表達的意思是函數參數擁有默認值，當m2函數被調用時沒有傳遞參數時，區(qū)默認值即{ x: 0, y: 0}。方法二里的解構賦值沒有默認值，因此，當解構失敗時，x和y的值都是undefined。所以，m2()的值是[0,0]，但是m2({x: 3})的則是[3,undefined]。

函數的解構參數最大的意義在于，我可以不用關心傳遞過來的數組或者對象內部的解構，只要內部有我想要的屬性值就夠了，這樣在一定程度上降低了邏輯函數之間的耦合。例如：

let obj = {
    name: "hello",
    age: 18,
    address: "BeiJing",
    mobile: "123123123",
    timestamp: "1496940548319"
}

function getName({name}){
    return name;
}

getName(obj);

ES6為函數參數引入rest寫法。也就是我們偶爾會在ES6代碼里見到的 ...

    function add(...values) {
        let sum = 0;

        for (let val of values) {
            sum += val;
        }

        return sum;
    }

rest參數用于獲取函數的多余參數，類似于arguments對象。與之不同的是，rest參數是一個數組，也就意味著我們可以對rest參數使用數組的所有方法。

ES6的函數擴展里，最引人注意的應該就是箭頭函數了。一個最簡單的箭頭函數：let f = v => v 等價于

    let f = function(v){
        return v
    }

當箭頭函數沒有參數或者有多個參數時，使用圓括號把參數括起來。當箭頭函數的函數體多于一行代碼時，就采用花括號把函數體括起來，并使用return語句返回值。

箭頭函數的出現，主要是為了簡化函數的書寫。對于開發(fā)而言，最大的好處是簡單易讀，同時匿名函數寫起來也更加舒服自然。

ES6的基本擴展還有一些沒有在這里詳細介紹。總體感覺，ES6做了一些語法的豐富，使得JavaScript寫起來更加舒服了，特別是結構賦值和箭頭函數的引入，用習慣了以后，完全是另外一種編程體驗。