var、let、const的区别

var、let、const 都是命名变量的关键字

先上结论：

关键字	变量提升	块级作用域	重复声明同名变量	重新赋值
var	√	×	√	√
let	×	√	×	√
const	×	√	×	×

表格下面文字是对表格的解读。

一、变量提升

//用var命名的变量有变量提升
console.log(num1);  // undefined
var num1 = 10;
// 以上代码运行时,相当于下面的写法

var num2;  // 声明提升到作用域最顶端
console.log(num2);  // undefined
num = 10;
/*****************************************/
//用 let 或 const 命名的变量有变量提升
console.log(num3); // Uncaught ReferenceError: num3 is not defined
let num3 = 10;      

console.log(num4); // Uncaught ReferenceError: num4 is not defined
const num4 = 10;

二、块级作用域

ps:一对大括号 就是 一个块级作用域

//var没有块级作用域
for (var i = 0; i < 5; i++) { }
console.log(i);  // 5 => 说明i在循环后从"{}"中暴露出来了
                 //所以说 var 没有块级作用域

if (true) { var num1 = 10; }
console.log(num1);  // 10 => 原因同上
/***************************************/
// let 与 const 都有块级作用域
for (let i = 0; i < 5; i++) {  }
 console.log(i);  // Uncaught ReferenceError: i is not defined

if (true) { const num2 = 10; }
 console.log(num2);  // Uncaught ReferenceError: num2 is not defined

if (true) { let num3 = 12; }
 console.log(num3);    // Uncaught ReferenceError: num3 is not defined

三、重复声明同名变量

//var 关键字可以声明同名变量,实际第二次声明是对第一次声明的变量重新赋值
var num1 = 10;
var num1 = 20;
console.log(num1);  // 20

//let 和const 关键字不能重复声明同名变量,即使之前是用var声明的也会报错
var num2 = 10;
let num2 = 20;  // Uncaught SyntaxError: Identifier 'num2' has already been declared 

//let 和 var 在声明变量时,可以不用初始化
let num3;  
console.log(num3);  // undefined
var num4;  
console.log(num4);  // undefined

//const 声明常量时必须初始化,因为 `const` 关键字声明的是常量,声明后不能再赋值
const num5;  // Uncaught SyntaxError: Missing initializer in const declaration

四、重新赋值

//let 声明的变量可以重新赋值
let num1 = 10;
num1 = 20;
console.log(num1);  // 20
//const 只能在声明时赋值，之后不能再重新赋值
const num2 = 10;
num2 = 20;  // Uncaught TypeError: Assignment to constant variable.

五、总结

所以现在可以尽量用 let和 const,少用 var。这样可以避免变量提升、重复声明等问题。