在JavaScript中使用let與var聲明變量的區(qū)別是什么？相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。

創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),延邊朝鮮族企業(yè)網(wǎng)站建設(shè),延邊朝鮮族品牌網(wǎng)站建設(shè),網(wǎng)站定制,延邊朝鮮族網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,延邊朝鮮族網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

1.ES6可以用let定義塊級(jí)作用域變量

代碼如下：

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

說(shuō)明：在ES6之前只有全局作用域和函數(shù)作用域，在ES6中新增了塊級(jí)作用域，用{}花括號(hào)表示。var 聲明的變量a在花括號(hào)外面仍然是會(huì)起作用的，但是let聲明的變量b只有在花括號(hào)里面才會(huì)起作用的，在塊級(jí)作用域內(nèi)。

2.let配合for循環(huán)的獨(dú)特應(yīng)用

代碼如下：

 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();

說(shuō)明：let非常適合用于for循環(huán)內(nèi)部的塊級(jí)作用域，在for循環(huán)當(dāng)中，每一次的執(zhí)行都是一個(gè)全新的獨(dú)立的塊級(jí)作用域。使用let聲明的變量在for循環(huán)當(dāng)中不會(huì)受到循環(huán)體外面的影響，不會(huì)受到變量污染，不會(huì)發(fā)生改變。對(duì)于var聲明的變量i會(huì)受到for循環(huán)的影響，受到變量污染，而let聲明的變量j不會(huì)受到for循環(huán)的影響。

3.let沒(méi)有變量提升與暫時(shí)性死區(qū)

