99, 此時是全局變量的a function f() { console">
了解IT技術
老九你最好的選擇

JS中的let和var的區別

ES6 新增了let命令,用來聲明局部變量。它的用法類似于var,但是所聲明的變量,只在let命令所在的代碼塊內有效,而且有暫時性死區的約束。

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

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
let a = 0; 
let a = 'sss'; 
// Uncaught SyntaxError: Identifier 'a' has already been declared
贊(2) 打賞
未經允許不得轉載:老九IT技術網 » JS中的let和var的區別

評論 搶沙發

  • 昵稱 (必填)
  • 郵箱 (必填)
  • 網址

老九為IT技術人提供最全面的IT資訊和交流互動

歡迎投稿廣告合作

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

微信掃一掃打賞

足彩计算器混合过关