let和const

let

基本用法

let命令，用來聲明變量，用法類似于var,但聲明的變量，只在let命令所在的代碼塊內(nèi)有效。

{
let a =10;
var b=1;
}
a//ReferenceError:a is not defined
b//1

for循環(huán)的計數(shù)器，就很合適使用let命令

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

計數(shù)器i只在for循環(huán)體內(nèi)有效，在循環(huán)體外引用就會報錯。

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

上面代碼中，變量i是var聲明的，在全局范圍內(nèi)都有效。每一次循環(huán)，變量i的值都會發(fā)生改變，而循環(huán)內(nèi)被賦給數(shù)組a的函數(shù)內(nèi)部的console.log(i)，里面的i指向的就是全局的i。也就是說，所有數(shù)組a的成員里面的i，指向的都是同一個i，導(dǎo)致運行時輸出的是最后一輪的i的值，也就是10。

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

上面代碼中的變量i是let聲明的，當(dāng)前的i只在本輪循環(huán)有效，所以每一次循環(huán)的i都是一個新的變量，所以最后輸出6。

for循環(huán)還有一個特別之處，就是設(shè)置循環(huán)變量的那部分是一個父作用域，而循環(huán)體內(nèi)部是一個單獨的子作用域。

for (let i = 0; i < 3; i++) {
  let i = 'abc';
  console.log(i);// abc abc abc
}

上面代碼輸出了3次abc。這表明函數(shù)內(nèi)部的變量i與循環(huán)變量i不在同一個作用域，有各自單獨的作用域。

不存在變量提升

var命令會發(fā)生“變量提升”現(xiàn)象，即變量可以在聲明之前使用，值為undefined。而let不會發(fā)生“變量提升”現(xiàn)象。所以，變量一定要在聲明后使用，否則報錯。

console.log(foo); // 輸出undefined
console.log(bar); // 報錯ReferenceError
var foo = 2;
let bar = 2;

暫時性死區(qū)

只要塊級作用域內(nèi)存在let命令，它所聲明的變量就“綁定”這個區(qū)域，不再受外部的影響。

var tmp = 123;
if (true) {
  tmp = 'abc'; // ReferenceError
  let tmp;
}

ES6明確規(guī)定，如果區(qū)塊中存在let和const命令，這個區(qū)塊對這些命令聲明的變量，從一開始就形成了封閉作用域。凡是在聲明之前就使用這些變量，就會報錯。
總之，在代碼塊內(nèi)，使用let命令聲明變量之前，該變量都是不可用的。這在語法上，稱為“暫時性死區(qū)”。

if (true) {
  tmp = 'abc'; // ReferenceError
  console.log(tmp); // ReferenceError
  let tmp; 
  console.log(tmp); // undefined
  tmp = 123;
  console.log(tmp); // 123
}

上面代碼中，在let命令聲明變量tmp之前，都屬于變量tmp的“死區(qū)”。
“暫時性死區(qū)”也意味著typeof不再是一個百分之百安全的操作。

typeof x; // ReferenceError
let x;

作為比較，如果一個變量根本沒有被聲明，使用typeof反而不會報錯。

typeof undeclared_variable // "undefined"

不允許重復(fù)聲明

let不允許在相同作用域內(nèi)，重復(fù)聲明同一個變量。

// 報錯
function () {
  let a = 10;
  var a = 1;
}
// 報錯
function () {
  let a = 10;
  let a = 1;
}

因此，不能在函數(shù)內(nèi)部重新聲明參數(shù)。

function func(arg) {
  let arg; // 報錯
}
function func(arg) {
  {
    let arg; // 不報錯
  }
}

塊級作用域

為什么需要塊級作用域

ES5只有全局作用域和函數(shù)作用域，沒有塊級作用域，這帶來很多不合理的場景。
第一種場景，內(nèi)層變量可能會覆蓋外層變量。

var tmp = new Date();
function f() {
  console.log(tmp);
  if (false) {
    var tmp = "hello world";
  }
}
f(); // undefined

上面代碼中，函數(shù)f執(zhí)行后，輸出結(jié)果為undefined，原因在于變量提升，導(dǎo)致內(nèi)層的tmp變量覆蓋了外層的tmp變量。
第二種場景，用來計數(shù)的循環(huán)變量泄露為全局變量。

var s = 'hello';
for (var i = 0; i < s.length; i++) {
  console.log(s[i]);
}
console.log(i); // 5

上面代碼中，變量i只用來控制循環(huán)，但是循環(huán)結(jié)束后，它并沒有消失，泄露成了全局變量。

ES6的塊級作用域

let實際上為JavaScript新增了塊級作用域。

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

上面的函數(shù)有兩個代碼塊，都聲明了變量n，運行后輸出5。這表示外層代碼塊不受內(nèi)層代碼塊的影響。如果使用var定義變量n，最后輸出的值就是10。

const命令

const聲明一個只讀的常量。一旦聲明，常量的值就不能改變，改變常量的值會報錯。

const PI = 3.1415;
PI // 3.1415
PI = 3; // TypeError: Assignment to constant variable.

const聲明的變量不得改變值，這意味著，const一旦聲明變量，就必須立即初始化，不能留到以后賦值。

const foo;
// SyntaxError: Missing initializer in const declaration

const的作用域與let命令相同：只在聲明所在的塊級作用域內(nèi)有效。

if (true) {
  const MAX = 5;
}
MAX // Uncaught ReferenceError: MAX is not defined

const命令聲明的常量也是不提升，同樣存在暫時性死區(qū)，只能在聲明的位置后面使用。

f (true) {
  console.log(MAX); // ReferenceError
  const MAX = 5;
}

const聲明的常量，也與let一樣不可重復(fù)聲明。

var message = "Hello!";
let age = 25;
// 以下兩行都會報錯
const message = "Goodbye!";
const age = 30;