ES6(一)let的基本使用

Javascript 496849654@qq.com 4年前 (2020-07-04) 922次浏览 0个评论

基本用法

ES6 新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。

<script>
{
   var a = 10;
   let b = 20;
}
document.write(a);
document.write(b); //b is not defined
</script>

for循环的计数器,就很合适使用let命令。

<script>
        for(var i = 0 ;i< 10;i++)
        {
            console.log(i)
        }
        console.log(i) //10
        for(let j = 0 ;j< 10;j++)
        {
            console.log(j)
        }
        console.log(j) // j is not defined
</script>

下面的代码如果使用var,最后输出的是10。

<script>
        var a=[];
        for(var i=0;i<10;i++)
        {
            a[i]=function(){
                console.log(i)
            }
        }
        a[6]() //10
</script>

如果使用let,声明的变量仅在块级作用域内有效,最后输出的是 6。

<script>
        var a = [];
        for(let j=0;j<10;j++){
            a[j]=function(){
                console.log(j)
            }
        }
        a[6]() //6
</script>

另外,for循环还有一个特别之处,就是设置循环变量的那部分是一个父作用域,而循环体内部是一个单独的子作用域。

<script>
        for(let i = 0; i<3;i++)
        {
            let i= 'abc';
            console.log(i) //输出3次abc
        };
        for(var j = 0;j<3;j++)
        {
            var j= 'cbd';
            console.log(j) //输出1次cbd
        }
</script>

不存在变量提升

var命令会发生“变量提升”现象,即变量可以在声明之前使用,值为undefined。

<script>
        console.log(oVar); //undefined
        var oVar = 123; 

        console.log(OLet); //Uncaught ReferenceError OLet is not defined
        let oLet =  456;

</script>

css315 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:ES6(一)let的基本使用
喜欢 (3)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到