本文主要講解一下var與let在使用上的一些區別。

變量申明提升

var允許變量申明提前;但let不允許（即let必須申明之后才能使用）

console.log(num);
var num = 10;
// 輸出結果: undefined

console.log(num2);
let num2 = 20;
// 報錯

塊級作用域

在ES6之前，只有函數存在塊級作用域一說(外部無法直接訪問函數內部的變量)。在ES6中，由{}號包裹的區域就形成了一個塊級作用域，let申明的變量，只在當前{}號內有效。

for(var i = 0; i < 5; i++) {
}
console.log(i);
// 輸出結果為：5

for(let j = 0; j < 5; j++) {
}
console.log(j);
// 報錯

變量重新申明

var允許重新定義某個變量;在同一個塊級作用域內,let不允許重新申明！

var num = 10;
var num = 20;
console.log(num);
// 輸出結果：20

// 同一塊級作用域
{
  var num2 = 30;
  let num2;
  // 報錯，提示num2已經被申明
}

// 不同塊級作用域
{
  let result = 1;
  {
    let result = 2;
  }
  console.log(result);
}

暫時性死區

網上很多資料對其解釋的比較繞，其實壓根就不需要太在意這些概念。
秉持一個原則：let必須先申明再使用！ let必須先申明再使用！ let必須先申明再使用！重要的事情說三遍！！！就可以避免該問題。

let color = 'red';
function getColor() {
  color = 'green';
  let color;
  return color;
}
getColor();
// 報錯，雖然不同塊級作用域，可以重新申明變量，但是不允許在未申明之前直接使用

window對象

另外一個小的細節點，那就是window對象。

var a = 1;
window.a // 輸出結果為：1

let b = 2;
window.b  // 輸出結果：undefined

const(具有let一樣的特性)

const申明變量時，需要注意2點：

1. 申明后必須直接初始化，不能留在以后賦值，否則報錯;
2. const申明的變量并不是固定不變的
   針對第二點，單獨說明如下：

const MAX = 100;
MAX = 200;
// 報錯，普通變量用const申明后，無法再修改

const Student = {
  name: '小紅'
};
Student.name = '小明';  // 可以修改
Student = {};                  // 報錯

根據上面兩個例子可知：const申明的變量,如果是普通變量，確實無法再修改；但如果是引用類型的變量(數組、對象),則可以修改。也就是說，const申明的變量是不變的，指的是變量所指向的內存地址的不變。