当前位置：首页 > news >正文

【ES】笔记-let 声明及其特性

news 2025/7/1 15:22:07

let 声明及其特性

声明变量
- 变量赋值、也可以批量赋值

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

变量不能重复声明

         let star='罗志祥';let star='小猪';

在这里插入图片描述

块级作用域，let声明的变量只在块级作用域内有效

        {let girl='周杨青';}console.log(girl)

注意：在 if else while for 中使用let都是块级作用域
在这里插入图片描述

不存在变量提升

使用var(存在变量提升)

	console.log(girl);var  girl = "小刘同学"// 打印结果:undefined

使用let(不存在变量提升)

 	console.log(girl);let  girl = "小刘同学"// 报错:ncaught ReferenceError: Cannot access 'girl'

注：变量提升就是在变量创建之前使用（比如输出：输出的是默认值），let不存在，var存在

不影响作用域链

        {let school='德仔同学';function fn(){console.log(school);}fn();// 打印结果:小刘同学}

注：作用域链是代码块内有代码块，跟常规编程语言一样，上级代码块中的局部变量下级可用

let使用案例：
html代码

   <style>.item {width: 100px;height: 50px;border: solid 1px rgb(42, 156, 156);float: left;margin-right: 10px;}</style><body><div class="container"><h2 class="page-header">let案例：点击div更改颜色</h2><div class="item"></div><div class="item"></div><div class="item"></div></div></body>

JavaScript代码

// 获取class名为item的元素
let items = document.querySelectorAll(".item")// 遍历绑定元素
for(let i=0;i<items.length;i++){items[i].onclick = function(){// 修改当前元素的背景颜色// 写法一// this.style.background = 'pink'// 写法二:items[i].style.background = "pink"}
}

写法二注意事件
在for循环是使用的 i 必须要使用let声明
如果使用var就会报错(原因：var是全局变量)
经过循环之后i的值会变成3,items[i]就会下表越界
let是局部变量
我们要知道点击的时候 i 是那个值

   //使用var相当于是:{ var i = 0; }{ var i = 1; }{ var i = 2; }{ var i = 3; }// 下面的声明会将上面的覆盖掉，所以点击事件每次找到的都是3// 而使用let使用var相当于是:{ let i = 0; }{ let i = 1; }{ let i = 2; }{ let i = 3; }// 由于let声明的是局部变量，每一个保持着原来的值// 点击事件调用的时候拿到的是对应的 i