目录
特性:
let 关键字用来声明变量,使用 let 声明的变量有几个特点:
- 不允许重复声明
- 块儿级作用域(局部变量)
- 不存在变量提升
- 不影响作用域链
let创建变量代码示例
// let关键字使用示例:
let a; // 单个声明
let b,c,d; // 批量声明
let e = 100; // 单个声明并赋值
let f = 521, g = 'iloveyou', h = []; // 批量声明并赋值
一、不允许重复声明
代码实现
// 1. 不允许重复声明;
let dog = "狗";
let dog = "狗";
// 报错:Uncaught SyntaxError: Identifier 'dog' has already been
declared
运行结果
![image-20210311171139262](https://i-blog.csdnimg.cn/blog_migrate/aa08b6a621fec337451b0921cf5d8ca4.png)
二、块儿级作用域(局部变量)
代码实现
// 2. 块儿级作用域(局部变量);
{
let cat = "猫";
console.log(cat);
}
console.log(cat);
// 报错:Uncaught ReferenceError: cat is not defined
}
运行结果
![image-20210311171615066](https://i-blog.csdnimg.cn/blog_migrate/25aa577247a2d680770b1982af5c2711.png)
三、不存在变量提升
什么是变量提升:
就是在变量创建之前使用(比如输出:输出的是默认值),let不存在,var存在
代码实现
// 3. 不存在变量提升;
// 什么是变量提升:就是在变量创建之前使用(比如输出:输出的是默认值),let不存在,var存在;
console.log(people1); // 可输出默认值
console.log(people2); // 报错:Uncaught ReferenceError: people2 is no
defined var people1 = "大哥"; // 存在变量提升
let people2 = "二哥"; // 不存在变量提升
运行结果
![image-20210311172338246](https://i-blog.csdnimg.cn/blog_migrate/77d19c8bbbb2dc308bf653eea5a11d52.png)
四、不影响作用域链
代码实现
// 4. 不影响作用域链;
// 什么是作用域链:很简单,就是代码块内有代码块,跟常规编程语言一样,上级代码块中
的局部变量下级可用
{
let p = "大哥";
function fn(){
console.log(p); // 这里是可以使用的
}
fn();
}
运行结果
![image-20210311172613296](https://i-blog.csdnimg.cn/blog_migrate/fa9e67d137d030ebd76926cf103ec63a.png)
六、全部演示代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>let</title>
</head>
<body>
<script>
// let 关键字使用示例
let a; // 单个声明
let b, c, d; // 批量声明
let e = 100; // 单个声明并赋值
let f = 521, g = 'iloveyou', h = []; // 批量声明并赋值
// let 关键字特性
// 1. 不允许重复声明;
// let dog = "狗";
// let dog = "狗";
// 报错:Uncaught SyntaxError: Identifier 'dog' has already been declared
// 2. 块儿级作用域(局部变量);
// {
// let cat = "猫";
// console.log(cat);
// }
// console.log(cat);
// 报错:Uncaught ReferenceError: cat is not defined
// 3. 不存在变量提升;
// 什么是变量提升:就是在变量创建之前使用(比如输出:输出的是默认值),let不存在,var存在;
// console.log(people1); // 可输出默认值
// console.log(people2); // 报错:Uncaught ReferenceError: people2 is not defined
// var people1 = "大哥"; // 存在变量提升
// let people2 = "二哥"; // 不存在变量提升
// 4. 不影响作用域链;
// 什么是作用域链:很简单,就是代码块内有代码块,跟常规编程语言一样,上级代码块中的局部变量下级可用
// {
// let p = "大哥";
// function fn(){
// console.log(p); // 这里是可以使用的
// }
// fn();
// }
</script>
</body>
</html>
应用场景:
以后声明变量使用 let 就对了
七、let案例:点击div更改颜色
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>let案例:点击div更改颜色</title>
<link crossorigin="anonymous" href="https://cdn.bootcss.com/twitterbootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style>
.item {
width: 100px;
height: 50px;
border: solid 1px rgb(42, 156, 156);
float: left;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="container">
<h2 class="page-header">let案例:点击div更改颜色</h2>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<script>
// 获取div元素对象
let items = document.getElementsByClassName('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相当于是:
// { let i = 0; }
// { let i = 1; }
// { let i = 2; }
// { let i = 3; }
// 由于let声明的是局部变量,每一个保持着原来的值
// 点击事件调用的时候拿到的是对应的i
}
}
</script>
</body>
</html>
运行结果
![image-20210311173608354](https://i-blog.csdnimg.cn/blog_migrate/9178d5f5678df25ef8c2ad1dda6262ba.png)