zoukankan      html  css  js  c++  java

  • ES5与ES6的小差异

    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'