卡卡網(wǎng)

var、let 和 const 是 javascript 中聲明變量的關(guān)鍵字。var 變量是一種在 javascript 中聲明變量的舊方法。在現(xiàn)代 javascript 中，我們使用ES2015(ES6)更新中引入的 let 和 const 變量；現(xiàn)在，與 var 變量相比，現(xiàn)代 javascript 中更頻繁地使用 let 和 const 變量。在本文中，我們將了解如何在 javascript 中使用var、let和const關(guān)鍵字聲明變量以及它們之間的區(qū)別。

var、let、const的區(qū)別介紹

Javascript 為我們提供了多種聲明變量的方法，但我們應(yīng)該使用哪一種？

假設(shè)我們創(chuàng)建了一個(gè)函數(shù)，并且我們需要一個(gè)函數(shù)內(nèi)部的常量變量，這意味著我們想要一個(gè)在任何情況下都不會(huì)更新的變量。這里如果我們聲明一個(gè) var 變量或 let 變量，那么它可以被更新，但是如果我們聲明一個(gè) const 變量，它在任何情況下都不會(huì)被更新，并且可以在我們的函數(shù)中正常工作。

變量聲明與初始化

為了存儲(chǔ)任何值，我們需要一個(gè)變量，所以首先，我們將聲明一個(gè) var 變量，然后將值初始化到變量中。

讓我們通過(guò)一個(gè)例子來(lái)看看。

var myName;
myName = "my name";
console.log(myName) //輸出 => "my name"

在上面的示例中，我們?cè)诘谝恍新暶髁艘粋€(gè)變量myName，然后在第二行初始化了字符串值“my name”。

在上面的示例中，我們采用了兩步方法，首先聲明一個(gè)變量，然后對(duì)其進(jìn)行初始化，但我們可以像這樣同時(shí)進(jìn)行聲明和初始化。

var myName = "my name";
console.log(myName); //輸出 => "my name"

在上面的例子中，我們以 var 變量為例，但是我們可以使用 let 和 const 進(jìn)行聲明和初始化。

功能范圍與塊范圍

在我們深入了解 javascript 中 let 和 var 和 const 的區(qū)別之前，讓我們先了解一下函數(shù)作用域和塊作用域之間的一些區(qū)別：

范圍

scope(作用域)代表我們的變量可以在我們的代碼中使用的位置以及不能使用的位置。

讓我們舉個(gè)例子來(lái)理解它。

function myFun() {
    var myName  = "my name";
    console.log(myName);
}

myFun(); //輸出 => "my name"
console.log(myName); //輸出 => ReferenceError

在示例中，我們有一個(gè)函數(shù)myFun()；在函數(shù)內(nèi)部，我們聲明一個(gè)變量myName并在控制臺(tái)上打印變量myName 。

當(dāng)我們調(diào)用函數(shù)myFun時(shí)，它會(huì)在控制臺(tái)上成功打印變量myName的值，但是當(dāng)我們嘗試在函數(shù)外部打印變量myName時(shí)，它??會(huì)拋出 referenceError，因?yàn)樽兞?code>myName具有函數(shù)范圍，這就是為什么在函數(shù)外部無(wú)法訪問(wèn)它的原因。

功能范圍

具有函數(shù)作用域的變量意味著，變量只能在它聲明的函數(shù)內(nèi)部使用，不能在函數(shù)外部訪問(wèn)，如果我們嘗試訪問(wèn)，則會(huì)出現(xiàn)引用錯(cuò)誤。

這是一個(gè)例子。

function name() {
    var myAge = 22;
    console.log(myAge); 
}

name() //輸出 => 22

console.log(myAge); //輸出 => ReferenceError

在示例中，我們創(chuàng)建了一個(gè)函數(shù)name()然后我們?cè)诤瘮?shù)內(nèi)部聲明了一個(gè)變量myAge，當(dāng)我們調(diào)用該函數(shù)時(shí)，它會(huì)在控制臺(tái)上打印myAge變量，但是當(dāng)我們嘗試在函數(shù)外部訪問(wèn)該變量時(shí)，它會(huì)拋出參考錯(cuò)誤。

