let 关键字用来声明变量，使用 let 声明的变量有几个特点：
- 不允许重复声明；
- 块儿级作用域（局部变量）；
- 不存在变量提升；
- 不影响作用域链；
1. 不允许重复声明
let dog = "狗";
let dog = "狗";
// 报错：Uncaught SyntaxError: Identifier 'dog' has already been declared
2. 块儿级作用域（局部变量）
if、 else、 while、 for、{}
{
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();
}
应用场景(for循环中的let)
<!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/twitter- bootstrap/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>
