ECMAScript 6 簡稱ES6, 在2015年6月正式發布~ ECMAScript 是JavaScript語言的國際標準。

一， 變量聲明 const let var

ES6以前 var關鍵字來聲明變量，無論聲明在何處都存在變量提升這個事情，會提前創建變量；

作用域也只有全局作用域以及函數作用域~ 所以變量會提升在函數頂部或全局作用域頂部；

let 關鍵字表示變量，const 表示常量。都是塊級作用域，比如一個函數內部，代碼塊{}內部；

    // var 變量提升
    console.log(age);
    var age = 18;
    console.log(age);

    
 
// 聲明變量
    // const  let
    console.log(age);  // age is not defined
    let age = 18;
    console.log(age);

    const a = 1;
    const a = 2;  //  Identifier ‘a‘ has already been declared

    let a = 1;
    let a = 2;  // Identifier ‘a‘ has already been declared

    function test() {
        console.log(age); 
 
// age is not defined
        let  age = 18;
        console.log(age);
    }
    test()

二，模板字符串

ES6引入了反引號``，使用 ${} 的方式

// 模板字符串, 可進行簡單的運算
    let name = "glh";
    let age = 18;
    let hobby = ["妹子1", "妹子2"];

    let html = `
            <ul>
                <li>${name}</li>
                <li>${age + 2}</li>
                <li>${hobby}</li>
            </ul>`;

    let ele1 
 
= document.getElementById("app");
    let ele = document.getElementsByClassName("app")[0];
    console.log(ele);
    console.log(ele1);
    ele.innerHTML = html;
    ele.innerText = ‘sdfsfss‘

三，箭頭函數

箭頭函數，是函數的快捷寫法，類比Python的匿名函數 lambda。

最直觀的三個特點

　　-- 不需要function關鍵字來創建函數

　　-- 省略return關鍵字

　　-- 繼承當前上下文的this關鍵字

 // 箭頭函數和this
    function f(x) {
        return x+1
    }

    let aa = x => x+1;
    console.log(aa(2));

    // 關於this
    function f1() {
        console.log(this)
    }

    f1(); //this: Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}

    let obj1 = {
        f1:f1
    };
    obj1.f1();  //this: {f1: ƒ}

    let obj2 = {
        obj: obj1
    };
    obj2.obj.f1();  // this: {f1: ƒ}
     // this取決去函數的最近調用著

四，數據解構

數據的解構類似於我們python裏面的**解包

  // 數據的解構
    let arry = [1, 2, 3];
    let obj = {name: ‘glh‘, age: 18};
    let objArry = [
        {name: ‘glh‘, age: 18},
        {name1: ‘hudapao‘, age1: 28}
        ];
    let [a, b, c] = arry;
    console.log(a);
    console.log(b);
    console.log(c);
    let {name, age} = obj;  // 解構取對象的鍵對應的值
    console.log(name);
    console.log(age);
    let [{name, age}, {name1, age1}] = objArry;
    console.log(name);
    console.log(name1);
    console.log(age);
    console.log(age1);

五，類

// 類 類的繼承
    class Foo{
        // 類的構造方法
        constructor(){
            this.name = "glh";
            this.gender = "   man   "
        }
        says(say){
            console.log(this.name + this.gender + "說" + say)
        }
    }
    foo = new Foo();
    foo.says(6666)

類的繼承

  // 類的繼承
    class Son extends Foo{
        constructor(name, gender){
            super();
            this.name = name;
            this.gender = gender;
        }
    }
    son = new Son("兒子", "man man");
    son.says(7777)

六， import 和 export

import 導入模塊、export導出模塊

// main.js
// 導出多個聲明
export var name = "ggg"
export var age = "18"
export function aa() {
    return 1
}
// 批量導出
export {name, age, aa}

// test.js
import {name, age, aa} from "./main"
console.log(name)
console.log(age)
console.log(aa())
// 整個模塊導入 把模塊當做一個對象
// 該模塊下所有的導出都會作為對象的屬性存在
import * as obj from "./main"
console.log(obj.name)
console.log(obj.age)
console.log(obj.aa())
       

// 一個模塊只能有一個默認導出
// 對於默認導出 導入的時候名字可以不一樣
// main.js
var app = new Vue({

});
export default app
// test.js
// import app from "./main"
import my_app from "./main"

ES6 常用語法