ES6 變數、常量聲明總結

較之前ES5，新頒布在聲明上有改變

一、var 對比 let

1、作用域不同

let只在命令所在的代碼塊 {} 里有效

ES5隻有全局作用域和函數作用域，沒有塊級作用域，帶來很多不合理的場景，比如：

第一種場景，內層變數可能會覆蓋外層變數。

var tmp = new Date;

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

f; // undefined

上面代碼的原意是，if代碼塊的外部使用外層的tmp變數，內部使用內層的tmp變數。但是，函數f執行後，輸出結果為undefined，原因在於變數提升，導致內層的tmp變數覆蓋了外層的tmp變數。

第二種場景，用來計數的循環變數泄露為全局變數。

var s = "hello";

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

console.log(i); // 5

上面代碼中，變數i只用來控制循環，但是循環結束後，它並沒有消失，泄露成了全局變數。

ES6的塊級作用域可以多個嵌套，外層作用域無法訪問內層作用域，內層作用域可以聲明外層作用域的參數。

另外，ES6標準也運行在塊級作用域下聲明函數，而作用域外不可以引用，函數聲明是類似於var還是let,歌瀏覽器可能有自己的處理方式，
所以暫時不建議在塊級作用域下聲明函數

塊級作用域是一個語句，裡面封裝了若干語句，沒有返回值，現在有一個提案，使得塊級作用域可以變為表達式，也就是說可以返回值，
辦法就是在塊級作用域之前加上do，使它變為do表達式。

2、let 不存在變數提升

3、let 存在暫時性死區

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

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

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

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

4、let 不允許重複聲明變數

注意：不能在函數里重複聲明參數，會報錯

二、const 命令

ES5沒有常量的概念，ES6新增常量

const 命令聲明一個只讀的常量，一旦聲明，值不可以改變，改變會報錯；只聲明不賦值也會報錯。

作用域與let 相同，只在所在塊級作用域內有效，其他的特性也相同

本質上，const 實際上保證的並不是變數的值不可以改動，而是變數指向的那個內存地址不可以改動，

對於簡單類型的數據（數值、字元串、布爾值），值就保存在變數指向的那個內存地址，因此等同於常量。

但對於複合類型的數據（主要是對象和數組），變數指向的內存地址，保存的只是一個指針，const只能保證這個指針是固定的，至於它指向的數據結構是不是可變的，就完全不能控制了。因此，將一個對象聲明為常量必須非常小心。

三、ES6聲明變數的6中方式

（ES5隻有 var 和function 函數聲明兩種方式）

1、ES6 聲明方式有var、 let、const、function、import、class

inport、class 方式的聲明留坑，待填。

以上內容參照阮一峰老師的《ECMAScript 6 入門》，會不定期更新；

另外分享群1、651308349 2、627336556 均為前端技術交流群，歡迎大家加入

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！