詳解js中let與var聲明變量的區別

ES6 新增了let命令，用來聲明局部變量，所聲明的變量，只在let命令所在的代碼塊內有效，而且有暫時性死區的約束。

1.ES6可以用let定義塊級作用域變量

代碼如下：

function f1(){
 {
 var a = 10;
 let b = 20;
 }
 console.log(a); // 10
 console.log(b); // Uncaught ReferenceError: b is not defined
 }
 f1();

說明：在ES6之前只有全局作用域和函數作用域，在ES6中新增了塊級作用域，用{}花括號表示。var 聲明的變量a在花括號外面仍然是會起作用的，但是let聲明的變量b只有在花括號里面才會起作用的，在塊級作用域內。

2.let配合for循環的獨特應用

代碼如下：

 function f2(){
 var i = 5;
 for(var i=0;i<=10;i++){

 }
 console.log(i); // 11

 var j = 5;
 for(let j=0;j<=10;j++){

 }
 console.log(j); // 5

 }
 f2();

說明：let非常適合用于for循環內部的塊級作用域，在for循環當中，每一次的執行都是一個全新的獨立的塊級作用域。使用let聲明的變量在for循環當中不會受到循環體外面的影響，不會受到變量污染，不會發生改變。對于var聲明的變量i會受到for循環的影響，受到變量污染，而let聲明的變量j不會受到for循環的影響。

3.let沒有變量提升與暫時性死區

代碼如下：

 function f3(){

 // 變量提升
 function f31(){
 console.log(a); // undefined
 var a = 10;

 console.log(b); // Uncaught ReferenceError: b is not defined
 let b = 10;
 }
 f31();

說明：在ES6中，如果區塊中存在let和const命令，這個區塊對這些命令聲明的變量，從一開始就形成了封閉作用域。凡是在聲明之前就使用這些變量，就會報錯。暫時性死區(TDZ)：在代碼塊內，使用let命令聲明變量之前，該變量都是不可用的。在f31函數中，用var聲明的變量a發生了變量提升，打印出的值為undefined 未定義，而用let聲明的變量b報錯Uncaught ReferenceError，不會發生變量提升。在f32函數中，用使用let命令聲明的變量a之前，都屬于變量a的暫時性死區，形成封閉作用域，該變量都是不可用的，會報錯，Uncaught ReferenceError: a is not defined。在let聲明變量后，它是一個未定義的變量。當再給變量a進行賦值操作以后，它的值可以正常打印出來。

4.let變量不能重復聲明

代碼如下：

function f4(){
 let a = 10;
 let a = 20;
 console.log(a); // Uncaught SyntaxError: Identifier 'a' has already been declared

 let b = 10;
 var b = 20;
 console.log(b); // Uncaught SyntaxError: Identifier 'b' has already been declared

 }
 f4();

說明：let不允許在相同作用域內，重復聲明同一個變量，否則報錯。在函數f4中，無論是用兩個let聲明同一個變量a，還是一個let聲明變量b和一個var聲明變量b，都是會報錯的，Uncaught SyntaxError: Identifier ‘a' has already been declared 和 Uncaught SyntaxError: Identifier ‘b' has already been declared ， 所以不能夠重復聲明同一個變量。

以上所述是小編給大家介紹的let與var聲明變量區別詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com