變量的擴展與解構

一、發展歷史

基本概念：ES6 是 ECMAScript6 的一個簡稱；

1996年網景（Netscape）提交給國際標準組織（ECMA）的新語言，但願成爲國際標準。第二年發佈了Javascript並稱爲ECMAScript。爲何不叫JavaScript而是ECMAScript呢？有兩個緣由，一個是由於商標問題，JavaScript是隻有網景公司纔可使用的商標；ECMA的國際標準，體現標準的製做者不是我的或者公司。

ECMA是在5.1版本以後的更新迭代，ES6 第一個版本是在2015年6月發佈的，後續每一年六月份發佈一次，ES201五、ES201六、ES201七、ES2018；ES6是統稱下一代的JavaScript語言。

ES6就是ECMAScript6是新版本JavaScript語言的標準，它的目標是使得JavaScript語言能夠用來編寫複雜的大型應用程序，成爲企業級開發語言。

ECMAScript定義了：語言語法：語法解析規則、關鍵字、語句、聲明、運算符等。類型：布爾型、數字、字符串、對象等。

二、ES6的主要優點

• 學習ES6能夠大幅度的提升開發效率；（ES6封裝了不少內置方法）
• 目前比較流行的JavaScript開源框架都使用ES6編寫；好比：react裏面的simple，每個常量和枚舉都是使用simple來實現的，這樣就避免了一個重複
• ES6是下一代的JavaScript標準

在ES6以前定義變量都是用var這個關鍵字，var是在全局的環境下聲明的一個變量，並且這個變量有一個變量的提高；也就是說，即便把變量放在後面，可是JavaScript引擎的運行的時候會把變量提到代碼的最上層，而後先聲明再賦值，這樣就帶來了一個變量提高的問題。ES6在此基礎上作了一下改進，提出了兩個變量的擴展：let和const。

三、變量的擴展

• let，聲明變量，只在當前的代碼塊內有效，不能重複聲明，沒有變量的提高，並且它是塊級做用域。

  //變量聲明
    {
        let a = 10;
        var b = 10;
    }
    a  // ReferenceError: a is not defined. 
    b  // 10 
    
    for(var i = 0; i < 5; i++){
        setTimeout(function(){
            console.log(i);
        },i * 100);
    }

• const，只讀常量，保證了這個變量指向的內存地址。（不能再去賦值）

  const a = 10;
    a = 3;      //TypeError:Assignment to constant variable.

var與let 和 const 的比較：

var的缺點：

• 能夠重複聲明
• 能夠修改變量
• 沒有塊級做用域

es6變量 ：

• let，不能夠重複聲明，能夠修改變量
• const，不能夠重複聲明，不能夠修改 ，由於是常量
• 都是塊級做用域
• 都不存在變量提高，必須聲明才能使用

四、變量的解構

解構的做用是能夠快速取得數組或對象當中的元素或屬性

目的：爲了方便咱們從數組或者對象把咱們想要的值給提取出來而且賦給咱們想要賦的值；若是沒有解構成功就返回undefined。咱們主要是從數組和對象的解構來介紹瞭解：

• 數組的解構，徹底的對應位置，由於數組的屬性就是index就是它的位置，有順序匹配

  let [a, b, c] = [1, 2, 3];
    /* a = 1; b = 2; c = 3 */
    
    let [week, [[month], year]] = [1, [[2], 3]];
    /* week = 1; month = 2; year = 3 */
    
    let [ , , third] = ["week", "month", "year"];
    /* third = 'year' */
    
    let [x, , y] = [1, 2, 3];
    /* x = 1; y = 3 */
    
    let [head, ...tail] = [1, 2, 3, 4];
    /* head = 1; tail = [2, 3, 4] */
    
    let [a, [b], d] = [1, [2, 3], 4];
    /* a = 1; b = 2; d = 4 */
    
    [a, b] = [b, a];
    // 位置互換 
    
    // 指定默認值 
    let [x, y = 'b'] = ['a'];
    /* x = 'a'; y = 'b' */
    
    function f() {
        console.log('參數錯誤！');
    }
    
    let [x = f()] = [];

• 對象的解構， 沒有順序， 匹配屬性名（對應的位置找到對應的值賦給對應的變量）

  let { month, week } = { week: 'aaa', month: 'bbb' };
    /* week = 'aaa'; month = 'bbb' */
    
    let { log, sin, cos } = Math;
    /* log = Math.log; sin = Math.sin; cos = Math.cos */
    
    let obj = {
        p: [
            'Hello',
            { y: 'World' }
        ]
    };
    let { p: [x, { y }] } = obj;
    /* x = 'hello'; y = 'word'; */
    
    let  { week: { month } } = { year: 'year' };
    /* TypeError: Cannot destructure property `month` of 'undefined' or 'null'. */