JavaScript 變數宣告 var, let, const 比較

更新 發佈閱讀 2 分鐘

JavaScript在ES6新增了let, const等宣告變數的方式,其中let, const是block scope的,而var則是function scope:

console:

raw-image

有發現了嗎,test1用var來宣告,且宣告在if block裡面,但是在外面可以存取的到,test2用let來宣告,在外面則存取不到!

接下來看看const:

console:

raw-image

const是用來宣告不會再改變的常數,因此才會報錯。

總結:

  1. 在開發過程中應該要盡量讓變數scope最小化,避免在大型專案裏面變數互相影響等問題。
  2. 在後續不需要再改變的變數,宣告成const會比較好,避免這個value在其它地方被修改。

#note IE11以下不支援let語法,IE11可以:

從console可以看到模擬成IE10,但會出現必須有;的錯誤訊息,但是其實它是因為看不懂第9行的let,我試過改成var就過了。

raw-image

解決方法:

使用babel來解決,如以下line 5, 6.

其實babel只是幫忙把ES6語法轉成ES5, 讓瀏覽器可以看得懂!

console:

raw-image

可以看到看的懂let語法了,但出現一行warning,意思應該是建議要上production的話要precompile速度會比較快吧! 有時間再來研究怎麼build.

留言
avatar-img
Vic Lin的沙龍
20會員
161內容數
Vic Lin的沙龍的其他內容
2023/08/13
父元件 傳遞方法使用@ <template>    ...    <Login @modalClose="modalClose"/> ... </template> <script setup>     const _modal = ref();     function m
2023/08/13
父元件 傳遞方法使用@ <template>    ...    <Login @modalClose="modalClose"/> ... </template> <script setup>     const _modal = ref();     function m
2023/03/25
前情提要 由於我的筆電已經用了10年,無法再戰下去了,且有預算考量,加上使用電腦幾乎都是定點,只有偶爾回家的時候會需要攜帶,因此最終選擇了迷你電腦,體積小不占空間,又方便攜帶,剛好符合我的需求。 菜單 由於這台無法裝獨顯,所以CPU的部分選擇 AMD R5 3400G(含Vega 11內
Thumbnail
2023/03/25
前情提要 由於我的筆電已經用了10年,無法再戰下去了,且有預算考量,加上使用電腦幾乎都是定點,只有偶爾回家的時候會需要攜帶,因此最終選擇了迷你電腦,體積小不占空間,又方便攜帶,剛好符合我的需求。 菜單 由於這台無法裝獨顯,所以CPU的部分選擇 AMD R5 3400G(含Vega 11內
Thumbnail
2023/03/10
Nuxt3中可使用useFetch來獲取數據,不須再引用axios,相當方便: 本筆記參考: https://juejin.cn/post/7104071421160063012 https://juejin.cn/post/7086472647575339045
2023/03/10
Nuxt3中可使用useFetch來獲取數據,不須再引用axios,相當方便: 本筆記參考: https://juejin.cn/post/7104071421160063012 https://juejin.cn/post/7086472647575339045
看更多
你可能也想看
Thumbnail
在 vocus 與你一起探索內容、發掘靈感的路上,我們又將啟動新的冒險——vocus App 正式推出! 現在起,你可以在 iOS App Store 下載全新上架的 vocus App。 無論是在通勤路上、日常空檔,或一天結束後的放鬆時刻,都能自在沈浸在內容宇宙中。
Thumbnail
在 vocus 與你一起探索內容、發掘靈感的路上,我們又將啟動新的冒險——vocus App 正式推出! 現在起,你可以在 iOS App Store 下載全新上架的 vocus App。 無論是在通勤路上、日常空檔,或一天結束後的放鬆時刻,都能自在沈浸在內容宇宙中。
Thumbnail
vocus 慶祝推出 App,舉辦 2026 全站慶。推出精選內容與數位商品折扣,訂單免費與紅包抽獎、新註冊會員專屬活動、Boba Boost 贊助抽紅包,以及全站徵文,並邀請你一起來回顧過去的一年, vocus 與創作者共同留下了哪些精彩創作。
Thumbnail
vocus 慶祝推出 App,舉辦 2026 全站慶。推出精選內容與數位商品折扣,訂單免費與紅包抽獎、新註冊會員專屬活動、Boba Boost 贊助抽紅包,以及全站徵文,並邀請你一起來回顧過去的一年, vocus 與創作者共同留下了哪些精彩創作。
Thumbnail
在剛開始寫 JavaScript 可能大多數的人不會特別意識到 JavaScript 的型別系統有什麼特別之處,我是在看完 Youtube 上 CS50 的課程,才理解到在不同的程式語言中,會因為語言的特性而有不同的系統,JavaScript 就是偏向比較特別的那一種。
Thumbnail
在剛開始寫 JavaScript 可能大多數的人不會特別意識到 JavaScript 的型別系統有什麼特別之處,我是在看完 Youtube 上 CS50 的課程,才理解到在不同的程式語言中,會因為語言的特性而有不同的系統,JavaScript 就是偏向比較特別的那一種。
Thumbnail
在進入到 React 前端框架之前,幫讀者複習有關 JavaScript 的知識。此篇著重,JavaScript 的歷史、let & const & var 差異、樣板字面值( Template Literals )、箭頭函式( Arrow Function )JS ES6 一個非常重要的前置知識。
Thumbnail
在進入到 React 前端框架之前,幫讀者複習有關 JavaScript 的知識。此篇著重,JavaScript 的歷史、let & const & var 差異、樣板字面值( Template Literals )、箭頭函式( Arrow Function )JS ES6 一個非常重要的前置知識。
Thumbnail
JavaScript 的型別可以分為兩類,分別是原始型別與物件型別,這邊主要談的是 ES6 的寫法。值得注意的是,JavaScript 變數本身不帶有型別,值才有。
Thumbnail
JavaScript 的型別可以分為兩類,分別是原始型別與物件型別,這邊主要談的是 ES6 的寫法。值得注意的是,JavaScript 變數本身不帶有型別,值才有。
Thumbnail
Hoisting 可以說是 ES6 問世之後,去面試還是會爾偶被問到的面試考題,雖然 Hoisting 離 Modern JavaScript 的技術有點距離,實作上幾乎不太會用到,但透過了解 Hoisting 的概念,可以對這門語言有更深的了解與掌握度。
Thumbnail
Hoisting 可以說是 ES6 問世之後,去面試還是會爾偶被問到的面試考題,雖然 Hoisting 離 Modern JavaScript 的技術有點距離,實作上幾乎不太會用到,但透過了解 Hoisting 的概念,可以對這門語言有更深的了解與掌握度。
Thumbnail
對於剛接觸前端開發不久的人來說,可能會對var、let 與 const 的差異略懂略懂,但又說不太出三者實際哪裡不一樣。
Thumbnail
對於剛接觸前端開發不久的人來說,可能會對var、let 與 const 的差異略懂略懂,但又說不太出三者實際哪裡不一樣。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News