一、新的變數宣告方式 let/const

{
    let _a = 20;
}

console.log(a);  // a is not defined
// ES5
console.log(a);   // undefined
var a = 20;

// ES6
console.log(a); // a is not defined
let a = 20;

二、 箭頭函式的使用

• 箭頭函式可以替換函式表示式，但是不能替換函式宣告

// es5
var fn = function(a, b) {
    return a + b;
}

// es6 箭頭函式寫法，當函式直接被return時，可以省略函式體的括號
 

const fn = (a, b) => a + b;

// es5
var foo = function() {
    var a = 20；
    var b = 30;
    return a + b;
}

// es6
const foo = () => {
   const a = 20;
   const b = 30;
   return a + b;
}

• 箭頭函式中，沒有this指向

var person = {
    name: 'tom',
    getName: function() {
        return this.name;
    }
}

 
// 我們試圖用ES6的寫法來重構上面的物件
const person = {
    name: 'tom',
    getName: () => this.name
}

// 但是編譯結果卻是
var person = {
    name: 'tom',
    getName: function getName() {
        return undefined.name;
    }
};

三、模板字串

• 使用 `` 將整個字串包裹起來，而在其中使用 ${} 來包裹一個變數或者一個表示式

// es6
const a = 20;
const b = 30;
const string 
 
= `${a}+${b}=${a+b}`;

// es5
var a = 20;
var b = 30;
var string = a + "+" + b + "=" + (a + b);

四、 解析結構

• 陣列以序列號一一對應，這是一個有序的對應關係。
• 而物件根據屬性名一一對應，這是一個無序的對應關係。
• 根據這個特性，使用解析結構從物件中獲取屬性值更加具有可用性

// 首先有這麼一個物件
const props = {
    className: 'tiger-button',
    loading: false,
    clicked: true,
    disabled: 'disabled'
}

// es5
var loading = props.loading;
var clicked = props.clicked;

// es6
const { loading, clicked } = props;

// 給一個預設值，當props物件中找不到loading時，loading就等於該預設值
const { loading = false, clicked } = props;

五、 函式預設引數

// es5
function add(x, y) {
    var x = x || 20;
    var y = y || 30;
    return x + y;
}
console.log(add()); // 50

// es6 
function add(x = 20, y = 30) {
    return x + y;
}

console.log(add());

六、 展開運算子

• 在ES6中用...來表示展開運算子，它可以將陣列方法或者物件進行展開

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 10, 20, 30];
// 這樣，arr2 就變成了[1, 2, 3, 10, 20, 30];

七、物件字面量 與 class

• 物件字面量：當屬性與值的變數同名時，可以只寫一個

const name = 'Jane';
const age = 20

// es6
const person = {
  name,
  age
}

// es5
var person = {
  name: name,
  age: age
};

• Class類

    <script>
        // 定義一個名為Person的類 人類
        class Person {
            static sList = []; // 靜態成員
            // 構造器 - 一般定義類屬性
            constructor(name, age) {
                this.name = name;
                this.age = age;
            }

            // 原型方法
            eat() {
                console.log(this.name + '在吃飯');
            }

            // 成員方法-箭頭函式
            sayHi = (content) => {
                console.log(`${this.name}說的內容是 ${content}`);
            }
        }

        // 例項化物件
        let p1 = new Person('小麗', 22);
        let p2 = new Person('小紅', 21);

        console.log('姓名是 ', p1.name);
        p1.eat();
        console.dir(Person)
        console.dir(p1)
        console.dir(p2)

        p1.sayHi('今天學習javascript高階內容');
    </script>

八、es6繼承 extends

• 只需要一個extends關鍵字，就可以實現繼承了，不用像ES5那樣去擔心建構函式繼承和原型繼承，除此之外，我們還需要關注一個叫做super的方法。
• 在繼承的建構函式中，我們必須如上面的例子那麼呼叫一次super方法，它表示建構函式的繼承，與ES5中利用call/apply繼承建構函式是一樣的功能

    <script>
        // 父
        class Person {
            constructor() {
                this.name = name;
                this.age = age;
            }
        }

        // 子 (extends Person 繼承父類)
        class Student extends Person {
            constructor(name,age,number, score) {
                // super()呼叫父類建構函式
                super()
                this.number = number;
                this.score = score;
            }
        }
        // 呼叫子類
        let s1 = new Student('中國人',22,101,99);
        // 子類呼叫繼承自父類的屬性
        s1.name();
    </script>