js中var和let的区别

var是JavaScript刚出现时就存在的变量声明关键字，而let作为ES6才出现的变量声明关键字，无疑两者之间存在着很大的区别。那么具体有哪些区别呢？

1.作用域表现形式不同

var是函数作用域，let是块级作用域

1 2 3 4 5 6

{   var monkey='孙悟空';   let pig='猪八戒';    } console.log(monkey); //输出undefined console.log(pig); //报错：pig is not deined

由上面代码可见，let声明的变量只在其所在的代码块有效，在代码块外部无效无法访问，而var声明的变量在该代码块所在的函数作用域内都有效。

2.是否变量提升的区别

var声明的变量会进行变量提升，let声明的变量不会进行变量提升。

1 2 3 4 5

console.log(monkey); //undefined var monkey='孙悟空'; console.log(pig); //报错：pig is not defined let pig='猪八';

同样的逻辑，为什么var声明的变量在它声明之前调用会显示未定义，而let声明的变量在声明之前调用会抛出异常呢，这就是两者在变量提升上的区别，var声明的变量存在变量提升，let声明的变量不存在变量提升。

那么什么叫变量提升呢，我这里不做概念性的描述，我只说我个人的理解，就是以上代码实际上相当于如下：

1 2 3 4 5 6 7

var monkey; console.log(monkey); //undefined monkey='孙悟空'; console.log(pig); //报错：pig is not defined let pig='猪八戒';

看见区别了吗，var声明的变量会将声明的变量提取到作用域的最上面进行定义但不赋值，赋值操作还是在你的代码处，所以你在调用var声明的变量时就是一个已经声明但是并未定义值的变量，所以调用结果就是undefined，这就是所谓的变量提升。而let定义的变量不存在这种变量提升。

3.暂时性死区上的区别

暂时性死区：如果在某一作用域内let了一个变量，如果外部作用域中有相同名称的变量，那么就算在作用域内进行了更改，也不会影响到外部作用域

具体表现如下：

1 2 3 4 5 6 7 8 9 10

for(var i=0;i<5;i++){     setTimeout(function(){         console.log(i)     },1000) } for(let i=0;i<5;i++){   setTimeout(function(){      console.log(i)            },1000)  }

请问这两处代码的运行结果分别是什么？

第一处代码运行完毕的结果是1s后顺序打印5个5；第二处代码运行完毕的结果是1s后顺序打印0,1,2,3,4。

请问为什么会存在这种区别？

因为第一处代码的变量i由var关键字声明，不存在关键性死区，即你在1s后setTimeout中访问到的变量i是全局上下文中for循环运行完毕之后的i,所以打印的结果全是5；

而第二处代码的变量i由let关键字声明，产生了关键性死区，存在setTimeout中的i变量是你当时存储时的i的值，这个存储区间的i不会因为外面有相同的i变量且赋了不同的值而改变，他依旧是之前存储进去的值，这就是暂时性死区的表现，也是为什么第二处代码运行完毕是顺序打印0,1,2,3,4的原因。

4.在同一个上下文中var可以重复声明，let不行

1 2 3 4

let monkey='孙悟空'; let monkey='齐天大圣'; //报错：Identifier 'a' has already been declared var pig='猪八戒'; var pig='猪悟能';  //正常访问，变量pig的值被替换