- 大前端三剑客:Vue+React+Flutter
- 徐礼文
- 566字
- 2025-02-17 10:18:51
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 变量声明关键字对比