塊作用域

塊用一對(duì)花括號(hào)表示，塊可以是包含打開(kāi)和關(guān)閉大括號(hào)的任何內(nèi)容。

具有塊范圍的變量只能在其聲明的塊內(nèi)使用，在塊外不可訪問(wèn)，如果我們嘗試訪問(wèn)，則會(huì)出現(xiàn)引用錯(cuò)誤。

這是一個(gè)例子。

if(true) {
    let myName = "your name";
    console.log(myName); //輸出 => "your name"
}
console.log(myName); //輸出 => ReferenceError

在上面的示例中，我們有一個(gè)條件為 true 的 if 塊，在 if 塊中，我們聲明了一個(gè)變量名myName。現(xiàn)在，當(dāng)我們嘗試將myName變量打印到控制臺(tái)時(shí)，它會(huì)成功打印，但是當(dāng)我們嘗試在 if 塊之外打印變量時(shí)，會(huì)出現(xiàn)引用錯(cuò)誤。

JS中的var變量是什么？

var變量是在 javascript 中聲明變量的舊方法；var 變量具有函數(shù)作用域，但在函數(shù)外部聲明時(shí)是全局作用域。

具有函數(shù)范圍的 var 變量示例：

function myFun() {
    var myName = "my name";
    console.log(myName);
}
myFun(); //輸出 => "my name"
console.log(myName); //輸出 => ReferenceError

在上面的示例中，我們有一個(gè)函數(shù)myFun()，在函數(shù)內(nèi)部，我們聲明了一個(gè)變量myName并在控制臺(tái)上打印它。

當(dāng)我們調(diào)用該函數(shù)時(shí)，它成功地在控制臺(tái)上打印了變量 myName ，但是當(dāng)我們嘗試在函數(shù)外部打印變量myName時(shí)，它??會(huì)拋出 ReferenceError，因?yàn)樗诤瘮?shù)外部不可訪問(wèn)。

當(dāng)我們?cè)诤瘮?shù)外部聲明一個(gè) var 變量時(shí)，它將具有全局范圍，并且可以在整個(gè)程序內(nèi)的任何地方使用。

具有全局范圍的 var 變量示例：

var myName = "your name";

function myFun() {
    console.log(myName); 
}

myFun(); //輸出 => "your name"

if(true) {
    console.log(myName); //輸出 => "your name"
}

console.log(myName); //輸出 => "your name"

在上面的示例中，我們有一個(gè)變量myName，它在函數(shù)體之外聲明，這就是為什么具有全局范圍的原因。

現(xiàn)在，我們嘗試在函數(shù)myFun中訪問(wèn)這個(gè)變量，它將變量打印到控制臺(tái)，接下來(lái)我們有一個(gè)條件為 true 的 if 塊；在這個(gè)if塊中，我們?cè)俅螌⒆兞?code>myName打印到控制臺(tái)，它也可以在此處訪問(wèn)。

我們做的最后一件事就是直接訪問(wèn)變量，我們成功訪問(wèn)變量并在控制臺(tái)打印出來(lái)。

正如我們所見(jiàn)，變量myName在我們程序中的任何地方都可以訪問(wèn)，因?yàn)樗哂腥址秶?/p>

var變量的提升

當(dāng)我們聲明一個(gè) var 變量時(shí)，它被提升到作用域的頂部并被賦值為 undefined。舉個(gè)例子來(lái)理解吧

console.log(myName); //輸出 => undefined 
var myName = "my name";

在上面的示例中，我們嘗試在聲明之前訪問(wèn)變量myName。

這是變量myName被提升到范圍頂部時(shí)的樣子。

var myName;
console.log(myName); //輸出 => undefined 
myName = "my name";

