一、新的變量聲明方式 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}+$=${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 = []; // 靜態(tài)成員
            // 構造器 - 一般定義類屬性
            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>