let和const

let和const作為es6新增的關鍵字，和var類似用來聲明變量。

區別：

var定義變量，沒有塊的概念，可以跨塊訪問，不能跨函數訪問，不初始化出現undefined，不會報錯。

let定義變量，只能在塊作用域里訪問，也不能跨函數訪問，對函數外部無影響。

const定義常量，只能在塊作用域里訪問，也不能跨函數訪問，使用時必須初始化(即必須賦值)，而且不能修改。

let?的神奇之處

{

let a=10;

var b=1;

}

a// ReferenceError: a is not defined.?

b// 1 ?

上面代碼在代碼塊之中，分別用let和var聲明了兩個變量。然后在代碼塊之外調用這兩個變量，結果let聲明的變量報錯，var聲明的變量返回了正確的值。這表明，let聲明的變量只在它所在的代碼塊有效。

for循環的計數器，就很合適使用let命令。

for(leti=0;i<arr.length;i++){

}

console.log(i);//ReferenceError: i is not defined

上面代碼的計數器i，只在for循環體內有效。 下面的代碼如果使用var，最后輸出的是10。

上面代碼中，變量i是var聲明的，在全局范圍內都有效。所以每一次循環，新的i值都會覆蓋舊值，導致最后輸出的是最后一輪的i的值。 如果使用let，聲明的變量僅在塊級作用域內有效，最后輸出的是6。

上面代碼中，變量i是let聲明的，當前的i只在本輪循環有效，所以每一次循環的i其實都是一個新的變量，所以最后輸出的是6。

不存在變量提升

什么是變量提升，不急~ 我們先來回顧下基礎知識

1、在頂級的區域內聲明的變量為 window級別的變量。 也就是說var a=100 等價于 window.a=100;

2、局部的重新聲明變量沒有意義。var a=100;var a;后面的將沒有意義。

3、在有參數函數的定義中 function abc(p1){} abc(1),在函數執行中，先構建，在執行，會有兩個步驟，所以說當函數執行之前構建過程中，將臨時生成代碼 var p1=1;將來一切不賦值的聲明將變得沒有意義。

var p1;//沒有意義

var p1=2;//有意義。

全局作用域和局部作用域

全局作用域：整個JS執行環境

局部作用域：通過創建一個函數就開辟出了一個局部作用域

全局變量和 局部變量

全局變量：在全局作用域都可以訪問的變量

局部變量：只能在當前局部作用域訪問的

變量聲明提升：

如果變量聲明在函數里面，則將變量聲明提升到函數的開頭

如果變量聲明是一個全局變量，則將變量聲明提升到全局作用域的開頭

我們來看一下具體的例子

var a=1;

functiontest(){

console.log(a);

var a=1;

}

test();

// 輸出 undefined

// 為什么不是 1 呢 ？？？？

代碼中我們是這樣寫的，但是js在處理的時候，并不是按照這個順序來執行的。

其實是這樣的：

functiontest(){

var a;

console.log(a);//此時由于a并咩有被賦值，所以也就是undefined

a=1;

}

在看一個~~

c=5;

functiontest3(){

window. c=3;

console.log(c);

var c;

console.log(window.c);

}

test3();

// 輸出 undefined? 3

真實的執行順序是這樣的

c=5;//聲明一個全局變量c?

functiontest3(){

var c;//變量聲明提升，聲明一個局部變量

window.c=3;//改變全局變量c的值

console.log(c);//由于此時的c是一個局部變量c，并且沒有被賦值 c就是undefined? ??

console.log(window.c);//此時的c就是一個全局變量c，也就是值為3

}

test3();

但let不像var那樣會發生“變量提升”現象。所以，變量一定要在聲明后使用，否則報錯。

console.log(foo);// 輸出undefined?

console.log(bar);// 報錯referenceError

var foo=2;

letbar=2;

上面代碼中，變量foo用var命令聲明，會發生變量提升，即腳本開始運行時，變量foo已經存在了，但是沒有值，所以會輸出undefined。變量bar用let命令聲明，不會發生變量提升。這表示在聲明它之前，變量bar是不存在的，這時如果用到它，就會拋出一個錯誤。

在for循環中同樣var也會變量提升。

console.log(i);// undefined

for (var i = 0; i < 3; i++){

console.log(i);// 0 1 2?

}

i+=100;

console.log(i);// 103

在for循環中，var i = 0使得i變為全局變量，for循環之外依然可以訪問到變量i

實際上的相當于

vari// 提升到全局console.log(i);// undefinedfor(i=0;i<3;i++){console.log(i);// 0 1 2 }i+=100;console.log(i);// 103

如果使用let則不會提升變量，當然這段代碼也會報錯，無法執行下去。

console.log(i);// Uncaught ReferenceError: i is not defined// 后面代碼無法執行for(leti=0;i<3;i++){console.log(i);}i+=100;console.log(i);

