var和const,let的区别

346 阅读2分钟

var和const,let的区别

首先,我们都知道,var是es5中声明变量或常量的关键字,而const和let则是es6中的概念。

那么,const和let在原先的基础上有了那些改进呢?主要体现在三点:

1.失去变量提升 2.新增暂时性死区的概念 3.不再允许重复声明

一.变量提升

只有var声明的变量存在变量提升,es6新增的const和let声明的变量不存在变量提升的概念!!

var 命令经常会发生变量提升现象,按照一般逻辑,变量应该在声明之后使用才对。为了纠正这个现象,ES6 规定 let 和 const 命令不发生变量提升,使用 let 和 const 命令声明变量之前,该变量是不可用的。主要是为了减少运行时错误,防止变量声明前就使用这个变量,从而导致意料之外的行为。

这里举个栗子,大家一看就懂:

console.log(a);
var a = 1;
console.log(b);
let b = 1;
console.log(c);
const c = 1;

//正常运行,控制台输出 undefined
//报错,Uncaught ReferenceError: b is not defined
//报错,Uncaught ReferenceError: c is not defined

二.暂时性死区

暂时性死区其实是因为块级作用域导致的一个变量,块级作用域是es6新增的一个概念,和es5有所区别,详细了解请点击块级作用域传送门

如果代码块中的变量是let或者const声明的,那么就会形成一个块级作用域,其实就是一个封闭作用域,内部变量与外界无关,使内部的变量只能在当前块级作用域中声明。因此,如下面栗子:

var tmp = 123;

if (true) {
	tmp = 'abc';//报错,Uncaught ReferenceError: tmp is not defined
	let tmp;
}

三.重复声明

var可以重复声明:

var i = 10;
for(var i = 0;i < 5;i++){
  console.log(i);
}
console.log(i);// 输出 5

let 和 const 命令声明的变量不允许重复声明:

function func(){
  let a = 10;
  const PI = 3.1415;
  
  var a = 1;// 报错,Uncaught SyntaxError: Identifier 'a' has already been declared
  var PI = 3;// 报错,Uncaught SyntaxError: Identifier 'PI' has already been declared
}
// 当调用func()时报错,Uncaught SyntaxError: Identifier 'a' has already been declared

总结

var是es5中的概念,const和let是为了补充es5中的设计漏洞,所出现的声明方式。 弥补了var的变量提升,重复声明的问题。但是同时也带来了暂时性死区的问题。

本文参考:

juejin.cn/post/684490… @马猴烧酒 】