es6

1.新的变量声明方式 let/const

let局部作用域,没有声明提前。

const 来声明一个值不会被改变的变量,也可以称之为常量。

var 如果重复声明,后面会覆盖前面,现在let不允许重复声明,

2.箭头函数

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

3.原型

在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);

4.字符串的拼接

以前我们字符串拼接" "+ +" ",而且进行换行等操作会异常麻烦,不换行在一行内又很难看清。

es6里面字符串拼接``就省去了很多麻烦,可以进行换行操作且没有影响,中间添加变量直接用${}不用"+"连接,修改起来也很方便。

str += `<ul> 
            <li>${uname}</li> 
            <li>nan</li> 
            <li>18</li> 
            <li>150123456878</li> 
            <li>xxx@xxx.com</li> 
        </ul>`

 

posted @ 2019-03-05 16:03  唐頔颖  阅读(189)  评论(2编辑  收藏  举报