关于let 和var 声明的选项卡

首先简单布局一下:

<div id="tab-ctrl">

<div class="tab-list">

    <span class="active">娱乐</span>

    <span>新闻</span>

    <span>体育</span>
</div>

<ul>
<li class="active">11111111</li>

<li>22222222</li>

<li>33233333</li>

</ul>

</div>

js代码的编写:

<script>

var tabCtrl=document.querySelector("#tab-ctrl");

var tabList=tabCtrl.querySelectorAll('.tab-list span')

var conCtrl=tabCtrl.querySelectorAll('ul li');

var index=0;// 自定义tab的索引

var len=tabList.length;

//var不存在块级作用域

for(var i=0;i<len;i++){
(function(i){

    tabList[i].addEventListener('mouseenter',function(){
        
    tabList[index].className=conCtrl[index].className=''
    this.className=conCtrl[i].className='active'
    index=i
    
     

})
    
})(i)

       
}

//let存在块级作用域 在这里相当于加了一个自定义属性

for(let i=0;i<length;i++){
tabList[i].addEventListener('mouseenter',function(){

        for(var j=0;j<length;j++){

tabList[j].className=conCtrl[j].className=''

this.className=conCtrl[i].className='active'
}

})

}


</script>

使用`var`声明变量时存在一些潜在的风险,这些风险主要源于`var`的作用域和提升机制: 1. **函数作用域**:`var`声明的变量具有函数作用域或全局作用域。如果在函数外使用`var`声明变量,它将成为全局变量。这意味着在代码的任何地方都可以访问和修改该变量,可能导致意外的副作用和难以追踪的错误。 2. **变量提升(Hoisting)**:`var`声明的变量会被提升到其所在作用域的顶部,但初始化不会被提升。如果在声明之前使用`var`声明的变量,会得到`undefined`而不是错误。这可能导致难以发现的逻辑错误,尤其是在复杂的函数或条件语句中。 ```javascript console.log(myVar); // 输出 'undefined', 不会报错 var myVar = 5; ``` 3. **重复声明**:`var`允许在同一作用域内重复声明同一个变量,这可能不是故意的,会导致意外的行为或难以发现的错误。 ```javascript var myVar = 3; var myVar = 5; // 这里重复声明了myVar,覆盖了之前的值 ``` 相比之下,使用`let`声明变量可以避免这些风险: 1. **块级作用域**:`let`声明的变量具有块级作用域,即它们只在包含它们的代码块(例如函数、if语句、for循环等)内有效。这有助于防止变量污染全局作用域,并使代码更加模块化和易于维护。 2. **无提升**:使用`let`声明变量不会发生变量提升。这意味着在声明之前尝试访问`let`变量会导致引用错误(ReferenceError),这有助于捕捉潜在的错误。 3. **避免重复声明**:在相同的块级作用域内,不允许使用`let`重复声明同一个变量。这有助于防止意外覆盖变量。 ```javascript let myVar = 3; let myVar = 5; // SyntaxError: Identifier 'myVar' has already been declared ``` 总结来说,`let`提供了一种更安全、更可预测的方式来声明变量,而使用`var`可能会引入一些潜在的错误和问题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值