在JavsScript中var、let、const、的区别。

var、let、const的区别。

ES5中声明变量可以使用var、和function,但是使用var声明的变量会有一定的缺陷。所以ES6(ECMAScript 6)提出了let、const这两个声明变量的方式,用来弥补ES5中var的不足。
var 、let、const 的区别大致可以分为五种:

  1. 是否存在变量提升。
  2. 是否可以修改变量。
  3. 是否存在块级作用域。
  4. 是否存在暂时性死区。
  5. 是否可以重复声明变量。

变量提升
在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

注:本文参考了阮一峰的ES6

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值