5分鐘快速掌握J(rèn)S中var、let和const的異同
前言
首先,一個(gè)常見的問題是,ECMAScript 和 JavaScript 到底是什么關(guān)系?
ECMAScript是一個(gè)國(guó)際通過的標(biāo)準(zhǔn)化腳本語言。JavaScript由ECMAScript和DOM、BOM三者組成??梢院?jiǎn)單理解為:ECMAScript是JavaScript的語言規(guī)范,JavaScript是ECMAScript的實(shí)現(xiàn)和擴(kuò)展。
2011 年,ECMAScript 5.1 版發(fā)布。之前我們大部分人用的也就是ES5
2015 年 6 月,ECMAScript 6 正式通過,成為國(guó)際標(biāo)準(zhǔn)。
好了,回歸我們的正題。
本文說的這個(gè)話題對(duì)于一些老鳥來說可能根本算不上疑問,但對(duì)于新手來說也許除了最常見的var之外,let和const較少使用的機(jī)會(huì)。
所以在本文中,我將會(huì)通過一些例子來為大家介紹如何在Javascript中靈活使用var、let和const這些關(guān)鍵字來定義變量,以及這些關(guān)鍵字它們之間有什么異同。
如果你懶得看下面的代碼,那我可以先把概念結(jié)論說出:
- var定義的變量可被更改,如果不初始化而直接使用也不會(huì)報(bào)錯(cuò)
- let定義的變量和var類似,但作用域在當(dāng)前聲明的范圍內(nèi)
- const定義的變量只可初始化一次且作用域內(nèi)不可被更改,使用前必須初始化
下面我將通過示例的形式來詳細(xì)為大家介紹它們?nèi)咧g的異同:
Var
var用以聲明一個(gè)變量,并且同時(shí)我們可以在聲明語句中初始化所聲明的變量。
例如:
var a = 10;
- 變量的聲明,會(huì)在代碼被執(zhí)行之前被處理。
- 用var聲明的JavaScript變量,其可用范圍在當(dāng)前執(zhí)行上下文。
- 在函數(shù)外聲明的JavaScript變量,其作用范圍是全局。
考慮以下代碼片段:
function nodeSimplified() { var a =10; console.log(a); // 輸出 10 if(true) { var a=20; console.log(a); // 輸出 20 } console.log(a); // 輸出 20 }
在上面的代碼中,你可以發(fā)現(xiàn),當(dāng)變量a在if代碼段里被更新時(shí),它的值被全局更新了,因此在經(jīng)過了if代碼后,被更新的值仍然被保留著。這與其他語言中的全局變量有點(diǎn)類似。但是,在使用這個(gè)功能時(shí)要非常小心,因?yàn)樗锌赡軙?huì)覆蓋一個(gè)已有的值。
let
let語句在一個(gè)塊級(jí)范圍里聲明一個(gè)局部變量。和var類似,我們可以在聲明時(shí)初始化它的值。
例如:
let a = 10;
- 這個(gè)語句允許你創(chuàng)建一個(gè)變量,使它的作用范圍被限制在它所在的代碼塊。
- 它和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 }
它和大多數(shù)語言中我們所見的表現(xiàn)行為是一致的。
function nodeSimplified() { let a =10; let a =20; // 拋出語法錯(cuò)誤 console.log(a); }
錯(cuò)誤信息:"未捕獲的異常:標(biāo)識(shí)符'a'已經(jīng)被聲明過。" 但如果使用var就沒事:
function nodeSimplified() { var a =10; var a =20; console.log(a); // 輸出 20 }
使用let語句,可以很好的維護(hù)變量的作用范圍。當(dāng)使用內(nèi)部函數(shù)時(shí),let語句讓你的代碼更整潔。
我希望上面的例子能幫你更好地理解var和 let。如果有任何疑問,請(qǐng)?jiān)谠u(píng)論區(qū)留言。
const
const語言中的變量只能被賦值一次,然后就不能在被賦值。const語句的作用范圍和let語句一樣。
例如:
const a = 10; function nodeSimplified() { const MY_VARIABLE =10; console.log(MY_VARIABLE); // 輸出 10 }
照例,命名規(guī)范指出我們應(yīng)該用大寫字母聲明常量。當(dāng)然,const a = 10 在上面的代碼中會(huì)的起到相同的作用。為了讓代碼長(zhǎng)期可維護(hù),命名規(guī)范還是值得遵守的。
問題:如果給一個(gè)const變量重新賦值會(huì)發(fā)生什么? 考慮下面的代碼:
function nodeSimplified() { const MY_VARIABLE =10; console.log(MY_VARIABLE); // 輸出 10 MY_VARIABLE =20; // 拋出類型錯(cuò)誤 console.log(MY_VARIABLE); }
錯(cuò)誤信息:"未捕獲的類型錯(cuò)誤:給const變量賦值"。
當(dāng)我們嘗試給已有的const變量賦值時(shí),這段代碼會(huì)拋出一個(gè)錯(cuò)誤。
介紹就到此結(jié)束,希望這篇短小精悍的文章能夠幫助到各位更好的理解在Javascript中聲明變量時(shí)使用不同關(guān)鍵字上到底有何異同。
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,如果有疑問大家可以留言交流,謝謝大家對(duì)腳本之家的支持。
- JavaScript中const、var和let區(qū)別淺析
- JavaScript ES6中const、let與var的對(duì)比詳解
- 深入淺析var,let,const的異同點(diǎn)
- JavaScript中關(guān)鍵字?var、let、const的區(qū)別詳解
- JS變量中有var定義和無var定義的區(qū)別以及es6中l(wèi)et命令和const命令
- JavaScript變量聲明var,let.const及區(qū)別淺析
- 了解javascript中l(wèi)et和var及const關(guān)鍵字的區(qū)別
- js中var,let,const的區(qū)別及相關(guān)面試題講解
相關(guān)文章
淺談JavaScript中等號(hào)、雙等號(hào)、 三等號(hào)的區(qū)別
這篇文章主要介紹了淺談JavaScript中等號(hào)、雙等號(hào)、 三等號(hào)的區(qū)別,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08JS常見簡(jiǎn)單正則表達(dá)式驗(yàn)證功能小結(jié)【手機(jī),地址,企業(yè)稅號(hào),金額,身份證等】
這篇文章主要介紹了JS常見簡(jiǎn)單正則表達(dá)式驗(yàn)證功能,結(jié)合實(shí)例形式總結(jié)分析了JS針對(duì)手機(jī),地址,企業(yè)稅號(hào),金額,身份證等的常見驗(yàn)證技巧,需要的朋友可以參考下2017-01-01利用Print.js實(shí)現(xiàn)打印pdf、HTML及圖片(可設(shè)置樣式可分頁)
在我們需要在頁面中打印某個(gè)區(qū)域的內(nèi)容或者生成pdf的時(shí)候,我們可以直接用printJs庫,這篇文章主要給大家介紹了關(guān)于利用Print.js實(shí)現(xiàn)打印pdf、HTML及圖片的相關(guān)資料,可設(shè)置樣式可分頁,需要的朋友可以參考下2024-05-05怎么使用javascript深度拷貝一個(gè)數(shù)組
一般情況下,使用 “=” 可以實(shí)現(xiàn)賦值。但對(duì)于數(shù)組、對(duì)象、函數(shù)等這些引用類型的數(shù)據(jù),這個(gè)符號(hào)就不好使了。下面我們來詳細(xì)學(xué)習(xí)下吧2019-06-06原生js實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)代碼分享
這篇文章主要介紹了原生js實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)功能以及代碼分享,對(duì)此有需要的朋友可以參考學(xué)習(xí)下。2018-02-02JavaScript實(shí)現(xiàn)簡(jiǎn)單的計(jì)算器功能
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單的計(jì)算器功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-03-03