ES6語法

詳細文件: https://es6.ruanyifeng.com/#docs/intro

let 與 const

let

• 不能使用window獲取let定義的變數；

• 有全域性/塊級/函式三種作用域；

• 不會存在變數提升；

• 變數可以更改，但不能重複宣告。

<script>
    console.log(a) // Cannot access 'a' before initialization 沒有變數提升
    let a = 30;   // let 定義的全域性作用域變數，可以在全域性/區域性使用
    // let a = 40;   // Identifier 'a' has already been declared  let變數不能重複宣告
    console.log(a)  // 30
    console.log(window.a)  // undefined   全域性變數不能用window呼叫

    // let定義的塊級作用域變數,只在此塊內生效
    {
        let b=10  
        console.log(b) // 10  
    }
    console.log(b)  // b is not defined

    // let定義的函式作用域變數,只在此函式體內生效
    function func () {
        let c=20       
        console.log(c)  
    }
    func()  // 20
    console.log(c) // c is not defined
</script>
 

ES5中的var (比較)

• 可以用window獲取var定義的變數；
• 有 全域性/函式兩種作用域；
• 有變數提升；
• 可以重複宣告。

<script>
    // var定義的變數有變數提升，相當於在該作用域的頂部有個 var a;
    console.log(a) // undefined 定義了變數沒有值。  變數提升
    var a = 20;   // var 定義的全域性作用域變數
    var a = 30;   // var 變數可以重複宣告
    console.log(a)  // 30
    console.log(window.a)  // 30

    // var沒有塊級作用域， { }內也相當於全域性
    {
        var b=10   
        console.log(b) // 10  
    }
    console.log(b)  // 10

    // var定義的函式作用域變數,只在此函式體內生效
    function func () {
        var c=20        
        console.log(c)  
    }
    func()  // 20
    console.log(c)  // c is not defined 
</script>
 

const

• 用來宣告常量
• 不能重複宣告 或 更改
• 其他特徵與let 一致

<script>
    console.log(PI) // Cannot access 'PI' before initialization  沒有變數提升
    const PI = 3.14;   // let 定義的全域性作用域變數，可以在全域性/區域性使用
    PI = 3.14159  // Assignment to constant variable  const常量不能更改
    const PI = 3.1415926;   // Identifier 'PI' has already been declared  const常量不能重複宣告
    console.log(PI)  // 3.14
</script>
 

小練習

分別用 var ，let 定義 i 變數，會輸出什麼？

<script>
    var a = []

    for (let i = 0;i < 10;i++) {
        a[i] = function () {
            console.log(i)
        }
    } 
    a[1]();
</script>
<script>
    var a = []

    for (var i = 0;i < 10;i++) {
        a[i] = function () {
            console.log(i)
        }
    } 
    a[1]();  
</script>

分析

// 答案:  let定義的i，a[1]()輸出 1；var定義的i，a[1]()輸出 10；
// 以下為個人分析，不一定正確

// 用var定義，每一次迴圈 i都在同一個函式作用域內，相當於：
<script>
    var a = []
    
    function func () {
        var i = 0;
        a[i] = function () {
            console.log(i)
        }
        var i = 1
        a[i] = function () {
            console.log(i)
        }
        var i = 2
        a[i] = function () {
            console.log(i)
        }
    }
    func ()
    a[1]();   // 輸出的是最後一個i值
</script>

// 用let定義，因為有塊級作用域，每一次迴圈的i都在一個單獨的塊級作用域中，相當於:
<script>
    var a = []
    
    function func () {
        {       let i = 0;
        a[i] = function () {
            console.log(i)
        }}
        {        let i = 1
        a[i] = function () {
            console.log(i)
        }}
        {
            let i = 2
        a[i] = function () {
            console.log(i)
        }}
    }
    func ()
    a[1]();  // 輸出1
</script>

模板字串

使用模板字串可以在字串內插入變數

用反引號 `` 宣告字串，用 ${變數名} 引入變數

<script>
    // 普通定義字串
    let name = '未來';  
    // 模板字串
    let str = `我叫${name}`;  

    console.log(str)  // 我叫未來
</script>

箭頭函式

ES5中函式的定義方式:

function func1(x) { 
    return x;
}

var func2 = function (x) { 
    return x; 
}

ES6中引入箭頭函式，書寫更簡便，還支援定義預設值

// 傳入單個引數
let func3 = x => x;
let func4 = (x) => { return x; }

// 傳入多個引數，在形參處可直接設定預設值
let func5 = (x,y=9) => { return x+y; }

console.log(func5(x=6))  // 15

this指向問題

<script>
    // 物件中匿名函式的this指向呼叫者，即這個物件本身
    let person1 = {
        name: '楊稀飯',
        age: 3,
        GetName: function (){
            console.log(this)  // person1 這個物件
            console.log(this.name)  // person1.name
        }
    }
    person1.GetName()   

    // 物件中箭頭函式的this指向定義這個物件的父級物件
    let person2 = {
        name: '楊稀飯',
        age: 3,
        GetName: () => {
            console.log(this)  // window
            console.log(this.name) // 獲取的是window.name
        }
    }
    person2.GetName()

    // 單體模式下函式的this指向這個物件本身
    let person3 = {
        name: '楊稀飯',
        age: 3,
        // 單體模式
        GetName () {
            console.log(this)  // person3 這個物件
            console.log(this.name) // 獲取的是person3.name
        }
    }
    person3.GetName()
</script>