要理解var和let的区别，先了解一下关于变量的声明以及作用域。

一、变量的声明和提升

在ES6之前，都是用var关键字来声明变量。

var x; // 声明 x

如果还没有为变量赋值，此时的变量是undefined。

也可以先赋值，再声明，这就是变量提升。也可以理解为预解析。

x = 5; // 变量 x 设置为 5

elem = document.getElementById("demo"); // 查找元素 
elem.innerHTML = x;                     // 在元素中显示 x

var x; // 声明 x

其实和下面的代码是一样的。

var x; // 声明 x
x = 5; // 变量 x 设置为 5

elem = document.getElementById("demo"); // 查找元素 
elem.innerHTML = x;

函数声明和变量声明都会被提升，也就是提前被预解析。

但是要注意，变量初始化是不能被提升的。

所以如果是如下这种声明变量就赋值的初始化写法，要写在代码体之前。

var x = 5; // 初始化 x
var y = 7; // 初始化 y

elem = document.getElementById("demo"); // 查找元素 
elem.innerHTML = x + " " + y;           // 显示 x 和 y

如果是在代码体下面初始化，则y还是undefined。

var x = 5; // 初始化 x

elem = document.getElementById("demo"); // 查找元素 
elem.innerHTML = x + " " + y;           // 显示 x 和 y

var y = 7; // 初始化 y

等价于：

var x = 5; // 初始化 x
var y;     // 声明 y
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x + " " + y;           // 显示 x 和 y
y = 7;    // 设置 y 为 7

这是因为变量声明 (var y) 提升了，但是初始化(y = 7) 并不会提升，所以 y 变量是一个未定义的变量。

用var声明的变量可以重复声明。

var carname="Volvo"; 
var carname;  //此时变量的值依然存在

在ES6中，增加了let和const两个关键字。

let 关键字定义的变量不可以在使用后声明，也就是变量需要先声明再使用。

let x

在相同的作用域下，let不能重复声明,也不能使用 let 关键字来重置 var 关键字声明的变量

let x = 2;       // 合法
let x = 3;       // 不合法

var x = 2;       // 合法
let x = 3;       // 不合法

二、变量的作用域

在没有let之前，也就是ES6之前，JavaScript变量只有两个作用域： 全局变量 与 函数内的局部变量。

1、全局变量

在函数外声明的变量作用域是全局的：

var carName = "Volvo"; 
// 这里可以使用 carName 变量
 function myFunction() {
    // 这里也可以使用 carName 变量
}

全局变量在 JavaScript 程序的任何地方都可以访问。

2、局部变量

在函数内声明的变量作用域是局部的（函数内）：

// 这里不能使用 carName 变量
 function myFunction() {
    var carName = "Volvo";    // 这里可以使用 carName 变量
}
 // 这里不能使用 carName 变量

函数内使用 var 声明的变量只能在函数内访问，如果不使用 var 则是全局变量。

因为局部变量只作用于函数内，所以不同的函数可以使用相同名称的变量。

局部变量在函数开始执行时创建，函数执行完后局部变量会自动销毁。全局变量在页面关闭后销毁。

函数参数只在函数内起作用，也是局部变量。

3、块级作用域

使用 var 关键字声明的变量不具备块级作用域的特性，它在 { } 外依然能被访问到。

{ 
    var x = 2; 
 }
 // 这里可以使用 x 变量

在 ES6 之前，是没有块级作用域的概念的。

ES6 可以使用 let 关键字来实现块级作用域。 Edge 12以上支持。

let 声明的变量只在 let 命令所在的代码块 { } 内有效，在 { } 之外不能访问。

{ 
    let x = 2;
 }
 // 这里不能使用 x 变量

使用 var 关键字重新声明变量可能会带来问题。

在块中重新声明变量也会重新声明块外的变量：

var x = 10;  // 这里输出 x 为 10
{ 
    var x = 2;    // 这里输出 x 为 2
}
// 这里输出 x 为 2

let 关键字就可以解决这个问题，因为它只在 let 命令所在的代码块 { } 内有效。

var x = 10;// 这里输出 x 为 10
{ 
    let x = 2;    // 这里输出 x 为 2
}
// 这里输出 x 为 10

在作用域上var和let的差别：

循环作用域

var i = 5;
for (var i = 0; i < 10; i++) {
    // 一些代码...
}
// 这里输出 i 为 10

