5分鐘掌握var,let和const異同
轉載請註明出處: ,葡萄城為開發者提供專業的開發工具、解決方案和服務,賦能開發者。
原文出處:
這個話題對於一些老鳥來說可能根本算不上疑問,但對於新手來說也許除了最常見的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中宣告變數時使用不同關鍵字上到底有何異同。
關於 :
賦能開發者!葡萄城公司成立於 1980 年,是全球領先的集開發工具、商業智慧解決方案、管理系統設計工具於一身的軟體和服務提供商。西安葡萄城是其在中國的分支機構,面向全球市場提供軟體研發服務,併為中國企業的資訊化提供國際先進的開發工具、軟體和研發諮詢服務。葡萄城的控制元件和軟體產品在國內外屢獲殊榮,在全球被數十萬家企業、學校和政府機構廣泛應用。
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/28298702/viewspace-2215283/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 深入理解JS:var、let、const的異同JS
- let var與const
- var和let/const的區別
- var,let和const深入解析(一)
- var、let和const的區別
- var let const區別
- let const var 區別
- let,const,var區別
- var、let和const的知識點
- 1分鐘帶你瞭解var let 和 const 的區別
- JavaScript中var與let的異同點JavaScript
- var、const、let 的區別
- 前端 let、const和var你真的瞭解麼?前端
- 1.變數:var,let,const變數
- ES6之var、let、const
- ES6中let和var和const的區別
- var、let和const三者有哪些區別?
- 前端學習筆記 - var、let和const的用法前端筆記
- JavaScript中let、const、var 的區別JavaScript
- When to use var vs let vs const in JavaScriptJavaScript
- 變數和函式宣告提升,let和var const區別變數函式
- JavaScript 中的 Var,Let 和 Const 有什麼區別JavaScript
- ES5 和 ES6:let const var 區別
- JavaScript中的var、let 及 const 區別JavaScript
- var、let、const宣告變數的區別變數
- let和const
- ES6中var,let,const的區別
- es6 let const與var 的區別
- 【前端面試】(四)JavaScript var let const的區別前端面試JavaScript
- var、let、const、解構、展開、new、this、class、函式函式
- [譯] 在JavaScript中何時使用var、let及constJavaScript
- JavaScript 高階—— ES6新增語法 const(let const var區別)JavaScript
- 詳解 let 和 var
- var、let、const變數宣告的區別及特點變數
- 【ES6】var、let、const三者的區別
- 深入理解ES6之var,let,const區別
- var 和 let 的區別
- 關於es6 let var const 以及Symbol的總結Symbol