ES6-02-let和const关键字

本文深入探讨JavaScript中的变量声明,重点解析var、let和const的区别。通过代码示例,解释了代码块的理解、变量的作用域、变量提升以及临时死区的概念。强调let如何解决var的变量提升问题,const如何创建不可变的常量。最后,通过实际的笔试题,展示了在不同场景下正确使用这些关键字的重要性。
摘要由CSDN通过智能技术生成

1.理解代码块是理解let、const的前提:

            (1)var obj={name:"karen"}  对象

            (2)var fn=function(){}   函数

            (3){}或者if(){}或者for(){}   代码块

这些都属于代码块。

<script>
        // 例1:此处var是全局变量
        {
            var a=20;
            var b=30;
            console.log(a);
        }
        console.log(b);
</script>

运行结果为:20  30 

<script>
    // 例2:
    if(true){
        var a=10;
        console.log(a);
    }   
    console.log(a);
</script>

运行结果为:10   10      此处两个a都打印了

<script>
    // 例3:
    if(false){
        var a=10;
        console.log(a);
    }   
    console.log(a);
</script>

运行结果为:undefined

分析:因为if条件为false,里面的代码不运行,所以a就没有定义和赋值,也不会运行if语句块里面的打印语句;第二个打印语句对a有隐式的声明,但没赋值,所以结果为undefined。

<script>
        // 代码块的体现:如果我想跳过i=1的循环,而不是里面的循环
        mylabel:for(var i=0;i<3;i++){
            for(var j=0;j<5;j++){
                if(i=1){
                    continue mylabel;
                }
            }
        }
</script>

2.ES6新的变量修饰符let关键字

        首先要清楚:var:可以声明的时候不赋值、 可以先访问再声明、可以声明相同的变量名;

                              let:也可以声明的时候不赋值、不可以先访问再声明、不可以声明相同的变量名

<script>
        // 块级作用域:
        {
            let a=100;
            console.log(a,"第一个a")
            a="hello";
            console.log(a,"第二个a")

        }
        console.log(a,"第三个a")

 </script>

运行结果为:100 第一个a    hello 第二个a    报错

分析:100、hello顺寻执行没有问题,第三次报错是因为let声明的a有作用域,是个局部变量,而第三次打印时,全局变量没有定义a,所以找不到a就报错

<script>
        for(var i=0;i<10;i++){
            setTimeout(function(){},100)
        }
        console.log(i)
</script>

 运行结果为:

     

<script>
        for(let i=0;i<10;i++){
            setTimeout(function(){
                console.log(i)
            },100)
        }
        console.log(i)
</script>

运行结果为:

分析:第一次打印是for循环外面的i,此处的i没有声明;接着才运行for循环里面的函数,打印函数里面的i。(let关键字是有作用域的)

<!-- 笔试题 -->、
    <script>
        let a=90;
        if(false){
            console.log(a)
            var a=20;
        }
        console.log(a)
    </script>

 运行结果为:报错

分析:因为let声明的a和var声明的a在同一作用域,而let关键字在同一作用域不能声明同名变量;此处虽然if的条件为false,但var根据形实函运的顺序,var a;被隐式声明了,它与let声明的a都存在于全局变量,所以会报错。

<!-- 笔试题 -->、
    <script>
        let a=90;
        if(false){
            console.log(a)
            let a=20;
        }
        console.log(a)
    </script>

运行结果为:90

分析:let关键字不会隐式提升,所以当if不成立时,里面的代码没有运行,所以结果为90

<!-- 笔试题 -->、
    <script>
        if(true){
            let a=20;
        }
        console.log(a)
    </script>

结果会报错,因为let有作用域,let会形成暂时性死区

<!-- 笔试题 -->、
    <script>
        let a=90;
        if(true){
            console.log(a)
            let a=20;
        }
    </script>

结果会报错

分析:if里面的let形成暂时性死区,打印语句就识别不了外面的a,就识别里面的a,里面的a是用let声明的,且位于打印语句之后,就报错了。

3.js的常量修饰符 const

        const修饰的常量不可以被修改。相当于只能初始化一次(初始化:第一次赋值),且const关键字在声明的时候就必须赋值。

<script>
        const a=60;
        a=80;
</script>

运行结果为:报错          因为const关键字只能初始化一次,值不能被修改。

<script>
        const b;
        b=30;
</script>

运行结果为:报错           因为const关键字在声明的时候就必须初始化。

        修饰标识符的只有var、let、const、function这四个关键字。

                

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值