ES6基礎(chǔ)教程(第一節(jié))——let和const

這期教程我們開始學(xué)習(xí)es6語法,這期將會對es6的大部分(最常用的)API進行講解,除了純理論的講解外還參雜了本人在工作中時機遇到的問題以及解決方案和個人理解,希望大家喜歡。

客套話就不說了,我們這節(jié)課的學(xué)習(xí)內(nèi)容是let和const,這兩個是es6的定義變量和常量的方法,它們和js前版本的var有什么區(qū)別呢?其實主要的區(qū)別就是這兩個定義的是有塊級作用域的概念,學(xué)前端的同學(xué)都知道,js之前的版本只有全局作用域和函數(shù)作用域,在es6中引入了塊級作用域的概念,塊級作用域用一個非常簡單的理解就是大括號({})包裹的內(nèi)部是會形成一個作用域的,也就是let和const定義的變量常量擁有塊級作用域。有了這個理論概念我們來開始學(xué)習(xí)let和const:

現(xiàn)代瀏覽器對es6的支持還是不夠的,所以我們就直接在上一期vue項目文件中進行運行es6語法,因為vue腳手架可以自動識別es6語法并解析成瀏覽器可識別的語法進行頁面繪制,當(dāng)然我們也可以使用gulp之類的構(gòu)建工具來實現(xiàn)es6代碼的解析處理,這里因為是專門學(xué)習(xí)es6的其他的內(nèi)容可以查看本人寫的其他技術(shù)博客。以下是我在vue文件的代碼結(jié)構(gòu):

初始結(jié)構(gòu)代碼.png

就是定義了一個函數(shù),在頁面加載時候執(zhí)行函數(shù),以后的代碼都寫在這個函數(shù)里面。

  1. let——塊級作用域?qū)嵗?/p>

    let塊級作用域代碼.png
    let塊級作用域代碼顯示報錯.png

    我們用let定義一個for循環(huán)的變量,當(dāng)保存執(zhí)行時候報錯了,說i是沒有定義,因為i是for循環(huán)里面的變量,塊級作用域的存在,使得它在for循環(huán)外面是不能訪問到的,這也證實了es6中塊級作用域的存在。

  2. let——變量不能重復(fù)定義:

    let不可重復(fù)定義.png
    let不可重復(fù)定義報錯.png

    代碼中可以看出,我們重復(fù)用let定義了變量a,然后執(zhí)行時候直接就報錯了,證實了let定義變量時候是不能重復(fù)定義的。

  3. const——定義和賦值需要一起完成:

    const定義賦值需要一起.png
    const定義賦值需要一起報錯.png

    從代碼可以看出,我們先定義變量a,然后給a進行賦值時候出錯了,因為const是定義常量的方法,這個方法需要定義和賦值同時進行才不會報錯。

  4. const——賦值不可變:

    const定義賦值不可變.png
    const定義賦值不可變顯示.png

    我們先定義a為3.14,然后再賦值為5.20時候,解析報錯,原因是const為定義常量的方法,常量是不能更改的。

  5. const——為址賦值:

    const定義賦值為址賦值.png
    const定義賦值為址賦值顯示.png

    大家看到這個地方是不是有點蒙了,剛才不是說定義常量不能更改嗎?現(xiàn)在更改了怎么還是能夠執(zhí)行成功呢?其實const定義時候是指針賦值,也就是瀏覽器會劃分出一塊內(nèi)存來存儲這個值,我們現(xiàn)在寫的代碼是給a新增了一個屬性,并沒有改變其內(nèi)存位置,所以并不會報錯,這個需要重點理解,這是址賦值和值賦值的區(qū)別,const為址賦值,內(nèi)存地址不變不報錯。

    好了,這節(jié)課就學(xué)到這里,熟悉我的朋友都知道,我的原則是只學(xué)有用的,希望這節(jié)課對你也有用,謝謝大家的觀看。


    公眾號
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容