一、定義變量

　　1、let

　　　　以前定義變量都是var，相對於var，let定義變量有其特殊的地方：

　　　　1.let沒有聲明提前

　　　　2.以前只有全局和函數，這裏多了一個塊級作用域 {}

　　　　3.var如果重復聲明，後面會覆蓋前面，現在，let不允許重復聲明

　　2、const

　　　　const用來定義常量，一次定義，後面不可以修改。

　　　　就算提前聲明後面賦值也是不能進行修改的，聲明的時候其值就已經為undefined，不能修改。

                const a;
        a = 100;
    

二、字符串的拼接

　　以前我們字符串拼接" "+ +" "，而且進行換行等操作會異常麻煩，不換行在一行內又很難看清。

　　es6裏面字符串拼接``就省去了很多麻煩，可以進行換行操作且沒有影響,中間添加變量直接用${}不用"+"連接，修改起來也很方便。

str += `<ul> 
            <li>${uname}</li> 
            <li>nan</li> 
            <li>18</li> 
            <li>150123456878</li> 
            <li>[email protected]</li> 
        </ul>`

三、數組的復制

　　... 超引用

　　我們用原來的方法復制一個數組，對復制出來的數組進行修改會改動原有數組。

var arr = [1,2,3,4,5];
        var arr2 = arr;
        arr2.push(6);
        console.log(arr);
        console.log(arr2)

　　es6中用...超引用就可以復制一個數組並進行相應的修改。

var arr4 = [...arr];
        arr4.push(6)
        console.log(arr);
        console.log(arr4)
 

四、解構賦值

　　讓賦值變得簡單，

// 讓你的賦值變得更簡單，方便
        var a = 10;
        var b = 20;
        var c = 30; 
        var a = 10,b = 20,c = 30;
        console.log(a,b,c)

        解構,數組的格式
        var [a,b,c] = [40,20,30];
        console.log(a,b,c)

        json格式
        var {a,b,c} = {a:10,c:30,b:20};    //可以調換順序
        console.log(a,b,c);

        var [a,[b,c],d] = [5,[10,20],30];  //格式對應即可
        console.log(a,b,c,d)


        // 解構
        var [{a,b},c,[d,e],f] = [{b : "jack",a : "100"},5,[10,20],30];
        console.log(a,b,c,d,e,f)

五、循環

　　先回顧一下es5中的循環：

　　　　for 遍歷數組

　　　　for in 遍歷obj

　　　 for each 遍歷obj

　　es6中的for of 循環，語法跟for in相同：

var arr = ["red","green","blue","yellow","black"];
        for(var i = 0;i < arr.length;i++){
            console.log(arr[i]);
        }

        for(var i in arr){
            console.log(i);   //輸出的是索引
            console.log(arr[i]);
        }

        for(var i of arr){
            console.log(i);   //輸出的直接是值
        }

　　但是，for of不能用來遍歷obj：

var json = {
            "a" : "black",
            "b" : "grenn",
            "c" : "yellow",
            "d" : "red",
            "e" : "blue"
        }
for(var name of json){   //for of 循環不能用來遍歷obj
            console.log(name);    //err
        }

六、Map對象

// map就是用來存東西的，跟obj類似
        var map = new Map();   
        // console.log(map);
        map.abc = "jack";
        map.age = "100";
        console.log(map);

        // 設置值  增 該
        map.set("a","red");
        map.set("b","green");
        // console.log(map)

        //查
        console.log(map.abc);
        console.log(map.get(‘a‘));

        // 刪除
        delete map.abc;
        delete map.a;
        map.delete("a");
        console.log(map)

　　另外，Map對象可以通過for of進行遍歷：

var map = new Map();
        map.set("a","red");
        map.set("b","green");
        map.set("c","blue");
        map.set("d","yellow");
        map.set("e","black");
for(var index of map.entries()){    //全寫
            console.log(index);
        }

        // 只想循環key
        for(var key of map.keys()){
            console.log(key);
        }


        // 只想循環value
        for(var value of map.values()){
            console.log(value);
        }

七、箭頭函數

　　es6裏面的箭頭函數除了寫法不同外，比較需要註意的點就在不能用this，也不能用arguements：

var box = document.getElementById("box");
        // box.onclick = function(){
        //     fun();
        // }
        // function fun(){
        //     this.style.background = ‘#f00‘; 
        // }
        box.onclick = () => {
            this.style.background = ‘#f00‘; 
        }

        // function fun(){
        //     console.log(arguments);
        // }
        var fun = () => {
            console.log(arguments);
        }

        fun(1,2,3,4)

        // 註意的地方
        // 1.不能用this，箭頭函數中的this指向window
        // 2.不能使用arguments

八、原型

　　在ES6以前，必須有類和構造，在ES6以前是沒有類的概念，構造函數即是構造，也是類、到了ES6，就將其完全劃分開了：

// class 類
        // constructor  構造函數
        class Person{   //類
            constructor(name,age){    //構造
                this.name = name;
                this.age = age;
            }
            showName(){
                return this.name;
            }
            showAge(){
                return this.age;
            }
        }
        var person = new Person("jack",18);
        // var person2 = new Person("mack",20);
        // console.log(person.showName === person2.showName)
        // console.log(person.constructor === Person)


        // 繼承
        // class Student extends Person{};
        // var student = new Student("mack",50);
        // console.log(student);



        class Student extends Person{
            constructor(name,age,pid){
                // this.name = name;
                // this.age = age;
                super(name,age);
                this.pid = pid;
            }
            showPid(){
                return this.pid;
            }
        }

        var student = new Student("mack",50,"00001");
        console.log(student);

es6中一些不一樣的地方