JavaScript ES6学习之新增变量let

「爱情、让人受尽委屈。」 2022-11-09 14:23 202阅读 0赞

**一、基本知识**

let是JavaScript ES6中新增的一个用于声明变量 的关键字。  
（1）特点：  
①let只对变量所处的块级有效：（这里的块级就比如一个大括号）  
例如：

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>HOME</title>
    </head>
    <body>
    <script type="text/javascript"> 
       if(true){
        
        var userName = '崇志';
        let num = 100;
    }
    console.log(userName);
    console.log(num);
    </script>
    </body>
    </html>

![在这里插入图片描述][20210315193349947.png_pic_center]  
从上图，我们可以发现：var和let初始化语句都在if\{\}内，而它们的执行语句都在if\{\}外，由于let只对变量所处的块级有效，所以只有var声明的userName执行了出来而let声明的num显示没有被定义到。

②let不存在变量提升  
let必须要先声明才能使用。  
例如：

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>HOME</title>
    </head>
    <body>
    <script type="text/javascript"> 
        console.log(userName);
        let userName = '崇志';
        </script>
    </body>
    </html>

就会显示如下报错：应该先声明后执行。  
![在这里插入图片描述][20210315194800587.png_pic_center]  
③let具有暂时性死区特性  
我们来看下面这段代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>HOME</title>
    </head>
    <body>
    <script type="text/javascript"> 
        var temp=12345;
        if(true){
        
        let temp = 'chongzhi';
    }
        console.log(temp);  
        </script>
    </body>
    </html>

效果图如下：  
![在这里插入图片描述][20210315195926433.png_pic_center]

我们发现：虽然有两个temp，但是最后执行的是第一个temp的值12345，这是因为let具有暂时性死区特性，第二个temp会和if\{\}整体进行绑定。

**二、经典例题：**  
（1）输出i的值。

var arr = [];
        for(var i = 0; i < 2; i++)
        arr[i] = function(){
        
            console.log('i='+i);
        }
        arr[0]();
        arr[1]();

**代码执行效果图：**

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

解决关键：变量i是全局的，函数执行输出的都是全局作用域下的值。

（2）输出i的值。

let arr = [];
        for(let i = 0; i < 2; i++){
        
        arr[i] = function(){
        
            console.log('i='+i);
        }
    }
        arr[0]();
        arr[1]();

**代码执行效果图：**  
![在这里插入图片描述][20210315201131277.png_pic_center]

解决关键：每一次循环都会产生一个块级作用域，每个块级作用域中的变量都是不同的，函数执行时输出的是自己上一级循环产生的块级作用域下的i值。

[20210315193349947.png_pic_center]: /images/20221023/88f477ae48f34d91b2d52619762b6c6a.png
[20210315194800587.png_pic_center]: /images/20221023/49172ca3f50140d5ae85777586db8e45.png
[20210315195926433.png_pic_center]: /images/20221023/d2d175318e9341f59ac9e41143ab9c94.png
[20210315200728187.png_pic_center]: /images/20221023/fb942ce1b14d4d9db6bdf53a0634c4b7.png
[20210315201131277.png_pic_center]: /images/20221023/d239f3885b5546f5b3b86b4fc18dbc30.png