ES5与ES6的小差异

　　变量的定义

　　ES6与ES5的区别

　　ES5:

<script>
　　 console.log(username);

    var username;

    var username = 'longda';

    console.log(username);

</script>

　　打印结果:

　　分析上边的代码,发现第一个console.log()居然打印出了undefined,可是在这个之前并没有声明username这个变量.之所以会出现这种情况的原因是ES5的一个特性,这种情况被称为变量提升.

　　ES6:

<script>

    console.log(username);

    let username = 'LongDa';

</script>

　　代码执行结果:

　　分析上边的结果,ES6中使用let声明变量,在声明之前打印,结果将会报错.也就说明ES6不存在变量提升这种特性.

　　var和let定义的变量的区别

　　var定义的变量:

　　　　只有全局作用域和函数作用域.

　　let定义的变量:

　　　　有全局作用域和函数作用域、块级作用域。

<script>

    if (true) {

        var username = 'longda';

        let age = 18;

    }

    console.log(username);

    console.log(age);

</script>

　　执行结果：

　　分析打印结果，由于let拥有块级作用域，而通常一个大括号（{}）就理解为一个作用域，打印age是在块级作用域外打印的，所以会报错显示变量未定义。

　　let不能重复定义变量。

<script>

    var username = 'longda';

    var username = 'xiaomo';

    console.log(username);

</script>

　　打印结果如下：

　　分析打印结果，var可以重复定义变量。

<script>
　　 var username = 'longda';
    let username = 'xiaoxiaomo';

    console.log(username);
</script>

　　打印结果如下：

　　分析打印结果，提示username这个变量已经存在，所以说let不能重复定义变量。

　　模板字符串

<body>

<div id="app"></div>

<script>

    let oDiv = document.getElementById('app');

    oDiv.innerHTML = '<h1>Hello LongDa' +

        '<h2>Hello XiaoMo</h2>' +

        '</h1>';

</script>

</body>

　　代码执行结果：

　　当使用innerHTML方法进行代码拼接是，代码片段之间用加号（+）连接。

<body>

<div id="app"></div>

<script>

    let oDiv = document.getElementById('app');

    let username1 = 'LongDa';

    let username2 = 'XiaoMo';

    oDiv.innerHTML = `

        <h1>Hello ${username1}</h1>

        <h2>Hello ${username2}</h2>

    `

</script>

</body>

　　代码执行结果如下：

　　也可以使用反引号（``）包含代码段，代码直接按照原来的格式直接书写就可以。

　　反引号中的代码片段可以进行变量赋值替换，可以提高代码的灵活性，使用${变量名}。

　　数据结构和赋值

　　数组

<script>

    let ary = [1, 2, 3];

    let [a, b, c] = ary;

    console.log(a, b, c);

</script>

　　打印结果如下：

　　分析代码，发现ES6支持多变量同时赋值。

　　对象

<script>

    let obj = {

        username: 'LongDa',

        age: 18,

    };

    let {username, age} = obj;

    console.log(username, age);

</script>

　　代码执行结果如下：

<script>

    let obj = {

        username: 'LongDa',

        age: 18,

    };

    let {username: user, age: age1} = obj;

    console.log(user, age1);

</script>

　　代码执行结果：

　　两个代码比较发现，赋值不同，但是打印的结果相同。let {username: , age: }中username对应的值没写时，默认使用username，age同样也是。第二个示例则是自定义变量的名字。

　　图示：

　　两个变量交换值

<script>

    let a = 1;

    let b = 2;

    [a, b] = [b, a];

    console.log(a, b);

</script>

　　代码执行的结果：

　　执行结果显示，变量交换值成功。

　　函数的扩展

<script>

    // 默认参数

    function foo(x, y=10) {

        let number = y;

        return number;

    }

    ret = foo(1, 2);

    ret1 = foo(1);

    ret2 = foo(1, 0);

    console.log(ret);

    console.log(ret1);

    console.log(ret2);

</script>

　　当y不传参数时，使用默认值；当传参数时，使用传过来的值。

　　箭头函数

<script>

    // 箭头函数

    // 一个参数

    let foo = v => v;

    ret = foo(10);

    console.log(ret)

</script>

　　代码打印结果：

<script>

    // 箭头函数

    // 0个或者多个参数

    let bar = (x, y) => {

        return x + y;

    };

    ret = bar(1, 2);

    console.log(ret)

</script>

<script>

    function foo() {

        console.log(this);

    }

    let bar = () => console.log(this);

    let obj = {

        foo: foo,

        bar: bar,

    };

    foo();

    obj.foo();

    obj.bar();

</script

　　打印结果：

　　foo()是普通函数，他的this是全局的；

obj.foo()是通过obj这个对象调用的这个this就是指向的谁；

obj.bar()中bar()是箭头函数，指向的是箭头函数。

　　类

　　ES5定义类:

    function Person() {

        this.username = 'LongDa';

        this.age = 20;

    }  // 函数

    Person.prototype.showInfo = function () {

        console.log(this.username, this.age);

    };  // 定义显示方法

    let LongDa = new Person();  // 实例化

    LongDa.showInfo()  // 调用定义的方法

　　代码打印结果：

　　ES6定义类：

<script>

    class Person{

        constructor (username, age) {

            this.username = username;

            this.age = age;

        }  // 定义类

        showInfo() {

            console.log(this.username, this.age);

        }

    }  // 定义方法

    let XiaoMo = new Person('XiaoMo', 18);  // 实例化方法

    XiaoMo.showInfo();  // 调用方法

</script>

　　代码打印结果：

　　ES6中类的继承

<script>

　　 // 父类

    class LongDa {

        constructor (username, age, account=10000) {

            this.username = username;

            this.age = age;

            this.account = account;

        }

        showInfo() {

            console.log(this.username, this.age, this.account);

        }

    }

　　 // 子类继承父类

    class XiaoMo extends LongDa {

        constructor(username, age) {

            super();

            this.username = username;

            this.age = age;

        }

    }

    let xiaoMo = new XiaoMo('XiaoMo', 18);

    xiaoMo.showInfo();

</script>

　　代码打印结果：

单体模式

<script>

    let obj = {

        name: 'LongDa',

        foo() {

            console.log(this.name);

        }

    };

    obj.foo()

</script>

　　代码打印结果：