大前端三剑客:Vue+React+Flutter
上QQ阅读APP看书,第一时间看更新

2.3 let和const

ES5没有块级作用域,只有全局作用域和函数作用域,由于一旦进入函数就要马上将它创建出来,这就造成了所谓的变量提升。

由于ES6是向后兼容的,所以var创建的变量其作用域依旧是全局作用域和函数作用域。这样,即使拥有了块级作用域,也无法解决ES5的“变量提升”问题,所以这里ES6新增了两个新关键词:let和const。

1.let

let声明的变量只在let命令所在的代码块内有效,let不存在变量提升,但var存在变量提升,如代码示例2-2所示。

代码示例2-2

不能重复声明,let只能声明一次,但var可以声明多次,如代码示例2-3所示。

代码示例2-3

for循环计数器很适合用let声明,如代码示例2-4所示。

代码示例2-4

2.const

const用于声明一个只读的常量。声明后,常量的值就不能改变了,但const声明的对象可以有属性变化,如代码示例2-5所示。

代码示例2-5

也可以使用Object.freeze将对象冻结,如代码示例2-6所示。

代码示例2-6

当去改变用const声明的常量时,如代码示例2-7所示,浏览器就会报错。

代码示例2-7

const有一个很好的应用场景,就是当引用第三方库的时候声明变量,用const声明可以避免未来不小心重命名而导致出现Bug,如代码示例2-8所示。

代码示例2-8

使用let和const的规则如下:

(1)变量只在声明所在的块级作用域内有效。

(2)变量声明后方可使用(暂时性死区)。

(3)不能重复定义变量。

(4)声明的全局变量不属于全局对象的属性。

变量声明关键字对比,如表2-1所示。

表2-1 变量声明关键字对比