ES6（2）：关于 let、var、const，三者区别

喜欢ヅ旅行 2022-12-08 12:53 88阅读 0赞

#### 一、`var`声明的变量会挂载在window上，而`let`和`const`声明的变量不会 ####

var a = 521;
    console.log(a,window.a);    // 521 521
    
    let b = 521;
    console.log(b,window.b);    // 521 undefined
    
    const c = 521;
    console.log(c,window.c);    // 521 undefined

![在这里插入图片描述][20201120110329937.png_pic_center]

#### 二、同一作用域下`let` 和`const`不能声明同名变量，而var可以 ####

let name = 'Tom';
    let name = 'Jack';
    console.log(name);

![在这里插入图片描述][20201120110749561.png_pic_center]

const name = 'Tom';
    const name = 'Jack';
    console.log(name);

![在这里插入图片描述][20201120110908611.png_pic_center]

var name = 'Tom';
    var name = 'Jack';
    console.log(name);

![在这里插入图片描述][20201120111025977.png_pic_center]

#### 三、`var`声明变量存在变量提升，`let`和`const`不存在变量提升 ####

console.log(career);  //undefined
    var career = '学生';

![在这里插入图片描述][20201120111458251.png_pic_center]

console.log(career);
    let career = '学生';

![在这里插入图片描述][2020112011142595.png_pic_center]

console.log(career);
    const career = '学生';

![在这里插入图片描述][20201120111549772.png_pic_center]

#### 四、`let`和`const`声明形成块作用域，只在代码块内有效 ####

{ 
    	let girl = 'Lili';
    }
    console.log(girl);

![在这里插入图片描述][20201120112257516.png_pic_center]  
换成var不报错：

{ 
    	var girl = 'Lili';
    }
    console.log(girl);

![在这里插入图片描述][20201120112412510.png_pic_center]

#### 五、`let`补充：不影响作用域链 ####

{ 
    	let school = '尚硅谷';
    	function fn(){ 
    		console.log(school);
    }
    fn();
    }

![在这里插入图片描述][20201120112556246.png_pic_center]

#### 六、`const`补充：声明的变量不可修改，而且必须赋初始值 ####

const a;

![在这里插入图片描述][20201120112846414.png_pic_center]

const a = 10;
    a = 20;
    console.log(a);

![在这里插入图片描述][20201120112917145.png_pic_center]

#### 七、`let`示例 ####

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center]  
  我们可以看到用`let`是可以实现点击效果的，但是如果改成 `var`，再用第二种写法 `items[i].style.background = 'pink';`就不可行了，大家可以试试。  
![在这里插入图片描述][20201120113532147.png_pic_center]  
  这是因为全局变量`i`出现了问题，改成 `var` 之后运行的代码其实是这样的，

{ 
    	var i = 0;
    }
    { 
    	var i = 1;
    }
    { 
    	var i = 2;
    }

三次循环之后，`i`做了个自增，此时`i`为3，因为没有块级作用域，所以`i`一直在全局中存在，可以打印一下`i`的值，

for(var i = 0;i<items.length;i++){ 
       items[i].onclick = function(){ 
            //修改当前元素的背景颜色
            //this.style.background = 'pink';
            items[i].style.background = 'pink';
        }
    }
    // { 
    // var i = 0;
    // }
    // { 
    // var i = 1;
    // }
    // { 
    // var i = 2;
    // }
    console.log(window.i);

![在这里插入图片描述][20201120151820948.png_pic_center]  
  故循环完成后，`i`的值变为了 3 ，此时点击小方块就会执行点击事件，点击事件的函数块儿中找不到`items[i]`就会去外层函数作用域里找，window下面的`i`等于3，所以会出现问题。

[20201120110329937.png_pic_center]: /images/20221123/04edc2d7c8ff462090b5777bea4b6b5d.png
[20201120110749561.png_pic_center]: /images/20221123/c6c19f0d5c454dd9bd857a5c8260bf04.png
[20201120110908611.png_pic_center]: /images/20221123/319eb12ce10a47c2aac9ec6231e2110b.png
[20201120111025977.png_pic_center]: /images/20221123/13a624e86cc5461ba7bdff676ca638cb.png
[20201120111458251.png_pic_center]: /images/20221123/7f9dc0dfe5634987a55e1d8769e5f576.png
[2020112011142595.png_pic_center]: /images/20221123/985821edb7a4454ea10e7599b3434f74.png
[20201120111549772.png_pic_center]: /images/20221123/3dc791ec6e96434ea024c4145eb91729.png
[20201120112257516.png_pic_center]: /images/20221123/dde46230f6a34210beca00cf78607fa5.png
[20201120112412510.png_pic_center]: /images/20221123/877d1fb319c3450f89e205a5dc26b813.png
[20201120112556246.png_pic_center]: /images/20221123/64c7db6d63954155979ed1df98d5ea49.png
[20201120112846414.png_pic_center]: /images/20221123/5025c762489e43cdb3f47db1971982e9.png
[20201120112917145.png_pic_center]: /images/20221123/dab45ab19b354095adafb207b4779f17.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/e1529eb0c39f4bc4aa60acb14065d530.png
[20201120113532147.png_pic_center]: /images/20221123/a21225a5043b42e7add8d5550f339a80.png
[20201120151820948.png_pic_center]: /images/20221123/68701e62ccb443468dc86ce577757597.png