卡卡網

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

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

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

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

變量聲明與初始化

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

讓我們通過一個例子來看看。

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

在上面的示例中，我們在第一行聲明了一個變量myName，然后在第二行初始化了字符串值“my name”。

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

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

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

功能范圍與塊范圍

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

范圍

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

讓我們舉個例子來理解它。

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

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

在示例中，我們有一個函數myFun()；在函數內部，我們聲明一個變量myName并在控制臺上打印變量myName 。

當我們調用函數myFun時，它會在控制臺上成功打印變量myName的值，但是當我們嘗試在函數外部打印變量myName時，它??會拋出 referenceError，因為變量myName具有函數范圍，這就是為什么在函數外部無法訪問它的原因。

功能范圍

具有函數作用域的變量意味著，變量只能在它聲明的函數內部使用，不能在函數外部訪問，如果我們嘗試訪問，則會出現引用錯誤。

這是一個例子。

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

name() //輸出 => 22

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

在示例中，我們創(chuàng)建了一個函數name()然后我們在函數內部聲明了一個變量myAge，當我們調用該函數時，它會在控制臺上打印myAge變量，但是當我們嘗試在函數外部訪問該變量時，它會拋出參考錯誤。

塊作用域

塊用一對花括號表示，塊可以是包含打開和關閉大括號的任何內容。

具有塊范圍的變量只能在其聲明的塊內使用，在塊外不可訪問，如果我們嘗試訪問，則會出現引用錯誤。

這是一個例子。

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

在上面的示例中，我們有一個條件為 true 的 if 塊，在 if 塊中，我們聲明了一個變量名myName?，F在，當我們嘗試將myName變量打印到控制臺時，它會成功打印，但是當我們嘗試在 if 塊之外打印變量時，會出現引用錯誤。

JS中的var變量是什么？

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

具有函數范圍的 var 變量示例：

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

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

當我們調用該函數時，它成功地在控制臺上打印了變量 myName ，但是當我們嘗試在函數外部打印變量myName時，它??會拋出 ReferenceError，因為它在函數外部不可訪問。

當我們在函數外部聲明一個 var 變量時，它將具有全局范圍，并且可以在整個程序內的任何地方使用。

具有全局范圍的 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"

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

現在，我們嘗試在函數myFun中訪問這個變量，它將變量打印到控制臺，接下來我們有一個條件為 true 的 if 塊；在這個if塊中，我們再次將變量myName打印到控制臺，它也可以在此處訪問。

我們做的最后一件事就是直接訪問變量，我們成功訪問變量并在控制臺打印出來。

正如我們所見，變量myName在我們程序中的任何地方都可以訪問，因為它具有全局范圍。

var變量的提升

當我們聲明一個 var 變量時，它被提升到作用域的頂部并被賦值為 undefined。舉個例子來理解吧

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

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

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

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

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

如果我們只談論提升，它是 javascript 提供的一個特性，它在代碼執(zhí)行之前將變量和函數移動到作用域的頂部；當我們進行函數聲明時也會發(fā)生這種情況。

函數聲明示例：

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

在上面的示例中，我們在聲明之前調用了函數，但它仍然成功地調用了函數。

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

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

var 變量的問題

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

讓我們通過一個例子來討論如何重新聲明它。

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

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

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

這里我們有一個名稱變量、 年齡變量和一個if條件塊，我們的if條件在這里為真，因此 if 塊內的代碼將運行并覆蓋先前聲明的名稱變量，因為 var 變量的重新聲明行為。此行為可能會影響代碼的輸出并導致意外輸出。

另一個問題是，不能聲明一個常量變量。當我們想要聲明一個可以更改/更新的變量時沒關系，但是如果我們想要聲明一個一旦聲明就不能更改的常量變量怎么辦。

JS 中的 let 變量是什么？

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

這是 let 變量聲明的示例。

let myName = "my name";

在上面的例子中，我們使用let關鍵字來聲明一個 let 變量并初始化一個字符串值“my name”。

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

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

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

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

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

let 變量的范圍

let 變量具有塊作用域，這意味著 let 變量只能在它聲明的塊內訪問，如果我們嘗試在作用域之外訪問它會顯示引用錯誤。

讓我們舉個例子來理解它。

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

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

let變量的重新聲明

let 變量不允許重新聲明變量，但它允許更新變量，重新聲明變量是 var 變量的一個大問題 let 變量幫助我們避免了重新聲明變量所帶來的問題。

我們舉個例子來理解 let 變量中的重新聲明。

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

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

let變量的提升

let 變量也被提升到作用域的頂部但是沒有被分配任何值，因此，如果我們在聲明之前嘗試訪問 let 變量，它將拋出語法錯誤，因為它沒有任何值要打印。

讓我們舉個例子來進一步理解它。

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

上面的例子展示了 javascript 中 let 和 var 和 const 的區(qū)別。在這里，我們試圖在聲明之前訪問變量myName 但得到 ReferenceError 因為在被提升到作用域的頂部之后，變量仍然未初始化。

JS 中的 Const 變量是什么？

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

常量變量示例：

const myName = "my name";

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

讓我們通過一個例子來看看：

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

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

上面的例子展示了 javascript 中 let 和 var 和 const 的區(qū)別。在上面的示例中，我們聲明了一個變量myName并初始化了一個字符串值“my name”，當我們嘗試更新myName變量時，它會拋出一個類型錯誤，因為我們無法更新 const 變量的值。

const 聲明是塊范圍的

const 變量也像 let 變量一樣具有塊作用域，const 變量也不能在作用域外訪問。舉個例子來理解：

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

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

上面的例子展示了 javascript 中 let 和 var 和 const 的區(qū)別。在上面的示例中，我們有一個if塊和一個變量myName，在if塊內，我們成功地在控制臺上打印了myName變量，但是當我們嘗試在if塊外打印myName變量時，它會拋出一個錯誤，因為const 變量的范圍。

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

const 變量不能更新或重新聲明；const 變量的這種行為有助于我們編寫無錯誤的代碼。

讓我們舉個例子來理解 const 中的更新。

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

在示例中，我們在第一行中有一個變量myName，然后我們?yōu)?code>myName變量初始化另一個值。

當我們嘗試將myName變量打印到控制臺時，它顯示 TypeError，這意味著我們無法更新 const 變量。

讓我們舉個例子來理解 const中的重新聲明。

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

上面的例子展示了 javascript 中 let 和 var 和 const 的區(qū)別。在示例中，我們在第一行有一個變量myName ，然后我們再次聲明了另一個具有相同名稱的變量。

當我們嘗試將myName變量打印到控制臺時，它會顯示 SyntaxError，這意味著我們無法重新聲明 const 變量。

const的提升

const 變量也被提升到作用域的頂部但是沒有初始化任何值，因此，如果我們在聲明之前嘗試訪問 const 變量，它將拋出語法錯誤，因為它沒有任何要打印的值并且是非法的對于 const 變量。

讓我們舉個例子來進一步理解它：

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

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

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

總結

var、let 和 const 是允許我們聲明變量的關鍵字。

變量的作用域告訴我們在代碼中哪里可以訪問這個變量，哪里不能。這是javascript中let與var和const區(qū)別的決定性原因之一。

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

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

let 和 const 是聲明變量的現代方法，它們也被提升但沒有初始化。

相關文章

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

您可能對以下文章也感興趣

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

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

標簽: var  let  const