一、ES6之前宣告變數的方式

在ES5及以前版本的JavaScript采用的是var關鍵字來宣告變數，并且不支持塊級作用域,也就是說var宣告的變數時作用在全域作用域，下文會提到作用域的概念，

并且JavaScript是弱型別語言，也就是說宣告變數時不需要指定變數的型別，

一個關于JS中資料型別的小例子

var web = 'web前端';  
console.log(typeof web); // 輸出string
var web = 99;
console.log(typeof web); // 輸出number
var web = {};
console.log(typeof web); // 輸出object

關于變數提升的問題

console.log(web);
var web = 'web前端'; // 這里代碼不會報錯,會輸出一個undefined
	
// 這里的程序相當于這樣
var web;
console.log(web);
web = 'web前端'

因為var宣告的變數會提升到全域，這里相當于是先把var宣告的變數放在前面，但是沒有賦值，因此輸出的時候此時web的值為undefined，而let和const不存在變數提升，因為它們是只支持塊級作用域，

函式中的變數提升

function hd(){
    if(false){
        var str = 'web前端'
    }
    console.log(str);
}
hd(); // 此時也會輸出一個undefined

// 這里的程序跟上面類似，實際決議程序是這樣的
function hd(){
	var str;
    if(false){
        str = 'web前端'
    }
    console.log(str);
}
hd();

var宣告的變數無論其實際宣告的位置在何處，都會被JS引擎調整到所在函式（或全域）的頂部，這就是變數提升，

二、ES6中新增的宣告變數的方式

1.let關鍵字

基本用法：

{
	let a = 1;
	var b = 2;
}
console.log(a);
console.log(b);

這里的代碼會報錯，提示a沒有定義，因為在JS中，大括號{}括起來的內容是一個塊級作用域，因此let宣告的變數僅在其代碼塊內有效，所以外部的輸出會報錯，var宣告的變數雖然可以輸出但是因為此時程式報錯了，所以不會執行剩余的代碼

重復宣告：

function fn(){
    let a=10;
    let a=1;
    console.log(a);
}
fn() // 這里代碼會出錯

function fn(){
    var a=10;
    var a=1;
    console.log(a);
}
fn() // 這里會輸出1

因為 let宣告的變數不能重復宣告，而var宣告的變數就可以，

for回圈中的應用

for(let i = 0; i < 10; i++){
	console.log(i); // 這里會輸出 0到 9
}
console.log(i); // 這里代碼就會報錯

for回圈的計算器很適合使用let命令，因為let宣告的變數只在其代碼塊內有效，for回圈是一個作用域，因此后面的i就訪問不到了，這樣后面的代碼就不會容易混淆，

for(var i = 0; i < 10; i++){
	console.log(i); // 這里會輸出 0到 9
}
console.log(i); // 這里代碼就不會報錯了，并且會輸出10

因為var宣告的變數會被提升到全域，所以此時經歷了最后一次i++后i的值就會被修改為10，因此最后一個會輸出10，

2.暫時性死區（TDZ）

代碼如下

var temp = 123;
if (true) {
    temp = 'abc';
    let temp;
}

let宣告的變數必須先宣告后使用，ES6明確規定，如果區塊中存在let或者const命令，那么這個區塊對這些命令宣告的變數從一開始就形成了一個封閉的作用域，在代碼塊內，使用let宣告的變數之前，該變數都是不可用的，這個區域就被成為暫時性死區.

3.JS中的作用域

• 變數或函式起作用的區域，
• JavaScript采用的是“詞法作用域”，即變數作用域取決于變數所在的代碼區域，
• ES6中新增了“塊級作用域”，也包含了ES5中的“全域作用域”和“函式作用域”

全域作用域

• 在所有函式之外定義的變數擁有全域作用域，該變數為全域變數，
• 全域變數可以在當前頁面中任何JavaScript代碼中訪問，

函式作用域

• 在函式中宣告的變數（包括函式引數）指定在其所宣告的函式內被訪問，

塊作用域

• 由大括號{}限定的代碼區域，let和const宣告的變數具備可訪問的塊級作用域，

實體代碼：

var v1 = 100;
function f1() {
    console.log(v1, v2); // 輸出兩個undefined
    var v1 = 110;
    var v2 = 200;
    function f2() {
        let v3 = 300;
        console.log(v1, v2, v3); // 輸出110,200,300
    }
    f2();
    console.log(v1, v2, v3); // 報錯
}
f1();
console.log(v1, v2, v3); // 報錯

第一個會輸出兩個undefined，因為在函式內var宣告的會提升到所在函式作用域的頂部或者全域，此時v1,v2提升后的值就為undefined了，
第二個會輸出110,200,300，因為在函式作用域中有一個就近原則，f2函式中沒有v1,v2就會到上面去找，再找不到就會到全域去找，然后輸出
第三個就會報錯了，因為let宣告的變數只在其作用域有效，此時let宣告的變數在函式內，因此外部的就不能訪問到let的值，
第四個也會報錯，var宣告的變數只會提升到所在作用域的頂部，此時var宣告的變數在函式內，因此全域的訪問v2,v3也是訪問不到的，

ES5及以前只有全域作用域和函式作用域，從而會導致一些問題出現，

var tmp = new Date();
function f() {
    console.log(tmp); // 這里輸出undefined
    if (false) {
        var tmp = 'hello';
    }
}
f();

這會導致函式內層的變數會覆寫掉外層的變數，此時tmp就不是全域的值了，而是內部提升的值，

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

用來計數的回圈變數就會泄露為全域變數，

4.const關鍵字

基本用法：const宣告一個只讀的常量，一旦宣告，那么其值不能改變且必須初始化，除此之外，與let的用法都是一致，

const foo={y:10};
foo.x=100;
console.log(foo.x); // 輸出100
console.log(foo); // 輸出{y:10,x:100}

當const宣告的常量保存的不是一個值，而是一個地址的時候，該常量所參考的物件是可以更改成員的，只是不能更改常量保存的地址，

let b = 100;
var a = 200;
console.log(window.a); // 輸出200
console.log(window.b); // 報錯，沒有定義

瀏覽器的頂層物件為window，var宣告的變數會關聯到頂層物件中，而let和const就不會，

5.var、let和const的區別

1. var 宣告的變數屬于函式作用域或全域作用域，而 let 和 const 宣告的變數只屬于塊級作用域
2. var 存在變數提升，而 let 和 const 不存在變數提升
3. var 宣告的變數可以重復宣告，并且在同一個作用域下，let 和 const 不能重復宣告，且const不能修改，

總結

ES6新增了let和const命令，所宣告的變數不屬于頂層物件window屬性，但var和function宣告的全域變數依然是頂層物件的屬性，
由于ES6及以后有了塊級作用域的概念，更好的作用域識別，因此在回圈計數等其他情況下盡量使用let關鍵字宣告變數，用const來宣告常量