ES6中var、let、const的对比和容易踩的坑

2023-12-14 18:40:14

var、let、const的对比

特性	var	let	const
声明方式	`var` 变量名 = 值;	`let` 变量名 = 值;	`const` 变量名 = 值;
作用域	全局作用域或函数作用域	块级作用域	块级作用域
暂时性死区	没有	有	有
提升	提升到函数作用域的顶部	提升到块级作用域的顶部	提升到块级作用域的顶部
重新声明	可以	不可以	不可以
赋值	可以重新赋值	可以重新赋值	不可以重新赋值
类型推断	自动推断类型	自动推断类型	自动推断类型
块级绑定	没有	有	有
暂时性死区	没有	有	有

使用var、let、const容易踩的坑

在块级作用域中使用var声明变量

function foo() {
  if (true) {
    var x = 10;
  }
  console.log(x); // 10
}

上面的代码中，变量x被声明在块级作用域中，但是使用var声明，导致变量x提升到了函数作用域的顶部，即使在块级作用域外也可以访问。

在let或const声明变量之前使用变量

console.log(x); // ReferenceError: x is not defined
let x = 10;

上面的代码中，变量x被声明在let关键字之后，但是使用变量x之前，导致报错。这是因为let和const声明的变量具有暂时性死区，在变量声明之前无法访问。

重新声明let或const声明的变量

let x = 10;
let x = 20; // SyntaxError: Identifier 'x' has already been declared

上面的代码中，变量x被重新声明，导致报错。这是因为let和const声明的变量不能被重新声明。

给const声明的变量重新赋值

const x = 10;
x = 20; // TypeError: Assignment to constant variable.

上面的代码中，变量x被声明为const，并且尝试重新赋值，导致报错。这是因为const声明的变量不能被重新赋值。

总结

ES6中，var、let和const都是声明变量的关键字，但是在使用上有很大不同。var是ES5中声明变量的关键字，let和const是ES6中新增的声明变量的关键字。let和const声明的变量具有块级作用域，而var声明的变量具有全局作用域或函数作用域。let和const声明的变量具有暂时性死区，在变量声明之前无法访问。let和const声明的变量不能被重新声明，const声明的变量不能被重新赋值。

在使用var、let和const时，需要注意以下几点：