4.ECMAScript6（ES6）- let和const的特征

timg (1).jpg

变量提升问题
不允许重复声明
块级作用域

1、变量提升问题

（1）变量在提升之前就可以使用

<script type="text/javascript">
        //变量在提升之前就可以使用
        console.log(a)
        var a=1
    </script>

image.png

（2）变量在提升之前不可以使用

<script type="text/javascript">
        //变量在提升之前不可以使用
        console.log(b)
        let b=2
    </script>

image.png

2、不允许重复声明

（1）ES5变量可以重复声明

<script type="text/javascript">
        //允许重复声明
        function ceshi(){
            var a=1
            var a=5
            console.log(a)
        }
        ceshi()
    </script>

image.png

（2）ES6变量不可以重复声明

    <script type="text/javascript">
        //不允许重复声明
        function ceshi(){
            var a=1
            let a=5  //注意这里,let是ES6的定义变量的操作方法
            console.log(a)
        }
        ceshi()
    </script>

<script type="text/javascript">
        //不允许重复声明
        function ceshi(){
            var a=1
            const a=5 //注意这里,const是ES6的定义变量的操作方法
            console.log(a)
        }
        ceshi()
    </script>

image.png

3、块级作用域

（1）ES6不允许函数内部声明参数

    <script type="text/javascript">
        function ceshi3(c){  //ceshi3函数内部声明一个参数c 
            let c   //再函数中重新声明参数
            console.log(c)
        }
        ceshi3()
    </script>

image.png

（2）改成ES5 var就可以了

    <script type="text/javascript">
        function ceshi3(c){  //ceshi3函数内部声明一个参数c 
            var c   //用var函数内重新声明参数
            console.log(c)
        }
        ceshi3()
    </script>

image.png

（3）声明块级作用域，就可以了（用{ }把let包起来，添加一个块级作用域）

    <script type="text/javascript">
        function ceshi3(c){  //ceshi3函数内部声明一个参数c 
            {let c   //再函数中重新声明参数
            console.log(c)}
        }
        ceshi3()
    </script>

image.png

（4）ES6中有一个暂时性死区，只要块级作用域内部存在let命令，它声明的变量就会绑定当前区域，不再会受外部区域的影响

①ES5 函数外声明的变量，函数内部可以修改

    <script type="text/javascript">
        var a='beijing'
        function ceshi4(){
            var a='shanghai'
            console.log(a)
        }
        ceshi4()
    </script>

image.png

②ES6 函数外如果有该变量了，函数内部重新赋值，再使用let就会报错

<script type="text/javascript">
        //暂时性死区
        var a='beijing'
        function ceshi4(){
            a='shanghai'
            let a
            console.log(a)
        }
        ceshi4()
    </script>

image.png

③ES6 函数外如果有该变量了， 函数内部let会绑定当前函数内部区域，不受外部影响

    <script type="text/javascript">
               //暂时性死区 
        var a='beijing'
        function ceshi4(){
            let a='shanghai'
            console.log(a)
        }
        ceshi4()
    </script>

image.png