一、let变量的声明以及特性

1.let变量的声明

（1）直接声明

 let a;

（2）声明几个变量

let b,c,d;

（3）声明并赋值

let e = 100;

（4）声明几个变量并赋值

let f = 521, g = 'iloveyou', h = [];

2.let变量的特性

（1）变量不能重复声明（var声明可以重复声明）

案例1：

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

运行结果：报错
案例1运行结果
案例2：

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

运行结果：不报错

（2）块级作用域（es5有块级作用域、函数作用域、eval作用域）

块级作用域：只在代码块有效，出了代码块就无效
案例1：

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

运行结果：报错
在这里插入图片描述
案例2：

{
   var girl = '周扬青';
}
console.log(girl);

运行结果：不报错
原因：因为var在代码这块它没有块级作用域，所以它会往全局的window去添加属性，所以我们可以读取到
if else while for这些语句里面如果用let也是块级作用域

（3）不存在变量提升

案例1：

console.log(song);
var song = '恋爱达人';

运行结果：不报错
在这里插入图片描述
原因：相当于把变量提前声明了但不赋值，即如下：

var song;
console.log(song);
song = '恋爱达人';

案例2：

console.log(song);
let song = '恋爱达人';

运行结果：报错
在这里插入图片描述

（4）不影响作用域链

案例1：

{
      let school = '学校';
      function fn(){
        console.log(school);
      }
      fn();
}

运行结果：不报错
原因：fn函数内没有school，它就会像上一层去找school，就找到了let school = ‘学校’;

二、let的经典案例实践

实现效果，有三个div，当点击每个div时，让其颜色变成粉色

在这里插入图片描述

1.实现方式一：

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

2.实现方式二：

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

3.错误方式：

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