一、Let关键字

（一）页面结构

<div class="container">
  <h2 class="page-header">点击切换颜色</h2>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

.item {
  width: 80px;
  height: 40px;
  border: 2px solid lightblue;
  display: inline-block;
}

（二）声明变量

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

（三）特性

1.变量不能重复声明

• var 无此限制

let star = "伊東";
let star = "itokashitaro";
// Uncaught SyntaxError: Identifier 'star' has already been declared

var star = "伊東";
var star = "itokashitaro";

2.块级作用域

1）ES5

• eval 作用域【es5 严格模式才会出现】
• 全局作用域
• 函数作用域

2）ES6

• eval 作用域【es5 严格模式才会出现】
• 全局作用域
• 函数作用域
• 块级作用域
  • let 只在声明变量的代码块中有效
    • {}
    • if{}
    • else{}
    • while{}
    • for{}

{
  let girl = "祢豆子";
}
console.log(girl);
// Uncaught ReferenceError: girl is not defined

{
  var girl = "祢豆子";
}
console.log(girl);
// 祢豆子

3.不存在变量提升

• 代码执行前会查找变量和函数
• 若未定义则赋初始值 undefined

console.log(song);
var song = "伊豆的舞女";
// undefined（执行时未查找到song，相当于在console前自动补充了：var song;所以不会报错并输出undefined）

console.log(song);
let song = "伊豆的舞女";
// Uncaught ReferenceError: Cannot access 'song' before initialization

4.不影响作用域链

• 块级作用域内部函数体仍有效

{
  let name = "ikuko";

  function fn() {
    console.log(name);
    // 函数体内没有name，向上一级寻找
  }
  fn();
}
// ikuko

（四）案例实操 —— 点击方块切换颜色

// 获取div元素对象
let items = document.getElementsByClassName("item");
// 遍历并绑定事件
for (var i = 0; i < items.length; i++) {
  items[i].onclick = function () {
    // 修改当前元素的背景色
    // this.style.background = 'pink';

    items[i].style.background = "pink";
    // Uncaught TypeError: Cannot read properties of undefined (reading 'style')
    /*
     * 循环执行如下：
     * {var i = 0;}{var i = 1;}{var i = 2;}
     * 由于var变量没有块级作用域，所以i变量一直存在于全局
     * 循环结束时，i已经变为3，点击执行回调函数时找不到i，向外层window找i，找到了items[3]
     */
  };
}
console.log(window.i);
// 3

• 将 var 改为 let 即可
• 循环执行如下：
  • 三个代码块中的 i 互不影响
  • 点击执行回调函数时找不到 i
  • 向外层找 i ，找到了 let 声明的 i

for (let i = 0; i < items.length; i++) {
  items[i].onclick = function () {
    items[i].style.background = "pink";
  };
}
// // 循环如下：
// {
//     let i = 0;
//     items[i].onclick = function() {
//         items[i].style.background = 'pink';
//     }
// } {
//     let i = 1;
//     items[i].onclick = function() {
//         items[i].style.background = 'pink';
//     }
// } {
//     let i = 2;
//     items[i].onclick = function() {
//         items[i].style.background = 'pink';
//     }
// }