代碼如下：

 function f3(){

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

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

說(shuō)明：在ES6中，如果區(qū)塊中存在let和const命令，這個(gè)區(qū)塊對(duì)這些命令聲明的變量，從一開(kāi)始就形成了封閉作用域。凡是在聲明之前就使用這些變量，就會(huì)報(bào)錯(cuò)。暫時(shí)性死區(qū)(TDZ)：在代碼塊內(nèi)，使用let命令聲明變量之前，該變量都是不可用的。在f31函數(shù)中，用var聲明的變量a發(fā)生了變量提升，打印出的值為undefined 未定義，而用let聲明的變量b報(bào)錯(cuò)Uncaught ReferenceError，不會(huì)發(fā)生變量提升。在f32函數(shù)中，用使用let命令聲明的變量a之前，都屬于變量a的暫時(shí)性死區(qū)，形成封閉作用域，該變量都是不可用的，會(huì)報(bào)錯(cuò)，Uncaught ReferenceError: a is not defined。在let聲明變量后，它是一個(gè)未定義的變量。當(dāng)再給變量a進(jìn)行賦值操作以后，它的值可以正常打印出來(lái)。

4.let變量不能重復(fù)聲明

代碼如下：

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();

說(shuō)明：let不允許在相同作用域內(nèi)，重復(fù)聲明同一個(gè)變量，否則報(bào)錯(cuò)。在函數(shù)f4中，無(wú)論是用兩個(gè)let聲明同一個(gè)變量a，還是一個(gè)let聲明變量b和一個(gè)var聲明變量b，都是會(huì)報(bào)錯(cuò)的，Uncaught SyntaxError: Identifier ‘a(chǎn)' has already been declared 和 Uncaught SyntaxError: Identifier ‘b' has already been declared ， 所以不能夠重復(fù)聲明同一個(gè)變量。

JS中的let和var的區(qū)別補(bǔ)充

最近很多前端的朋友去面試被問(wèn)到let和var的區(qū)別，其實(shí)阮一峰老師的ES6中已經(jīng)很詳細(xì)介紹了let的用法和var的區(qū)別。我簡(jiǎn)單總結(jié)一下，以便各位以后面試中使用。

ES6 新增了let命令，用來(lái)聲明局部變量。它的用法類似于var，但是所聲明的變量，只在let命令所在的代碼塊內(nèi)有效，而且有暫時(shí)性死區(qū)的約束。

先看個(gè)var的常見(jiàn)變量提升的面試題目：

//題目1：
var a = 99;      // 全局變量a
f();          // f是函數(shù)，雖然定義在調(diào)用的后面，但是函數(shù)聲明會(huì)提升到作用域的頂部。 
console.log(a);    // a=>99, 此時(shí)是全局變量的a
function f() {
 console.log(a);   // 當(dāng)前的a變量是下面變量a聲明提升后，默認(rèn)值undefined
 var a = 10;
 console.log(a);   // a => 10
}

// 輸出結(jié)果：
undefined
10
99

如果以上題目有理解困難的童鞋，請(qǐng)系統(tǒng)的看一下老馬的免費(fèi)JS高級(jí)視頻教程。

ES6可以用let定義塊級(jí)作用域變量

在ES6之前，我們都是用var來(lái)聲明變量，而且JS只有函數(shù)作用域和全局作用域，沒(méi)有塊級(jí)作用域，所以{}限定不了var聲明變量的訪問(wèn)范圍。

例如：

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

ES6新增的let，可以聲明塊級(jí)作用域的變量。

{ 
 let i = 9;   // i變量只在 花括號(hào)內(nèi)有效?。?！
} 
console.log(i); // Uncaught ReferenceError: i is not defined

let 配合for循環(huán)的獨(dú)特應(yīng)用

let非常適合用于 for循環(huán)內(nèi)部的塊級(jí)作用域。JS中的for循環(huán)體比較特殊，每次執(zhí)行都是一個(gè)全新的獨(dú)立的塊作用域，用let聲明的變量傳入到 for循環(huán)體的作用域后，不會(huì)發(fā)生改變，不受外界的影響?？匆粋€(gè)常見(jiàn)的面試題目：

for (var i = 0; i <10; i++) { 
 setTimeout(function() { // 同步注冊(cè)回調(diào)函數(shù)到 異步的 宏任務(wù)隊(duì)列。
  console.log(i);    // 執(zhí)行此代碼時(shí)，同步代碼for循環(huán)已經(jīng)執(zhí)行完成
 }, 0);
}
// 輸出結(jié)果
10  共10個(gè)
// 這里面的知識(shí)點(diǎn)： JS的事件循環(huán)機(jī)制，setTimeout的機(jī)制等

如果把 var改成 let聲明：

// i雖然在全局作用域聲明，但是在for循環(huán)體局部作用域中使用的時(shí)候，變量會(huì)被固定，不受外界干擾。
for (let i = 0; i < 10; i++) { 
 setTimeout(function() {
  console.log(i);  // i 是循環(huán)體內(nèi)局部作用域，不受外界影響。
 }, 0);
}
// 輸出結(jié)果：
0 1 2 3 4 5 6 7 8 9

let沒(méi)有變量提升與暫時(shí)性死區(qū)

用let聲明的變量，不存在變量提升。而且要求必須 等let聲明語(yǔ)句執(zhí)行完之后，變量才能使用，不然會(huì)報(bào)Uncaught ReferenceError錯(cuò)誤。
例如：

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

ES6 明確規(guī)定，如果區(qū)塊中存在let和const命令，這個(gè)區(qū)塊對(duì)這些命令聲明的變量，從一開(kāi)始就形成了封閉作用域。凡是在聲明之前就使用這些變量，就會(huì)報(bào)錯(cuò)。

總之，在代碼塊內(nèi)，使用let命令聲明變量之前，該變量都是不可用的。這在語(yǔ)法上，稱為“暫時(shí)性死區(qū)”（temporal dead zone，簡(jiǎn)稱 TDZ）。

let變量不能重復(fù)聲明

let不允許在相同作用域內(nèi)，重復(fù)聲明同一個(gè)變量。否則報(bào)錯(cuò)：Uncaught SyntaxError: Identifier 'XXX' has already been declared

例如：

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

看完上述內(nèi)容，你們掌握在JavaScript中使用let與var聲明變量的區(qū)別是什么的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

分享名稱：在JavaScript中使用let與var聲明變量的區(qū)別是什么-創(chuàng)新互聯(lián)
文章來(lái)源：http://chinadenli.net/article36/cehdpg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、網(wǎng)站內(nèi)鏈、用戶體驗(yàn)、App開(kāi)發(fā)、外貿(mào)建站、定制開(kāi)發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)