5分鐘掌握var，let和const異同

轉載請註明出處：葡萄城官網，葡萄城爲開發者提供專業的開發工具、解決方案和服務，賦能開發者。
原文出處：https://dzone.com/articles/javascript-difference-between-var-let-and-const-ke

這個話題對於一些老鳥來講可能根本算不上疑問，但對於新手來講也許除了最多見的var以外，let和const較少使用的機會。

因此在本文中，我將會經過一些例子來爲你們介紹如何在Javascript中靈活使用var、let和const這些關鍵字來定義變量，以及這些關鍵字它們之間有什麼異同。

若是你懶得看下面的代碼，那我能夠先把概念結論說出：

• var定義的變量可被更改，若是不初始化而直接使用也不會報錯
• let定義的變量和var相似，但做用域在當前聲明的範圍內
• const定義的變量只可初始化一次且做用域內不可被更改，使用前必須初始化

下面我將經過示例的形式來詳細爲你們介紹它們三者之間的異同：

Var

var用以聲明一個變量，而且同時咱們能夠在聲明語句中初始化所聲明的變量。

例如：

var a = 10;

• 變量的聲明，會在代碼被執行以前被處理。
• 用var聲明的JavaScript變量，其可用範圍在當前執行上下文。
• 在函數外聲明的JavaScript變量，其做用範圍是全局。

考慮如下代碼片斷：

function nodeSimplified() {
  var a =10;
  console.log(a);  // 輸出 10
  if(true) {
   var a=20;
   console.log(a); // 輸出 20
  }
  console.log(a);  // 輸出 20
}

在上面的代碼中，你能夠發現，當變量a在if代碼段裏被更新時，它的值被全局更新了，所以在通過了if代碼後，被更新的值仍然被保留着。這與其餘語言中的全局變量有點相似。可是，在使用這個功能時要很是當心，由於它有可能會覆蓋一個已有的值。

let

let語句在一個塊級範圍裏聲明一個局部變量。和var相似，咱們能夠在聲明時初始化它的值。

例如：

let a = 10;

• 這個語句容許你建立一個變量，使它的做用範圍被限制在它所在的代碼塊。
• 它和Java、C#等其餘語言的變量相似。

考慮下面的代碼片斷：

function nodeSimplified() {
  let a =10;
  console.log(a);  // output 10
  if(true) {
   let a=20;
   console.log(a); // output 20
  }
  console.log(a);  // output 10
}

它和大多數語言中咱們所見的表現行爲是一致的。

function nodeSimplified() {
  let a =10;
  let a =20; // 拋出語法錯誤
  console.log(a); 
}

錯誤信息:"未捕獲的異常:標識符'a'已經被聲明過。" 但若是使用var就沒事：

function nodeSimplified() { 
  var a =10;   
  var a =20;   
  console.log(a);  // 輸出 20 
}

使用let語句，能夠很好的維護變量的做用範圍。當使用內部函數時，let語句讓你的代碼更整潔。

我但願上面的例子能幫你更好地理解var和 let。若是有任何疑問，請在評論區留言。

const

const語言中的變量只能被賦值一次，而後就不能在被賦值。const語句的做用範圍和let語句同樣。

例如：

const a = 10;
function nodeSimplified() {
  const MY_VARIABLE =10;
  console.log(MY_VARIABLE);  // 輸出 10 
}

照例，命名規範指出咱們應該用大寫字母聲明常量。固然，const a = 10 在上面的代碼中會的起到相同的做用。爲了讓代碼長期可維護，命名規範仍是值得遵照的。

問題:若是給一個const變量從新賦值會發生什麼？ 考慮下面的代碼：

function nodeSimplified() {
  const MY_VARIABLE =10;
  console.log(MY_VARIABLE);  // 輸出 10
  MY_VARIABLE =20;           // 拋出類型錯誤
  console.log(MY_VARIABLE); 
}

錯誤信息:"未捕獲的類型錯誤:給const變量賦值"。

當咱們嘗試給已有的const變量賦值時，這段代碼會拋出一個錯誤。

介紹就到此結束，但願這篇短小精悍的文章可以幫助到各位更好的理解在Javascript中聲明變量時使用不一樣關鍵字上到底有何異同。