我們可以在這里看到，我們的變量被提升到作用域的頂部并使用 undefined 進(jìn)行初始化，但是值的初始化發(fā)生在聲明變量的地方。

如果我們只談?wù)撎嵘?，它?javascript 提供的一個(gè)特性，它在代碼執(zhí)行之前將變量和函數(shù)移動(dòng)到作用域的頂部；當(dāng)我們進(jìn)行函數(shù)聲明時(shí)也會(huì)發(fā)生這種情況。

函數(shù)聲明示例：

myFun() //輸出 => "my name"
function myFun() {
    var myName = "my name";
    console.log(myName);
}

在上面的示例中，我們?cè)诼暶髦罢{(diào)用了函數(shù)，但它仍然成功地調(diào)用了函數(shù)。

移到頂部后，我們的示例代碼將如下所示：

function myFun() {
    var myName = "my name";
    console.log(myName);
}
myFun() //輸出 => "my name"

var 變量的問(wèn)題

var 變量可以重新聲明和更新。重新聲明允許聲明多個(gè)同名的變量，因此，如果我們錯(cuò)誤地聲明了一個(gè)新變量，它將覆蓋原來(lái)的變量值。

讓我們通過(guò)一個(gè)例子來(lái)討論如何重新聲明它。

var name = "my name";
var myAge = 22;

if(myAge > 18) {
    var name = "another person name";
}

console.log(name); //輸出 => "another person name"

這里我們有一個(gè)名稱變量、 年齡變量和一個(gè)if條件塊，我們的if條件在這里為真，因此 if 塊內(nèi)的代碼將運(yùn)行并覆蓋先前聲明的名稱變量，因?yàn)?var 變量的重新聲明行為。此行為可能會(huì)影響代碼的輸出并導(dǎo)致意外輸出。

另一個(gè)問(wèn)題是，不能聲明一個(gè)常量變量。當(dāng)我們想要聲明一個(gè)可以更改/更新的變量時(shí)沒(méi)關(guān)系，但是如果我們想要聲明一個(gè)一旦聲明就不能更改的常量變量怎么辦。

JS 中的 let 變量是什么？

新版本的 javascript (ES6) 引入了兩種在 javascript 中聲明變量的新方法，其中一種方法是使用 let 關(guān)鍵字聲明變量。

這是 let 變量聲明的示例。

let myName = "my name";

在上面的例子中，我們使用let關(guān)鍵字來(lái)聲明一個(gè) let 變量并初始化一個(gè)字符串值“my name”。

let 變量引入了一個(gè)不允許重新聲明變量的特殊功能，如果您還記得，重新聲明是 var 變量中的一個(gè)問(wèn)題，但 let 變量解決了這個(gè)問(wèn)題。

let 變量中重新聲明的示例：

let myName = "my name";
let myName = "not my name";

console.log(myName); //輸出 => SyntaxError: redeclaration of let name

上面的例子展示了 javascript 中 let 和 var 和 const 的區(qū)別。在上面的示例中，我們聲明了一個(gè)變量myName并再次聲明了一個(gè)具有相同名稱的變量，當(dāng)我們嘗試在控制臺(tái)上打印該變量時(shí)，它會(huì)拋出SyntaxError: redeclaration of let name。

let 變量的范圍

let 變量具有塊作用域，這意味著 let 變量只能在它聲明的塊內(nèi)訪問(wèn)，如果我們嘗試在作用域之外訪問(wèn)它會(huì)顯示引用錯(cuò)誤。

讓我們舉個(gè)例子來(lái)理解它。

let myAge = 20;
if(myAge > 18) {
    let myName = "my name";
    console.log(myName) //輸出 => "my name"
}
console.log(myName); //輸出 => ReferenceError

