在 ES6 中引入了 let 和 const 关键字,作为 var 的替代品,我们在日常开发中使用频率越来越高。那么它们和 var 的区别究竟如何呢?
1. 作用域
var 声明的变量存在变量提升,即变量可以在声明之前使用。而 let 和 const 声明的变量不存在变量提升,会报错。
console.log(a) // 报错:Uncaught ReferenceError: a is not defined let a = 1
let 和 const 的作用域都是块级作用域,即在花括号内({})声明的变量,只在该块级作用域内有效。
if (true) { let a = 1 } console.log(a) // 报错:Uncaught ReferenceError: a is not defined
2. 可修改性
使用 let 声明的变量可以被重新赋值,使用 const 声明的变量不能被重新赋值。
let a = 1 a = 2 // 成功 const b = 1 b = 2 // 报错:Uncaught TypeError: Assignment to constant variable.
注意:使用 const 声明对象时,其属性是可以被修改的。
const obj = {a: 1} obj.a = 2 // 成功
若想让对象不可修改,可以使用 Object.freeze() 方法冻结对象。
const obj = Object.freeze({a: 1}) obj.a = 2 // 报错:Uncaught TypeError: Cannot assign to read only property 'a' of object '#<Object>'
3. 临时死区
let 和 const 声明的变量,在声明之前使用会报错,这被称为“临时死区”。
console.log(a) // 报错:Uncaught ReferenceError: Cannot access 'a' before initialization let a = 1
4. 循环中的使用
使用 var 声明的变量存在变量提升,因此在 for 循环中创建的变量是全局变量。
for(var i=0; i<3; i++) { setTimeout(function() { console.log(i) }, 1000) } // 输出 3 3 3
使用 let 声明的变量不存在变量提升,因此在 for 循环中创建的变量是块级作用域变量。
for(let i=0; i<3; i++) { setTimeout(function() { console.log(i) }, 1000) } // 输出 0 1 2
如果希望使用 var 实现和 let 同样的效果,需要使用闭包。
for(var i=0; i<3; i++) { (function(j) { setTimeout(function() { console.log(j) }, 1000) })(i) } // 输出 0 1 2
结论
let 和 const 与 var 相比,有以下优点:
- 可以避免变量的提升和重复声明。
- 可以限定变量的作用域,避免变量泄露。
- 可以让代码更加安全和直观。
因此,在日常开发中,推荐优先使用 let 和 const 声明变量。
参考
示例代码
-- -------------------- ---- ------- -- --- -------------- -- ----------- --------------- - -- --- ------- --- - - - -- ---- --- - - - - - - -- -- ----- - - - - - - -- ----------- ---------- ---------- -- -------- --------- ----- --- - --- -- ----- - - -- -- ----- ---- - ----------------- --- ------ - - -- ----------- ---------- ------ ------ -- ---- ---- -------- --- -- ------ ----------- -- ---- -------------- -- ----------- --------------- ------ ------ --- ------ -------------- --- - - - -- ------ ------- ---- ---- ---- - --------------------- - -------------- -- ----- - -- -- - - - ------- ---- ---- ---- - --------------------- - -------------- -- ----- - -- -- - - - ------- ---- ---- ---- - ------------ - --------------------- - -------------- -- ----- ----- - -- -- - - -展开代码
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/66f4d200c5c563ced5659613