0
点赞
收藏
分享

微信扫一扫

const、let 与 var 的区别

JS 有三个关键字可用于声明变量:

  • ​var​
  • ES6 新增的​​let​​​ 和​​const​

区别

无法在声明 ​​let​​ 变量的最近封闭块(块级作用域)之外访问该变量。

{
let foo
}

// ReferenceError: foo is not defined
console.log(foo)

如果我们用 ​​var​​​ 声明替换 ​​let​​,上面的示例代码就可以工作。

  • ​let​​​ 变量在声明之前不能使用。下面的示例代码将引发​​ReferenceError​​:

{
foo = 'hello'
let foo
console.log(foo)
}
// ReferenceError: Cannot access 'foo' before initialization

如果在上面的示例代码中使用 ​​var​​​,我们将在控制台中看到 ​​hello​​​。因为 ​​var​​​ 存在变量提升,而 ​​let​​ 存在 TDZ(暂存性死区)。

  • 无法使用​​let​​ 重新声明变量。

// 如果使用相同的名称重新声明变量,则没有问题
var foo, foo
var bar = 1
var bar
bar // 1

let baz
let baz
// 抛出以下错误
// SyntaxError: Identifier 'baz' has already been declared

  • 在顶层,全局​​let​​​ 变量不会附加到全局​​window​​ 对象。

var bar = 'world'
window.bar // 'world'

let foo = 'hello'
window.foo // undefined

  • 使用​​let​​​ 可以避免​​var​​ 的闭包问题。

for (var i = 0; i < 3; i++) {
setTimeout(function () {
console.log(i) // 3 3 3
}, i)
}

它不像我们期望的那样工作。setTimeout 中回调中的变量 ​​i​​​ 将引用同一个对象,它是在索引上循环时的最后一个索引 ​​3​​。

可以使用 ​​let​​ 解决此问题:

for (let i = 0; i < 3; i++) {
setTimeout(function () {
console.log(i) // 0 1 2
}, i)
}

  • ​const​​​ 关键字的行为与​​let​​ 相同,只是在声明时必须赋予一个初始值。

// 抛出以下错误
// SyntaxError: Missing initializer in const declaration
const a

且变量不能更改

const a = 'hello'

// 抛出以下错误
// TypeError: Assignment to constant variable
a = 'world'

值得注意的是,使用 ​​const​​ 并不意味着变量是不可变的。可以更改对象的属性:

const person = {}
person.age = 20

// 并向数组中添加更多项:

const arr = []
arr.push('foo')
arr[1] = 'bar'
console.log(arr) // ['foo', 'bar']

建议

  • 不要使用​​var​​​,除非您必须支持那些不支持​​let​​​ 和​​const​​ 关键字的旧浏览器。
  • ​​关于使用 let 还是 const​​

总结

  • 声明变量的三种方式:​​var​​​、​​let​​​、​​const​
  • ​var​​ 在全局作用域下声明变量,全局可用,而在局部作用域下声明的变量,只能在当前的环境下使用。
  • ​var​​​ 声明的变量,不是全局作用域就是函数作用域,没有块级作用域,会忽略代码块​​{}​​(除函数外),其因在于 JS 早期块没有词法环境
  • ​var​​​ 声明的变量允许重新声明,而​​let​​​ 和​​const​​ 不允许重新声明
  • ​var​​​ 声明的变量存在变量提升,但是赋值不会。​​let​​​ 和​​const​​ 不存在变量提升
  • ​let​​​ 和​​const​​ 声明形成块作用域,声明的变量只能在他声明的封闭块内使用
  • 同一作用域下​​let​​​ 和​​const​​​ 不能声明同名变量,而​​var​​ 可以
  • ​let​​​ 和​​const​​ 存在暂存性死区(TDZ)
  • ​let​​​ 和​​const​​​ 的唯一区别是:​​const​​ 变量一旦声明必须赋值,声明后不能再修改,但如果声明的是对象,我们可以更改其属性。
举报

相关推荐

0 条评论