JS中var，let和const

ES6版本中已经有了三种声明变量的关键词，分别的var，let和const。其中var在ECMAscript的各个版本中都可以使用，而let和const只能在ECMAscript6以及更晚的版本中使用。

一.var关键字

声明作用域

使用var操作符定义的变量会成为包含在它的函数的局部变量，比如在一个函数中用var声明变量后，当函数执行完成后，变量也会随之销毁。

function test(){
    var message = "hi" //局部变量
}
test()
console.log(message) //报错

但是，如果你声明变量的时候没有用关键字var，这个变量就会成为一个全局变量。

function test(){
    message  = "hi" //全局变量
}
test()
console.log(message) //hi

在上面代码中没有用var关键字，message就变成了全局变量，只要执行了test函数，就会定义message，并且可以在函数外部访问到。虽然这样ECMAscript是允许的，但是不推荐这样做，因为在局部作用域中定义全局变量很难维护，会造成很多不必要的困扰。

声明提升

使用var关键字声明变量会存在变量提升，就是使用var关键字声明的变量会自动提升到函数作用域的顶部：

function test(){
    console.log(message)
    var message = "hi"
}
test() //undefined

上面代码不会报错是因为ECMAscript将上面代码看成以下代码：

function test(){
    var message;
    console.log(message)
    message = "hi"
}
test() //undefined

所谓的提升就是将所有变量声明都拉到函数作用域的顶部，而且反复用var多次声明同一个变量也是不会报错的：

function test(){
    var message = "hi"
    var message = 123
    var message = 456
    console.log(message)
}
test() //456

二.let关键字

let关键字和var关键字的作用差不多，但是有着非常重要的区别，最明显的就是let声明的范围是块级作用域，而var声明的范围是函数作用域。

if(true){
    var message = "hi"
    console.log(message) // hi
}
console.log(message) // hi
if(true){
    let message = "hi"
    console.log(message) //hi
}
console.log(message) // 报错

let也不允许在同一块级作用域中出现冗余声明（就是用let关键字多次声明同一变量），否则就会报错，而var却可以。当然，我们也不可以用了var声明了一个变量然后又用let来声明这个变量，反之也是不可以的。

var message;
let message; //报错
let message;
var message; //报错

暂时性死区

let与var相比，let不会出现变量提升。

console.log(message) //undefined
var message = "hi"


console.log(message) // 报错
let message = "hi"

在解析代码的时候，JS引擎会注意出现在块后面的let声明，只不过在此之前不能以任何方式来引用未声明的变量。在let声明之前的执行瞬间被称为"暂时性死区(temporal dead zone)"，在此阶段引用任何后面才声明的变量都会抛出错误。

全局声明

与var不同，let在全局作用域中声明的变量不可以通过window对象的属性。

var message = "hi"
console.log(window.message) //hi

let message = "hi"
console.log(window.message) //undefined

不过let声明仍然是在全局作用域中发生的，相应变量会在页面的生命周期内存续。所以，为了不抛出错误，必须确保页面不会重复声明同一个变量。

for循环中的let声明

在let出现之前，for循环中的迭代变量会渗透到循环体的外部。

for(var i = 0;i < 5;i++){
    //循环逻辑
}
console.log(i) //5

let出现后，这个问题就消失了，因为迭代变量的作用域仅限于循环体内部的块级作用域中。

for(var i = 0;i < 5;i++){
    //循环逻辑
}
console.log(i) //报错

在使用var的时候，最常见的问题就是对迭代变量的奇特声明和修改。

for(var i = 0;i < 5;i++){
    setTimeout(()=>{console.log(i)},0)
}
//你可能以为会输出 0 1 2 3 4
//实际上会输出 5 5 5 5 5 

这样的原因是因为在退出循环时，迭代变量保存的是导致循环退出的值：5。在之后执行超时逻辑时，所有的i都是同一个变量，所以输出的都是5。

而在使用let之后，JS引擎在后台会为每个迭代循环声明一个新的迭代变量。每个定时器引用的都是不同的变量实例，所以输出的值都是我们期望的值。

for(let i = 0;i < 5;i++){
    setTimeout(()=>{console.log(i)},0)
}
//0 1 2 3 4

三.const关键字

cosnt的行为与let基本一直，最大的区别就是变量声明时必须同时初始化，而且后面尝试修改变量会出现报错。

const message = "hi"
message = "123" //报错

//const不允许重复声明
const message = 123
const message = 456 //报错

//const也是块级作用域
if(true){
    const message = "hi"
    console.log(message) //hi
}
console.log(message) //报错

const声明的限制只适用于它执行的变量引用，总而言之就是如果const变量引用的是一个对象，那么修改这个对象内部的属性是可以的。

cosnt person = {}
person.name = "qiqi" //不会报错

总结：由于现在ES6中增加了let和const关键字，所以我们在声明变量时最好是不用var，优先使用const，let次之，除非提前知道未来会修改该变量再使用let。这样可以让开发者更有信心地推断某些变量的值永远不变，同时也可以迅速的发现因意外赋值的错误。

                                                                                                                -------该文章借鉴红宝石书，谢谢网友的支持。