上面的例子展示了 javascript 中 let 和 var 和 const 的區(qū)別。在上面的示例中，我們有一個(gè)變量myAge和一個(gè)if條件塊，我們的 if 條件在這里為真，所以我們進(jìn)入了if塊。在 if 塊中，我們有另一個(gè)變量myName，它位于塊范圍內(nèi)?，F(xiàn)在，當(dāng)我們嘗試在 if 塊之外打印變量myName時(shí)，我們將myName變量打印到 if 塊內(nèi)的控制臺(tái)，它是不可訪問(wèn)的，并且由于作用域而拋出 ReferenceError。

let變量的重新聲明

let 變量不允許重新聲明變量，但它允許更新變量，重新聲明變量是 var 變量的一個(gè)大問(wèn)題 let 變量幫助我們避免了重新聲明變量所帶來(lái)的問(wèn)題。

我們舉個(gè)例子來(lái)理解 let 變量中的重新聲明。

let myName = "my name";
myName = "my new name";
console.log(myName); //輸出 => "my new name"

上面的例子展示了 javascript 中 let 和 var 和 const 的區(qū)別。這里我們聲明了一個(gè)變量myName并賦值為“my name”，然后在下一行，我們?yōu)?code>myName變量賦值，即“my new name”。最后，當(dāng)我們嘗試在控制臺(tái)上打印myName變量的值時(shí)，它會(huì)打印myName變量的更新值，即“my new name”而不是“my name”。

let變量的提升

let 變量也被提升到作用域的頂部但是沒(méi)有被分配任何值，因此，如果我們?cè)诼暶髦皣L試訪問(wèn) let 變量，它將拋出語(yǔ)法錯(cuò)誤，因?yàn)樗鼪](méi)有任何值要打印。

讓我們舉個(gè)例子來(lái)進(jìn)一步理解它。

console.log(myName); //輸出 => ReferenceError
let myName = "my name";

上面的例子展示了 javascript 中 let 和 var 和 const 的區(qū)別。在這里，我們?cè)噲D在聲明之前訪問(wèn)變量myName 但得到 ReferenceError 因?yàn)樵诒惶嵘阶饔糜虻捻敳恐?，變量仍然未初始化?/p>

JS 中的 Const 變量是什么？

新版本的 javascript (ES6) 引入了兩種在 javascript 中聲明變量的新方法，一種是使用 const 關(guān)鍵字聲明常量變量。

常量變量示例：

const myName = "my name";

如果你記得聲明常量變量是 var 變量中的一個(gè)問(wèn)題但 const 變量解決了這個(gè)問(wèn)題，那么讓變量引入一個(gè)允許變量為常量的特殊功能。

讓我們通過(guò)一個(gè)例子來(lái)看看：

const myName = "my name";
myName = "not my name";

console.log(myName); //輸出 => TypeError: invalid assignment to const 'myName'

上面的例子展示了 javascript 中 let 和 var 和 const 的區(qū)別。在上面的示例中，我們聲明了一個(gè)變量myName并初始化了一個(gè)字符串值“my name”，當(dāng)我們嘗試更新myName變量時(shí)，它會(huì)拋出一個(gè)類(lèi)型錯(cuò)誤，因?yàn)槲覀儫o(wú)法更新 const 變量的值。

const 聲明是塊范圍的

const 變量也像 let 變量一樣具有塊作用域，const 變量也不能在作用域外訪問(wèn)。舉個(gè)例子來(lái)理解：

if(true) {
const myName = "my name";
console.log(myName);
}

console.log(myName); //輸出 =>  ReferenceError: myName is not defined

上面的例子展示了 javascript 中 let 和 var 和 const 的區(qū)別。在上面的示例中，我們有一個(gè)if塊和一個(gè)變量myName，在if塊內(nèi)，我們成功地在控制臺(tái)上打印了myName變量，但是當(dāng)我們嘗試在if塊外打印myName變量時(shí)，它會(huì)拋出一個(gè)錯(cuò)誤，因?yàn)?code>const 變量的范圍。

const變量不能被更新或重新聲明

