es6中一些不一样的地方

一、定义变量

　　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>xxx@xxx.com</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);