var、let、const的区别。
ES5中声明变量可以使用var、和function,但是使用var声明的变量会有一定的缺陷。所以ES6(ECMAScript 6)提出了let、const这两个声明变量的方式,用来弥补ES5中var的不足。
var 、let、const 的区别大致可以分为五种:
- 是否存在变量提升。
- 是否可以修改变量。
- 是否存在块级作用域。
- 是否存在暂时性死区。
- 是否可以重复声明变量。
变量提升
在ES5提出的var声明变量的方式中,存在变量提升(所谓变量提升就是将当前声明的变量提升到当前作用域的最顶端),这种方式多多少少都有一些奇怪,按照一般的逻辑,变量应该在声明语句之后才可以使用。
为了纠正这种现象,所以说ES6提出的let命令改变了语法行为。
var 存在变量提升;let、const不存在变量提升
// var 的情况
console.log(foo); // 输出undefined
var foo = 2;
// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;
//const 的情况
console.log(bar) // 报错ReferenceError
const bar =2 ;
是否可以修改变量
var 和let可以修改变量。
const不可以修改变量,因为const声明的是一只读个常量,一但声明,常量就不能更改,不然的话就会报错。
const a=3.1415;
a;
a=3;//会报错
是否存在作用域
什么是块级作用域:
ES5中的作用域有:全局作用域、函数作用域。不存在块级作用域的概念,这会带来很多不合理的场景。
第一种情况,内部变量可能会覆盖外层变量。
var tmp = new Date();
function f() {
console.log(tmp);
if (false) {
var tmp = 'hello world';
}
}
f(); // undefined
if代码块的外部使用外层的tmp变量,内部使用内层的tmp变量,函数f执行后,输出结果为undefined,原因在于变量提升,导致内层的tmp变量覆盖了外层的tmp变量。
第二种情况,用来计数的循环变量泄露为全局变量。
var tmp = 'hello';
for (var i = 0; i < s.length; i++) {
console.log(tmp[i]);
}
console.log(i); // 5 i循环结束后,泄露成了全局变量
变量i只用来控制循环,但是循环结束后,它并没有消失,泄露成了全局变量
ES6(ECMAScript 6)中新增了块级作用域,块级作用域使用{}包括,if判断和for循环中的{}也属于块级作用域。
function f1() {
let n = 5;
if (true) {
let n = 10;
}
console.log(n); // 5
}
在两个代码块中,都声明了变量n,运行后输出 5。这表示外层代码块不受内层代码块的影响。如果两次都使用var定义变量n,最后输出的值才是 10。
是否存在暂时性死区
let和const存在暂时性死区。即只要块级作用域内存在let命令,它所声明的变量就“绑定”(binding)这个区域,不再受外部的影响。
var tmp = 123;
if (true) {
tmp = 'abc'; // ReferenceError
let tmp;
}
//以上代码if后面{}形成了块级作用域,由于使用let声明了tmp,则这个变量就绑定了块区域,在声明之前使用,会报错。
在代码块内,使用let命令声明变量之前,该变量都是不可用的。这在语法上,称为“暂时性死区”(temporal dead zone,简称 TDZ)。
总之,暂时性死区的本质就是,只要一进入当前作用域,所要使用的变量就已经存在了,但是不可获取,只有等到声明变量的那一行代码出现,才可以获取和使用该变量。
是否允许重复声明变量?
var允许重复声明变量。
let和const在同一作用域不允许重复声明变量
var f = 4;
var f = 5;
console.log(5) //5
let g = 6;
let g = 7;
console.log(7) //SyntaxError: Identifier 'g' has already been declared
const h = 8;
const h = 9;
console.log(h) //SyntaxError: Identifier 'g' has already been declared