卡卡網(wǎng)

在前面文章曾介紹過JS三種聲明方式：var,let,const，在本文中，將進(jìn)一步探討JS中的變量var、let和const。本文將幫助你理解為什么要使用 const 和 let 、 var 以及在哪里使用它們。

var

var 在 Javascript 中一直使用，而 let 和 const 在 ES6 版本中被引入。使用var變量，你可以將值重新分配給變量，也可以使用 var 關(guān)鍵字重新聲明變量。

例子：

var b = "Hello" 
var b = "Hey" // 用戶可以使用 var 關(guān)鍵字重新聲明它
b = "nice" // 你也可以為變量重新賦值

范圍

var 關(guān)鍵字具有全局作用域或函數(shù)作用域。這意味著如果任何帶有 var 關(guān)鍵字的變量被全局聲明（在函數(shù)外部），那么它可以在函數(shù)內(nèi)部訪問，也可以全局訪問?？蠢泳兔靼琢?。

示例 1

var b = "你好" 
function Checkb(){ 
    console.log(b) 
} 
console.log(b);

說明：在上面的示例中，可以看到帶有 var 關(guān)鍵字的變量“b”是全局聲明的，我們嘗試在函數(shù)內(nèi)部?jī)纱潍@取值，第二次在全局（函數(shù)外部）獲取值，因此兩種方式都得到了正確的結(jié)果。查看輸出：

"你好"
"你好"

但是如果在函數(shù)內(nèi)部聲明了帶有 var 關(guān)鍵字的變量“b”，那么它只能在函數(shù)內(nèi)部訪問，不能在函數(shù)外部訪問，并引發(fā)引用錯(cuò)誤。

示例2

function f() { 
  var b = "你好"; // 可以在這個(gè)函數(shù)中任何地方訪問 b
  console.log(b) 
} 
f(); 
 
console.log(b); // b 不可訪問
               // 因?yàn)樵诤瘮?shù)之外

輸出

解釋

在第二個(gè)例子中，變量“b”是在函數(shù)內(nèi)部聲明的，所以我們嘗試在函數(shù)內(nèi)部和外部獲取它一次。第一個(gè)我們得到了預(yù)期的結(jié)果，但第二個(gè)我們得到了 ReferenceError ，因?yàn)閹в?var 關(guān)鍵字的變量在函數(shù)之外是不可訪問的。

所以我們知道了全局作用域，var關(guān)鍵字也有函數(shù)作用域。

let

正如上面提到的，在 ES6 中引入了let 。let是var的改進(jìn)版本。使用 let 關(guān)鍵字，可以將值重新分配給變量，但不能使用 let 關(guān)鍵字重新聲明變量。

例子

let b = 1 
let b = 2 //錯(cuò)誤~用戶不能再次重新聲明變量
b = "0" // 你可以重新賦值給變量

解釋

變量“b”已經(jīng)用 let 關(guān)鍵字聲明了，所以不能重新聲明它。如果這樣做，會(huì)得到 SyntaxError( b has been defined )，但是可以像上面所做的那樣將值重新分配給變量。 

范圍

let有塊作用域，{}里面的任何東西都被認(rèn)為是一個(gè)塊。塊作用域意味著如果在塊內(nèi)聲明了“b”變量，那么它在塊外是不可訪問的。

例子：

let c = 10
if (c == 10) {
  let a = "你好"
  console.log(a) 
}
console.log(a)

輸出

你好
ReferenceError: a is not defined

解釋

我們?cè)噲D在聲明“a”的塊中獲取“a”的值，因此我們得到了預(yù)期的值。但是第二次我們沒有得到預(yù)期的值，而是得到了 ReferenceError ，因?yàn)?ldquo;a”是在塊內(nèi)聲明的，如果我們嘗試在塊外訪問它會(huì)顯示錯(cuò)誤。發(fā)生這種情況是因?yàn)槭褂?let 關(guān)鍵字聲明的任何變量都變成了塊作用域。

const

ES6中還引入了 const 關(guān)鍵字。const是不言自明的,它是一個(gè)常量，它保持恒定值。雖然let的性質(zhì)與const有很大不同，但它們都有很多相似之處，就像它們都具有塊作用域一樣。const關(guān)鍵字具有與let關(guān)鍵字相同的所有屬性，除了用戶無法更新它的屬性。請(qǐng)參閱下面的示例：

//let
let a = "john"
a = "micheal"       //值被更改

//const
const b = "red"
b = "blue"       //會(huì)提示錯(cuò)誤因?yàn)椴荒鼙桓?/pre>
使用 const 關(guān)鍵字，不能重新分配值，也不能用 const 重新聲明變量。如果這樣做會(huì)提示錯(cuò)誤。
例子
const b = "red" 
const b = "green" // 不允許重新聲明
b = "yellow" // 不允許重新賦值
范圍
正如之前提到的， const 也有像 let 這樣的塊作用域。塊范圍是什么，上面已經(jīng)說清楚了。
例子
{
  const x = 9
  console.log(x)
}
 
console.log(x)
輸出
9
ReferenceError: x is not defined
何時(shí)使用var、let和const
使用 const 關(guān)鍵字，代碼變得更干凈，使用 var 關(guān)鍵字，代碼變得混亂，因?yàn)槿绻陂L(zhǎng)代碼中錯(cuò)誤地將值重新分配給使用 var 關(guān)鍵字的變量，則很難調(diào)試代碼。所以開發(fā)人員最喜歡的是 const 和 let，特別是 const 使代碼更干凈，并且易于調(diào)試錯(cuò)誤。
結(jié)論
在結(jié)束之前，先總結(jié)一下剛剛了解的內(nèi)容：
var：函數(shù)范圍，可以更新和重新聲明。
let：塊作用域，可以更新，但不能重新聲明。
const：塊作用域，不能更新和重新聲明。
相關(guān)文章
    
實(shí)例詳解區(qū)別JS三種聲明方式：var,let,const
    
[解決]重聲明錯(cuò)誤類型Uncaught SyntaxError: redeclaration of ...
    

標(biāo)簽: let  var  const