更新时间:2022-10-31 来源:黑马程序员 浏览量:
let是ES6中新增的用于声明变量的关键字。在ES6之前,使用var关键字来声明变量。与var关键字相比,let关键字有一些新的特性,下面针对这些新特性进行讲解。
使用let关键字声明的变量具有块级作用域。块级作用域有以下两个作用:①防止代码块内层变量覆盖外层变量;②防止循环变量变成全局变量。为了让读者更好地理解,下面将详细讲解块级作用域这两个作用的使用场景。
(1)防止代码块内层变量覆盖外层变量,示例代码如下。
< script > if (true){ let a = 10; console.log(a); //输出结果:10 } console.log(a): //报错,a未定义 < /script>
上述代码中,第3行代码使用lt关键字在if语句的大括号内声明了一个变量a,此时if语句的大括号内就是变量a的块级作用域范围。第4行代码输出变量a,结果为10。第6行代码在let关键字所处的块级作用域之外输出变量a,结果是浏览器会在控制台中报错,错误信息为ais nt defined(a未定义)。这说明let关键字声明的变量只在所处的块级作用域内有效,也就是说变量a只能在if语句的大括号中被访问。
(2)防止循环变量变成全局变量,示例代码如下。
<script> for (let i = 0; i < 2; i++) { } console.log(i);//报错,i未定义 </script>
上述代码中,第2行代码在for循环的小括号中使用let关键字声明了变量i,该变量是与for循环进行绑定的,只能在for循环的小括号内和大括号内访问。由于在for循环的外面是访问不到变量;的,所以第3行代码尝试输出变量i会报错,错误信息为iis not defined(i未定义)。
使用JavaScript中的var关键字声明变量时,变量可以先使用后声明,这种现象称为变量提升。但在其他大多数编程语言中,变量只有声明后才可以使用。vau关键字的变量提升很容易给开发人员带来困扰。在ES6中,变量的使用规范更加严格,使用let关键字声明的变量只能在声明之后才可以使用,否则就会报错。
下面通过代码演示let关键字声明的变量不存在变量提升的现象,示例代码如下。
<script> console.log(a);//报错,无法在初始化之前访问a let a = 10; </script>
上述代码中,第2行代码在使用变量a时,因为变量a没有被定义,所以变量a是不存在的,这时若是使用它,就会报错误信息Cannot access' before initialization(无法在初始化之前访问a)。这表明使用let关键字声明的变量a不会发生变量提升。
使用let关键字声明的变量具有暂时性死区特性。let关键字声明的变量不存在变量提升,其作用域都是块级作用域,在块级作用域内使用let关键字声明的变量会被整体绑定在这个块级作用中形成封闭区域,不再受外部代码影响,这种特性就称为“暂时性死区”。
下面通过代码演示let关键字声明的变量的暂时性死区特性,示例代码如下。
<script> var num = 10; if (true) { console.log(num); //报错,无法在初始化之前访问num let num = 20; } </script>
上述代码中,第2行代码在全局作用域下使用var关键字声明了一个变量mum,赋值为10;第5行代码在if语句的大括号内使用let关键字声明了相同名字的变量mum,这两个变量之间是毫无关系的。根据let关键字暂时性死区的特性,第4行代码在声明变量num前使用变量mum会出错。上述代码执行后,在浏览器控制台会看到Cannot access 'num' before initialization(无法在初始化之前访问num)的错误信息。