let、const、var的区别你可能不知道

let、const、var变量声明的区别

之前有幸做过面试官，当然在我的职业生涯中也遇到过不少被面试的场景，面试的问题中大概率会包括JS变量声明的区别。
大多数人回答的很简单，一句话。

‘嘿，不就是let声明不可提升，只在块级作用域中有效嘛，const声明不可更改呀！’

可是这短短一句话就足以改变面试官对于你的态度。
相信你看完这个文章，下次有机会面试的话你可以多聊聊。

1、块级作用域

在ES5中只有全局作用域和函数作用域，这对于编程来说并不友好，比如经典的for循环。

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

console.log(i); // 5

这是因为循环变量i此时是全局作用域，for循环结束时，i的值被改变为5.
let实际上为 JavaScript 新增了块级作用域。

2、let

function A() {
  let n = 5;
  if (true) {
    let n = 10;
  }
  console.log(n); // 5
}
A()

这段代买就是块级作用域的体现，第二次n的声明只在当前块中生效；
JS会把大括号中的区域视为块，在块中的变量通常情况下是不会影响块外的。
重点：

ES6 的块级作用域必须有大括号，如果没有大括号，JavaScript 引擎就认为不存在块级作用域。

3、const

const声明一个只读的常量。一旦声明，常量的值就不能改变。这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。

const foo;

这条语句在JS中会报错。
const的作用域与let命令相同：只在声明所在的块级作用域内有效。

重点
实际上const声明的值并非是变量的值不可变动，这对于简单类型的值来说，和声明一个常量没有区别。但对于复合类型的值来说，就大不一样。
比如声明一个对象：

const foo = {};

为 foo 添加一个属性，可以成功

foo.prop = 123;

但是如果此时在对foo进行声明就会报错：
const foo = {};

// 为 foo 添加一个属性，可以成功
foo.prop = 123;
foo.prop // 123

// 将 foo 指向另一个对象，就会报错

foo = {}; // TypeError: "foo" is read-only

这下就很清晰了，常量foo存储的是一个地址，这个地址是惟一的，但是对象本身是可以进行赋值操作的。

实际上JS中的声明变量有六种方法，具体参考这里

4、var

var 在es5中可谓是大行其道，以至于在复杂系统中因为变量声明导致的各种问题，着实让人头疼。

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10

上面代码中，变量i是var命令声明的，在全局范围内都有效，所以全局只有一个变量i。每一次循环，变量i的值都会发生改变，而循环内被赋给数组a的函数内部的console.log(i)，里面的i指向的就是全局的i。也就是说，所有数组a的成员里面的i，指向的都是同一个i，导致运行时输出的是最后一轮的i的值，也就是
10。

这就是var命令的一个缩影。如果可能的话，在你的程序中尽量不要出现‘var’