es6中let與var的區別是什麼

區別：1、let變數有塊級作用域，而var變數沒有塊級作用域；2、var變數存在變數提升（無暫時性死區約束），可以先使用再宣告，而let變數不存在變數提升（有暫時性死區約束），必須先宣告再使用；3、let變數不能重複宣告，而var變數可以。

本教學操作環境：windows7系統、ECMAScript 6版、Dell G3電腦。

ES6 新增了let命令，用來宣告區域性變數。它的用法類似於var，但是所宣告的變數，只在let命令所在的程式碼塊內有效（塊級作用域），而且有暫時性死區的約束。

先看個var的常見變數提升的面試題目：

題目1：
var a = 99;            // 全域性變數a
f();                   // f是函數，雖然定義在呼叫的後面，但是函數宣告會提升到作用域的頂部。 
console.log(a);        // a=>99,  此時是全域性變數的a
function f() {
  console.log(a);      // 當前的a變數是下面變數a宣告提升後，預設值undefined
  var a = 10;
  console.log(a);      // a => 10
}

// 輸出結果：
undefined
10
99

如果以上題目有理解困難的童鞋，請系統的看一下老馬的免費JS高階視訊教學。

ES6可以用let定義塊級作用域變數

在ES6之前，我們都是用var來宣告變數，而且JS只有函數作用域和全域性作用域，沒有塊級作用域，所以{}限定不了var宣告變數的存取範圍。
例如：

{ 
  var i = 9;
} 
console.log(i);  // 9

ES6新增的let，可以宣告塊級作用域的變數。

{ 
  let i = 9;     // i變數只在 花括號內有效！！！
} 
console.log(i);  // Uncaught ReferenceError: i is not defined

let 配合for迴圈的獨特應用

let非常適合用於 for迴圈內部的塊級作用域。JS中的for迴圈體比較特殊，每次執行都是一個全新的獨立的塊作用域，用let宣告的變數傳入到 for迴圈體的作用域後，不會發生改變，不受外界的影響。看一個常見的面試題目：

for (var i = 0; i <10; i++) {  
  setTimeout(function() {  // 同步註冊回撥函數到 非同步的 宏任務佇列。
    console.log(i);        // 執行此程式碼時，同步程式碼for迴圈已經執行完成
  }, 0);
}
// 輸出結果
10   共10個
// 這裡面的知識點： JS的事件迴圈機制，setTimeout的機制等

如果把 var改成 let宣告：

// i雖然在全域性作用域宣告，但是在for迴圈體區域性作用域中使用的時候，變數會被固定，不受外界干擾。
for (let i = 0; i < 10; i++) { 
  setTimeout(function() {
    console.log(i);    //  i 是迴圈體內區域性作用域，不受外界影響。
  }, 0);
}
// 輸出結果：
0  1  2  3  4  5  6  7  8 9

let沒有變數提升與暫時性死區

用let宣告的變數，不存在變數提升。而且要求必須等let宣告語句執行完之後，變數才能使用，不然會報Uncaught ReferenceError錯誤。

例如：

console.log(aicoder);    // 錯誤：Uncaught ReferenceError ...
let aicoder = 'aicoder.com';
// 這裡就可以安全使用aicoder

ES6 明確規定，如果區塊中存在let和const命令，這個區塊對這些命令宣告的變數，從一開始就形成了封閉作用域。凡是在宣告之前就使用這些變數，就會報錯。
總之，在程式碼塊內，使用let命令宣告變數之前，該變數都是不可用的。這在語法上，稱為「暫時性死區」（temporal dead zone，簡稱 TDZ）。

let變數不能重複宣告

let不允許在相同作用域內，重複宣告同一個變數。否則報錯：Uncaught SyntaxError: Identifier 'XXX' has already been declared

例如：

let a = 0;
let a = 'sss';
// Uncaught SyntaxError: Identifier 'a' has already been declared

總結

ES6的let讓js真正擁有了塊級作用域，也是向這更安全更規範的路走，雖然加了很多約束，但是都是為了讓我們更安全的使用和寫程式碼。

【相關推薦：、】

以上就是es6中let與var的區別是什麼的詳細內容，更多請關注TW511.COM其它相關文章！