ES6 let变量声明以及声明特性

成虚员

已于 2023-04-07 23:07:12 修改

阅读量71

点赞数

分类专栏： ES6 文章标签： es6 javascript 前端

于 2023-04-07 19:08:12 首次发布

本文链接：https://blog.csdn.net/m0_48546501/article/details/130018695

版权

ES6 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

ES6 let变量声明以及声明特性

1.声明变量

let a;
let a,b,c;
let e=100;
let f=521,g='sgag',h=[];

2.变量不能重复声明,会报错

let name = 'ming';
let name = 'helo';

3.不存在变量提升

//不会报错，只会显示undefined
console.log(song);
var song = '123';

//会报错，不允许在变量声明以前使用
console.log(song);
let song = '123';

4.不影响作用域链

5.注意let和const具有块级作用域，var不存在块级作用域

<style>
    .item{
        width: 100px;
        height: 60px;
        border: 1px solid black;
    }
</style>
<body>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</body>
</html>
<script>
    var item=document.getElementsByClassName('item');
    for(var i=0;i<item.length;i++){
        item[i].onclick=function(){
            item[i].style.background='pink';   
//会报错，i的值为3，因为var没有块级作用域，所以i的值为全局变量，通过for循环i值变为3
            console.log(this)
        }
    }
</script>

但是可以使用this来只指向每一个点击的按钮，就可以正常运行

 this.style.background='pink';

let具有块级作用域，不会报错

{
item[0]
}

{
item[1]
}

{
item[2]
}

<script>
    var item=document.getElementsByClassName('item');
    for(let i=0;i<item.length;i++){
        item[i].onclick=function(){
            item[i].style.background='pink';   
            console.log(this)
        }
    }
</script>