const 變量不能更新或重新聲明；const 變量的這種行為有助于我們編寫(xiě)無(wú)錯(cuò)誤的代碼。

讓我們舉個(gè)例子來(lái)理解 const 中的更新。

const myName = "my name";
myName = "my new name";
console.log(myName); //TypeError: invalid assignment to const 'myName'

在示例中，我們?cè)诘谝恍兄杏幸粋€(gè)變量myName，然后我們?yōu)?code>myName變量初始化另一個(gè)值。

當(dāng)我們嘗試將myName變量打印到控制臺(tái)時(shí)，它顯示 TypeError，這意味著我們無(wú)法更新 const 變量。

讓我們舉個(gè)例子來(lái)理解 const中的重新聲明。

const myName = "my name";
const myName = "my new name";
console.log(myName); //TypeError: invalid assignment to const 'myName'

上面的例子展示了 javascript 中 let 和 var 和 const 的區(qū)別。在示例中，我們?cè)诘谝恍杏幸粋€(gè)變量myName ，然后我們?cè)俅温暶髁肆硪粋€(gè)具有相同名稱的變量。

當(dāng)我們嘗試將myName變量打印到控制臺(tái)時(shí)，它會(huì)顯示 SyntaxError，這意味著我們無(wú)法重新聲明 const 變量。

const的提升

const 變量也被提升到作用域的頂部但是沒(méi)有初始化任何值，因此，如果我們?cè)诼暶髦皣L試訪問(wèn) const 變量，它將拋出語(yǔ)法錯(cuò)誤，因?yàn)樗鼪](méi)有任何要打印的值并且是非法的對(duì)于 const 變量。

讓我們舉個(gè)例子來(lái)進(jìn)一步理解它：

console.log(myName); //輸出 => ReferenceError
const myName = "my name";

var、let 和 const 之間的區(qū)別

下表簡(jiǎn)要介紹了 javascript 中 let 和 var 和 const 的區(qū)別：

總結(jié)

var、let 和 const 是允許我們聲明變量的關(guān)鍵字。

變量的作用域告訴我們?cè)诖a中哪里可以訪問(wèn)這個(gè)變量，哪里不能。這是javascript中let與var和const區(qū)別的決定性原因之一。

提升提供了在代碼執(zhí)行之前將我們的變量和函數(shù)聲明提升到其范圍頂部的功能。

var 是一種聲明變量的好方法，它會(huì)被提升到作用域的頂部。

let 和 const 是聲明變量的現(xiàn)代方法，它們也被提升但沒(méi)有初始化。

相關(guān)文章

• 實(shí)例詳解何時(shí)使用JS中的let、var和const
• 實(shí)例詳解區(qū)別JS三種聲明方式：var,let,const
• 3種方法JS判斷變量是否存在或已定義

您可能對(duì)以下文章也感興趣

• 詳解JS刪除數(shù)組元素的三個(gè)方法：splice(),pop(),shift()
• jQuery $.each() 方法的5種使用方式
• JS: forEach和for不同的功能表現(xiàn)【實(shí)例】
• JS 3種方法實(shí)現(xiàn)字符全替換: replace replaceAll split join
• 實(shí)例比較：空鏈接 # 與 Javascript:void(0); 哪個(gè)更好？

• 千萬(wàn)別用 isNaN 判斷是否數(shù)字！
• 5個(gè)示例介紹如何在JS中解構(gòu)數(shù)組和對(duì)象
• 兩種簡(jiǎn)潔又安全的JS遍歷對(duì)象屬性的寫(xiě)法
• 5種方法檢查JS對(duì)象中是否存在某個(gè)鍵(屬性)
• 3種方法JS和jQuery判斷對(duì)象是否為空
• 3種方法判斷JS對(duì)象是否具有某一屬性
• 【如何合理使用】JavaScript訪問(wèn)對(duì)象屬性的3種方法
• 【實(shí)例】演示2種方法JS從對(duì)象中刪除屬性

標(biāo)簽: var  let  const