let和var

首先看一个var示例：

/*
===================
定义变量
===================
*/
var x = 10;

/*
===================
方法
===================
*/
function w () {
  //请在F12控制台查看打印
  console.log('#1',x);
  var x = 5;
  //请在F12控制台查看打印
  console.log('#2',x);
}

/*
===================
调用
===================
*/
w();
/* 
调用打印结果：
#1：undefined
#2：5
 */
//请在F12控制台查看打印
console.log('#3',x);
/* 
调用打印结果：
#3：10
 */

如果使用相同示例（简化注释）var改为let：

let x = 10;

function w () {
  console.log('#1',x);
  let x = 5;
  console.log('#2',x);
}

w();

console.log('#3',x);

会报#1的x未定义，因为let声明的变量不会提升；去掉console.log('#1',x);的打印在执行一次：

let x = 10;

function w () {
  let x = 5;
  console.log('#2',x);
}

w();
/* 
调用打印结果：
#2：5
 */
console.log('#3',x);
/* 
调用打印结果：
#3：10
 */

会成功的打印出结果，因为在不同的作用域下let可以重复声明相同的变量。

let

1. ES6新增的命令，用来声明变量，用法类似var，只能在块级作用域中访问；
2. 声明的全局变量，不属于顶层对象（浏览器是window对象）的属性；

let w = 1; //声明全局变量w

window.w; //会输出undefined

3. 声明的变量不能提升，不能在声明变量之前使用，否则报错；

cosnole.log(x);
let x = 5; //报错ReferenceError: x is not defined

4. 在相同的作用域内，不能重复声明相同变量。

var

1. 用来声明变量，可以在块级作用域、函数作用域、全局作用域中访问；
2. 声明的全局变量，属于顶层对象（浏览器是window对象）的属性；

var w = 1; //声明全局变量w

window.w; //会输出1

3. 可以在变量声明之前使用，会变量提升，值为undefined；

cosnole.log(x); //会输出undefined
var x = 5;

//变量提升后变成：
var x;
cosnole.log(x); //会输出undefined
x = 5;

4. 在相同的作用域内，可以重复声明相同变量。