一、什么是变量

在读这篇文章前，我们需要搞懂到底是什么变量，其实一句话就能概括：变量是一个可以保存任何数据类型值的命名占位符。本篇文章将会介绍以下知识点：

1. 什么是var、let、const
2. 变量声明规则
3. 变量提升
4. 块作用域
5. 暂时性死区

二、var关键字

2.1 初始化

初始化变量只需要在var关键字后面跟变量名即可：

var a;
var b = 2;

上面这段代码声明了a和b两个变量，a变量只是单纯的声明，并没有赋值，js引擎遇到未赋值的变量时，会自动为其赋值一个值，这个值就是undefined；变量b在声明的时候我们给它赋值了一个数字2，所以当获取变量b的时候，会得到一个number类型的2。

说到number类型，这里就不得不提到一个概念：JavaScript中的变量属于松散类型，也就是变量的值可以变更为任何数据类型的值，但并不建议这么做，随意更改变量的数据类型会导致代码可读性降低。

// 翻译后是var a = undefined;
var a;

var b = 2;
b = '2'; // 不建议这么做

在代码开发过程中，有些场景需要创建多个变量，除了var a = 1; var b = 2;这种写法，还可以使用,进行更便利的创建多个变量：

// 使用逗号创建多个变量
var a = 1,
    b = 2,
    c = 3;
    
// 等同于
var a = 1;
var b = 2;
var c = 3;

2.2 var声明作用域

变量存在哪个作用域中是根据变量所声明的场景位置决定，有两种场景：全局、函数。在全局作用域中声明var变量，该变量在任何地方都可以被访问到，而且还可以通过window.变量名访问。如果在函数内部声明变量，那么这个变量就只属于这个函数自己的，外部访问就会报错，最后变量会在函数退出的时候被销毁。

// 声明全局变量
var a = 1;
// 访问全局变量
console.log(a);  // 1
console.log(window.a);  // 1

// 声明函数作用域内的变量
function fun () {
    var b = 2;  // 只属于fun函数的变量
    console.log(b);  // 2
};
fun();  // 2
console.log(b);  // 报错：b is not defined(变量b未定义)

2.3 var的变量提升

变量提升其实就是在初始化的时候，var变量会提升到当前作用域最顶部，并且每一个变量的值都是默认undefined，当js引擎执行到变量赋值的代码后，变量的值才会是我们想要的那个值，根据这个理论，来看下面一段代码，思考一下代码执行的结果是什么：

var a = 1,
    b = 2;
    
function fun (a) {
    console.log(b);
    var b = 6;
    var b = 5;
    console.log(a);
    console.log(b);
};
console.log(b);
fun(4);
console.log(b);

上面这段代码其实并没有复杂的交互，只是多次的访问某些变量，会让人有点眼花，没关系，我们来一步一步的分解这些代码，得到最终的结果，看是否和你的结果一样：

1. 全局作用域中出现了三个变量：a、b、fun(函数名也是一个变量)
2. 在函数执行前打印了全局作用域中的变量b，所以得到的是2
3. 调用函数并传入参数值，开始执行函数内部代码
4. 此时函数内部变量a和b都提升到了函数作用域顶部，并且值都是undefined
5. 变量a被赋值4
6. 打印变量b，此时变量还没有被赋值，所以得到的是undefined
7. 变量b开始被赋值，但遇到了两个重名变量，最后一个变量会覆盖之前的所有重名变量
8. 获取变量a，还记得吗？在执行参数的时候给变量a赋值了4，所以我们获得的也是4
9. 因为之前的变量b被后面的变量b覆盖了，所以现在获取变量b，获得的是5
10. 函数内部代码执行完毕，开始获取变量b的值
11. 虽然函数内部也有b变量，但那是属于函数自己的，并且这个变量在函数执行完后被销毁了，所以我们只能获取到全局作用域下的变量b，内容是2

所以最终结果是：2、undefined、4、5、2。

全局变量

全局变量除了在最外层声明，其实还有另外一种声明方式，不过这种方式并不受推荐，所以了解就好：

var a = 1;  // 正常的声明全局变量

function fun () {
    b = 2; // 变量名前面没有写var，默认成为全局作用域
};

// 因为函数还没有执行，所以这块会报错
console.log(b);  // b not defined

fun();
console.log(b);  // 2
 

三、let声明

3.1 块级作用域

相比于var变量，let显得更加精致，因为它有自己的声明准则，其中最大的区别就是let声明的范围是块级作用域，那么什么是块级作用域呢，其实很好理解：{}符号中的区域被称为块级作用域，需要注意的是这个区域对var并没有影响。

块级作用域和函数作用域相似，控制着内部变量的读取权限：

{ // 块级作用域
  let a1 = 2;
}
console.log(a1);  // 报错：a1 is not defined

3.2 暂时性死区

在let创建之前的瞬间被称为暂时性死区，听起来很高级，其实就是在暂时性死区阶段访问不到let变量的意思，因为let变量没有变量提升这一说；let还有一个特点就是不能被重复声明，也就是说let变量不会像var变量一样可以声明多个重名变量，在let变量这会报错的。

{
    console.log(b);  // 因为没有变量提升，所以在声明前访问不到该变量，报错：annot access 'b' before initialization
    let b = 1;
}

let a = 1;
let a = 2;  // 重名变量会报错：caught SyntaxError: Identifier 'a' has already been declared

let的全局作用域

虽然前面说let声明的范围是块级作用域，但如果在最外层全局作用域里声明let变量，也会被认为是合法的全局变量，与var变量不同的是let全局作用域不能通过window.变量名访问。

for循环中的let和var

for循环过程中会不断产生新的块级作用域，这个时候var和let变量值迭代更新就有了不同的变化：

let arr = [1, 2, 3, 4, 5];

for (let i = 0; i < arr.length; i++) {};
console.log(i);  // 报错：i is not defined

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

上面代码中第一个循环内，使用let创建了一个变量，当我们在循环体外访问该变量时竟然报错了！这是因为循环体使用了{}，所以形成了块级作用域，此时在块作用域外访问let变量肯定会报错。当我们访问var变量的时候为什么没有报错呢？那是因为var变量不受块级作用域影响，它成为了全局作用域。

四、const声明

const声明被称为常量，为了更好理解，下文还是用变量进行介绍

const和let非常相似：不能声明重名变量、存在暂时性死区、没有变量提升、有块级作用域限制。这些都是非常nice的规则，在此基础上，const还增加了两个规则：1、声明时必须赋值；2、值不可修改；

声明时必须赋值这个很好理解，就是在创建的时候必须给这个变量一个初始值。我们详细说一下值不可修改这一点：

const a = '2';
a = 2; // 报错a变量已经声明，不能重复创建：entifier 'a' has already been declared

上面代码首先我们创建了const变量并为其赋值字符串类型的’2’，在第二行代码实际上是想把数字类型的2赋值给刚刚创建的const变量中，这时候确保错了，由此可见const变量适合用在值不会变的场景。还有一种情况就是给const变量赋值数组和对象类型的值，因为这两个数据类型属于引用类型，所以只要在引用地址值不变的情况下，更改、新增、删除对象或数组中的元素是不会报错的。

总结

根据本篇文章的介绍，我们可以得出一个结论：尽量不用var，变量值需要变化的时候使用let，值不需要改变的时候使用const。