使用了 var 关键字，它声明的变量是全局的，包括循环体内与循环体外。

var oP=document.querySelectorAll("p");
for(var i=0;i<oP.length;i++){
oP[i].index=i;
oP[i].onclick=function(){
alert(this.index);
}
}

let i = 5;
for (let i = 0; i < 10; i++) {
    // 一些代码...
}
// 这里输出 i 为 5

使用 let 关键字， 它声明的变量作用域只在循环体内，循环体外的变量不受影响。

var oP=document.querySelectorAll("p");
for(let i=0;i<oP.length;i++){
oP[i].onclick=function(){
alert(i); // 0 1 2 3
}
}

局部变量

在函数体内使用 var 和 let 关键字声明的变量有点类似。

它们的作用域都是 局部的:

// 使用 var
function myFunction() {
    var carName = "Volvo";   // 局部作用域
    }
// 使用 let
function myFunction() {
    let carName = "Volvo";   //  局部作用域
    }

全局变量

在函数体外或代码块外使用 var 和 let 关键字声明的变量也有点类似。

它们的作用域都是全局的:

// 使用 var
var x = 2;       // 全局作用域
// 使用 let
let x = 2;       // 全局作用域

let 关键字在不同作用域，或不同块级作用域中是可以重新声明赋值的:

let x = 2;       // 合法
{
    let x = 3;   // 合法
 }
{
    let x = 4;   // 合法
 }

三、const

Edge 11以上支持。

const 用于声明一个或多个常量，声明时必须进行初始化，且初始化后值不可再修改：

const PI = 3.141592653589793;
PI = 3.14;      // 报错
PI = PI + 10;   // 报错

const定义常量与使用let 定义的变量相似：

• 二者都是块级作用域

• 都不能和它所在作用域内的其他变量或函数拥有相同的名称

两者还有以下两点区别：

• const声明的常量必须初始化，而let声明的变量不用

• const 定义常量的值不能通过再赋值修改，也不能再次声明。而 let 定义的变量值可以修改。

var x = 10;// 这里输出 x 为 10
{ 
    const x = 2;
    // 这里输出 x 为 2
 }
 // 这里输出 x 为 10

const 声明的常量必须初始化：

// 错误写法
const PI;PI = 3.14159265359;
// 正确写法
const PI = 3.14159265359;

const声明的常量并非真正的常量。

const 的本质: const 定义的变量并非常量，并非不可变，它定义了一个常量引用一个值。使用 const 定义的对象或者数组，其实是可变的。下面的代码并不会报错：

// 创建常量对象
const car = {type:"Fiat", model:"500", color:"white"}; 
// 修改属性
car.color = "red"; 
// 添加属性
car.owner = "Johnson";

但是我们不能对常量对象重新赋值：

const car = {type:"Fiat", model:"500", color:"white"};
car = {type:"Volvo", model:"EX60", color:"red"};    // 错误

修改常量数组：

// 创建常量数组
const cars = ["Saab", "Volvo", "BMW"]; 
// 修改元素
cars[0] = "Toyota"; 
// 添加元素
cars.push("Audi");

但是不能对常量数组重新赋值。

重置变量

使用 var 关键字声明的变量在任何地方都可以修改：

var x = 2;    //  合法
var x = 3;    //  合法
x = 4;        //  合法

在相同的作用域或块级作用域中，不能使用 const 关键字来重置 var 和 let关键字声明的变量:

var x = 2;         // 合法
const x = 2;       // 不合法
{
    let x = 2;     // 合法
    const x = 2;   // 不合法
}

在相同的作用域或块级作用域中，不能使用 const 关键字来重置 const 关键字声明的变量:

const x = 2;       // 合法
const x = 3;       // 不合法
x = 3;             // 不合法
var x = 3;         // 不合法
let x = 3;         // 不合法
{
    const x = 2;   // 合法
    const x = 3;   // 不合法
    x = 3;         // 不合法
    var x = 3;     // 不合法
    let x = 3;     // 不合法
}

const 关键字在不同作用域，或不同块级作用域中是可以重新声明赋值的:

const x = 2;       // 合法
{
    const x = 3;   // 合法
 }
{
    const x = 4;   // 合法
}

let和const都没有变量提升，必须先声明，const必须先初始化。