var 与 let 的区别

var

var 声明的变量是函数作用域变量。

var a = 1;
var a = 2;
等价于
var a；
var a;
a = 1;
a = 2;

var 声明的变量提到作用域的前方，简称变量提升。

看一个例子

var a = 1;
function foo(){
  alert(a);
  var a = 2;
}
foo.call()

alert(a)打出来的是什么？

我们先做一下转换，先找声明，把声明提升到作用域的前方，再看代码。

var a;
function foo(){
  var a;
  alert(a);
  a = 2;
}
a = 1;
foo.call()

转换后的代码，我们就一目了然了，alert(a)打出来undefined

function f1(){
  if(true){
  }else{
    var a = 1
  }
  alert(a)
}
f1();

跟前面一样，先找声明，把声明提升到作用域的前方，再看代码。

function f1(){
  var a;
  if(true){
  }else{
    a = 1
  }
  alert(a)
}
f1();

此时的alert(a)也是undefined。

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

打印出i的值是什么呢？
先把声明提升上去，再看代码，1s之后for循环早已执行完毕，此时i的值为6，再执行函数，结果console.log(i)就是6个6。

let

let 声明的变量是块级作用域变量。
let 无法重复声明
let 和 for 循环一起使用有奇怪现象
let 声明的变量提升到块级作用域的第一行
实际声明的一行与块级作用域第一行之间的区域，就是该let 变量的TDZ(临时死亡区域)

let a = 1;
let a = 2; 
//Uncaught SyntaxError: Identifier 'a' has already been declared

重复声明会报错

for(let i = 0;i < 6;i++){
  setTimeout(function(){
    console.log(i)
  }，1000)
}

打印出i的值是什么？打印出0 1 2 3 4 5，结果跟我们想的一样，但过程却不一样。

变量i是let声明的，当前的i只在本轮循环有效，所以每一次循环的i其实都是一个新的变量

let a = 1;
{
  console.log(a);
  let a = 2;
}

console.log(a)会打出什么呢？

先做转换，再代码。

let a;
a = 1;
{
  let a;
  console.log(a);
  a = 2;
}

转换完，感觉console.log(a)是undefined.再看看let的第五大特性，console.log(a)这行代码就是TDZ(临时死亡区域)，所以执行的结果会报错。
先let声明变量，再使用。