ES6入門教程

一、let和const關鍵字

ES6 新增了兩個聲明變量的關鍵字：let 和 const。

let 關鍵字聲明的變量作用域是塊範圍，相當於局部變量；

const 聲明的變量也是塊級作用域，用來聲明常量，聲明後不可更改。

    
        //let關鍵字的使用
        let x = 1;
        if(true) {
            let x = 2;
        }
        console.log(x); //輸出1

        //const關鍵字的使用
        const y = 3;
        y = 4; //Assignment to constant variable
    

二、箭頭函數

箭頭函數是 ES6 中新增的一種函數表達式，可以簡化函數的寫法。它最常用的場景就是簡化回調函數的寫法。

在箭頭函數中，this指向詞法作用域，而不是執行作用域。

    
        //ES5方法定義
        var sum = function(a, b) {
            return a + b;
        }

        //ES6箭頭函數
        let sum = (a, b) => {
            return a + b;
        }

        //簡化寫法
        let sum = (a, b) => a + b;
    

三、模板字符串

模板字符串是一種可以包含變量和表達式的字符串。在字符串開頭使用反引號，插入變量時使用${}。

    
        let name = 'John';
        let age = 20;
        console.log(`My name is ${name}, I am ${age} years old.`);
    

四、解構賦值

解構賦值可以將數組或對象中的值，賦值給變量。可以用於簡化代碼的書寫。

    
        //數組解構賦值
        let [x, y, z] = [1, 2, 3];
        console.log(x, y, z); //輸出1 2 3

        //對象解構賦值
        let {name, age} = {name: 'John', age: 20};
        console.log(name, age); //輸出John 20
    

五、展開運算符

展開運算符可以將數組或對象中的值展開，逐個作為獨立的參數傳入函數或構造對象。

    
        //展開數組
        let arr1 = [1, 2, 3];
        let arr2 = [...arr1, 4, 5, 6];
        console.log(arr2); //輸出[1, 2, 3, 4, 5, 6]

        //展開對象
        let obj1 = {name: 'John', age: 20};
        let obj2 = {...obj1, sex: 'male'};
        console.log(obj2); //輸出{name: 'John', age: 20, sex: 'male'}
    

六、類與繼承

ES6 的 class 關鍵字可以輕鬆定義類及其成員函數和屬性。

    
        //定義類
        class Person {
            constructor(name, age) {
                this.name = name;
                this.age = age;
            }

            //定義成員函數
            getDetails() {
                return `My name is ${this.name}, I am ${this.age} years old.`;
            }
        }

        //定義繼承Person類的Student類
        class Student extends Person {
            constructor(name, age, grade) {
                super(name, age); //調用父類的構造函數
                this.grade = grade;
            }

            //重寫父類的成員函數
            getDetails() {
                return `${super.getDetails()} I am studying in grade ${this.grade}.`
            }
        }

        let person1 = new Person('John', 20);
        console.log(person1.getDetails()); //輸出My name is John, I am 20 years old.

        let student1 = new Student('Mike', 18, 5);
        console.log(student1.getDetails()); //輸出My name is Mike, I am 18 years old. I am studying in grade 5.
    

以上就是 ES6 入門教程的主要內容。通過學習以上內容，我們可以更加輕鬆地編寫優雅的 JavaScript 代碼。