暫時性死區

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

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

上面代碼中，存在全局變量tmp，但是塊級作用域內let又聲明了一個局部變量tmp，導致后者綁定這個塊級作用域，所以在let聲明變量前，對tmp賦值會報錯。

ES6明確規定，如果區塊中存在let和const命令，這個區塊對這些命令聲明的變量，從一開始就形成了封閉作用域。凡是在聲明之前就使用這些變量，就會報錯。

總之，在代碼塊內，使用let命令聲明變量之前，該變量都是不可用的。這在語法上，稱為“暫時性死區”(temporal dead zone，簡稱TDZ)。

if(true){// TDZ開始tmp='abc';// ReferenceError console.log(tmp); // ReferenceErrorlettmp;// TDZ結束 console.log(tmp); // undefinedtmp=123;console.log(tmp);// 123 }

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

typeofx;// ReferenceError letx;

上面代碼中，變量x使用let命令聲明，所以在聲明之前，都屬于x的“死區”，只要用到該變量就會報錯。因此，typeof運行時就會拋出一個ReferenceError。

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

typeofundeclared_variable// "undefined"

上面代碼中undeclared_variable是一個不存在的變量名，結果返回undefined。所以，在沒有let之前，typeof運算符是百分之百安全的，不會報錯。現在這一點不成立了。這樣的設計是為了讓大家養成良好的編程習慣，變量一定要在聲明之后使用，否則就報錯。

有些“死區”比較隱蔽，不太容易發現。

functionbar(x=y,y=2){return[x,y];}bar();// 報錯

上面代碼中，調用bar函數之所以報錯(某些實現可能不報錯)，是因為參數x默認值等于另一個參數y，而此時y還沒有聲明，屬于”死區“。如果y的默認值是x?，就不會報錯，因為此時x?已經聲明了。

functionbar(x=2,y=x){return[x,y];}bar();// [2, 2]

ES6規定暫時性死區和let、const語句不出現變量提升，主要是為了減少運行時錯誤，防止在變量聲明前就使用這個變量，從而導致意料之外的行 為。這樣的錯誤在ES5是很常見的，現在有了這種規定，避免此類錯誤就很容易了。

總之，暫時性死區的本質就是，只要一進入當前作用域，所要使用的變量就已經存在了，但是不可獲取，只有等到聲明變量的那一行代碼出現，才可 以獲取和使用該變量。

const

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

constPI=3.1415;console.log(PI)// 3.1415PI=3;// TypeError: Assignment to constant variable.

上面代碼表明改變常量的值會報錯。?const?聲明的變量不得改變值，這意味著，const一旦聲明變量，就必須立即初始化，不能留到以后賦值。

constfoo;// SyntaxError: Missing initializer in const declaration

上面代碼表示，對于const來說，只聲明不賦值，就會報錯。?const的作用域與let命令相同:只在聲明所在的塊級作用域內有效。

if(true){constMAX=5;}console.log(MAX)// Uncaught ReferenceError: MAX is not defined

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

if(true){console.log(MAX);// ReferenceError constMAX=5;}

上面代碼在常量MAX聲明之前就調用，結果報錯。

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

varmessage="Hello!";letage=25;// 以下兩行都會報錯constmessage="Goodbye!";constage=30;

對于復合類型的變量，變量名不指向數據，而是指向數據所在的地址。const命令只是保證變量名指向的地址不變，并不保證該地址的數據不變，所以將一個對象聲明為常量必須非常小心。

constfoo={};foo.prop=123;foo.prop// 123foo={};// TypeError: "foo" is read-only

上面代碼中，常量foo儲存的是一個地址，這個地址指向一個對象。不可變的只是這個地址，即不能把foo指向另一個地址，但對象本身是可變的，所以依然可以為其添加新屬性。

consta=[];a.push('Hello');// 可執行 a.length=0;// 可執行 a=['Dave'];// 報錯

上面代碼中，常量?a?是一個數組，這個數組本身是可寫的，但是如果將另一個數組賦值給?a?，就會報錯。 如果真的想將對象凍結，應該使用Object.freeze方法。

constfoo=Object.freeze({});// 常規模式時，下面一行不起作用; // 嚴格模式時，該行會報錯 foo.prop=123;

上面代碼中，常量foo指向一個凍結的對象，所以添加新屬性不起作用，嚴格模式時還會報錯。 除了將對象本身凍結，對象的屬性也應該凍結。下面是一個將對象徹底凍結的函數。

varconstantize=(obj)=>{Object.freeze(obj);Object.keys(obj).forEach((key,value)=>{if(typeofobj[key]==='object'){constantize(obj[key]);}});};

ES5只有兩種聲明變量的方法:var命令和function命令。ES6除了添加let和const命令，后面還會提到，另外兩種聲明變量的方法:import命令和class命令。所以，ES6一共有6種聲明變量的方法。