关于Javascript中var,let,const的区别和用法

在ES6以前，js声明变量的方式只有单一的var。

使用var声明变量有好处，也有弊端。es6更新了let和const两种声明变量的方法，它们之间的区别也是极大的。

1、变量提升

使用var声明变量有变量提升的功能，let和const没有。何为变量提升？顾名思义，即var会把变量提升到顶部

//var num

console.log(num)   //undefined
var num = 1

如上，至于为什么会输出undefined，则是因为var虽被提升到顶层，但没有赋初值，所以会输出undefined。

而let 和 const则会直接报错，这是由于 暂时性死区  的问题，即在let,const声明变量之前，该变量都是不可用的

console.log(num)  //Uncaught ReferenceError:Cannot access 'num' before initialization at
let num = 1

2、块级作用域 

 使用let和const可以形成块级作用域，var不行

var num1 = 1;
let num2 = 2; 
{
   var num1 = 0
   let num2 = 0
   console.log(num1)  //0
   console.log(num2)  //0
}
console.log(num1)  //0
console.log(num2)  //2

 {}就是一个最简单的形成块级作用域的方式，由上代码可见，{}外无法读取到{}内部的由let声明的变量，而var则不会形成块级作用域，外部仍读取到了内部的重新赋值

换个例子，for循环也是块级作用域

for(var i = 0;i < 5;i ++){
    //code
}
console.log(i)  //5

for(let i = 0;i < 5;i ++){
    //code
}
console.log(i)  //Uncaught ReferenceError: i is not defined

 如此便显而易见了

3、重复声明变量

var可以重复声明变量，let和const则不行 

var num = 1 
var num = 2
console.log(num)  //2

let str = 'a'
let str = 'b'
console.log(str)  //Uncaught SyntaxError: Identifier 'str' has already been declared

 错误显示：‘str’已被定义

 

var声明的变量会作为属性添加到顶层对象中，这样会污染顶层对象，不利于项目的开发

var num = 1
console.log(window.num)  //1

let str = 'a'
console.log(window.str) //undefined

 所以实际使用中，尽量只用let和const，以防止污染全局对象

而let和const的区别则是const声明的变量值不可更改，也就是说const声明的是常量（const声明的数组和对象的内容则可以改变）

const num = 1

num = 2  //ncaught TypeError: Assignment to constant variable.

const arr = []
arr[0] = 1
console.log(arr) //[1]

const通常在变量的值不更改的时候使用，使用const也能告诉开发者这是定值不要更改，以防止误改从而发生错误,而且JavaScript会优化const，这就导致多用const会提高效率。

简而言之，var和let都能使用的时候尽量用let,let和const都能使用的时候尽量用const。