var, let, const

let 块级作用域

let 语句声明一个块级作用域的变量。关于块级作用域，可以简单地理解为表达式中 {} 内的部分。

let 声明的变量，仅在当前块级作用域内可访问到（其声明的块和子块中），变量只能在声明之后使用。

例 1：

if (true) {
  let a = 1;
  console.log('a1=', a);
}
console.log('a2=', a);

/* //以下为打印结果：
a1= 1
Uncaught ReferenceError: a is not defined at <anonymous>:5:20
*/


console.log('a1=', a);
let a = 1;

/* //以下为打印结果：
Uncaught ReferenceError: a is not defined at <anonymous>:1:20
*/

.

let 与 var 的差异

var 声明的变量只能是全局或者整个函数块的，并且变量声明总是在代码执行之前处理的，所以在代码中的任意位置声明变量，总是等效于在当前执行上下文的开头声明。这意味着变量可以在声明之前使用，这个行为叫做 “hoisting”（变量提升）。

例 2.1：

console.log('b1=', b);
if (true) {
  var b = 1;
  console.log('b2=', b);
}
console.log('b3=', b);


/* //以下为打印结果：
b1= undefined
b2= 1
b3= 1
*/

上例 2.1，代码可理解为下面的例 2.2：

例 2.2：

var b;
console.log('b1=', b);
if (true) {
  b = 1;
  console.log('b2=', b);
}
console.log('b3=', b);

/* //以下为打印结果：
b1= undefined
b2= 1
b3= 1
*/

.

同一作用域下，var 可以重复声明一个变量，后声明的变量，会覆盖先声明的；而 let 不允许变量重复声明（会报错）；

var a = 1;
var a = 2;
console.log('a=', a);
// a= 2

let b = 1;
let b = 2;
console.log('b=', b);
// Uncaught SyntaxError: Identifier 'b' has already been declared

.

let 并不会像 var 一样在全局对象上创造一个属性：

var a = 1;
let b = 2;
console.log('this.a=', this.a); // this.a= 1
console.log('this.b=', this.b); // this.b= undefined

.

for 循环中的 var 和 let

for 循环中，var 与 let 的差异：

例 3.1

for (var i = 0; i < 3; i++) {
  console.log('i=', i);
  setTimeout(function () {
    console.log('setTimeout i=', i)
  }, 1000);
}

/* //以下为打印结果：
i= 0
i= 1
i= 2
setTimeout i= 3
setTimeout i= 3
setTimeout i= 3
*/

上例 3.1 中 var 声明的变量是全局的，等效于如下写法：

例 3.2：

var i
for (i = 0; i < 3; i++) {
  console.log('i=', i);
  setTimeout(function () {
    console.log('setTimeout i=', i)
  }, 1000);
}

根据 javascript 异步、单线程的知识可知，首先会在主进程中执行完 for 循环，此时 i=3，再将异步队列中的三个 setTimeout 内部函数体，放到主进程中执行，由于这三个 setTimeout 函数访问的 i 就是全局上的 i ，故都是打印 3 。

.

而 let 声明的变量 i，当前的 i 只在本轮循环有效，所以每一次循环的 i 其实都是一个新的变量

例 3.3：

for (let i = 0; i < 3; i++) {
  console.log('i=', i);
  setTimeout(function () {
    console.log('setTimeout i=', i)
  }, 1000);
}

/* //以下为打印结果：
i= 0
i= 1
i= 2
setTimeout i= 0
setTimeout i= 1
setTimeout i= 2
*/

上例写成如下代码，可能更容易理解：

例 3.4：

{
  let i;
  for (i = 0; i < 3; i++) {
    let j = i;
    console.log('j=', j);
    setTimeout(function () {
      console.log('setTimeout j=', j)
    }, 1000);
  }
}

/* //以下为打印结果：
j= 0
j= 1
j= 2
setTimeout j= 0
setTimeout j= 1
setTimeout j= 2
*/

在每次循环中，都用 let 声明了一个变量 j ，但运行时并没有报错，可见变量 j 并没有重复声明，即，这三次循环都相当于是一个独立的块作用域。

.

const

const 定义一个常量，并且该常量是块级作用域，很像使用 let 语句定义的变量。常量的值不能通过重新赋值来改变，并且不能重新声明。

const num = 1;
num = 2;

// Uncaught TypeError: Assignment to constant variable.

.

当 const 定义的是一个引用类型，如对象，它的属性是可以被修改的：

const obj = {
  name: 'Jean'
};
obj.name = 'Jack';
obj.age = 18;
console.log('obj=', obj); // {name: "Jack", age: 18}

const arr = [1, 2, 3];
arr.splice(0, 1);
arr.push(4);
console.log('arr=', arr); // arr = [2, 3, 4]

.

总结

var 声明的变量，只能是全局的或者函数块的；var 声明的变量会存在变量提升（hoisting），允许重复声明，后声明的变量会覆盖先声明的变量；

let 声明的变量，仅在当前块级作用域中能被访问，只能先声明再使用，不允许重复声明；在全局上声明变量时，let 不会像 var 一样在全局对象上创造一个属性：

注意 for 循环中， var 与 let 初始化变量的差异，let 初始化的变量 i，可理解为，每次循环中 i 都是一个新的变量。

const 声明一个常量，其作用域与 let 声明的变量一样，是块级作用域，const 声明的常量，不允许被重新赋值，若声明的是引用类型，可以修改其属性或子项。