「Vue.js 學習筆記 Day9」- ES6（var / let / const）

程式海無涯，聽說永遠學不完，那我只好一點一點把它們寫下來囉！

在學習 JavaScript 和 Vue.js 的過程中，我們常會看到 ES6 的出現，但早期不是很明白它究竟有什麼好處，也無法理解和舊版本之間的差異性何在，都是先學起來跟著用再說。

因此，希望透過接下來幾篇文章分享 ES6 的相關內容，不僅幫助自己複習，也回頭整理相關內容，更加理解後實際運用在未來的程式碼撰寫之中。

而本篇文章我們會先著重在於 let 、const 宣告方式的差異和案例說明：

Photo Credit by Gabrielle Henderson from unsplash

var、let、const 簡介

var

全域宣告，屬於函式作用域（function scope），若在 for 迴圈內使用，僅會執行一次。

let

執行才宣告，屬於獨立作用域（block scope），若在 for 迴圈內使用，則每次都會執行。

onst

常數宣告後不可變，但其傳參考特性，若其屬於物件、陣列時，資料是可變動的。

首先，讓我們透過不同的案例來認識 var和 let 的差異。

let 與 var 差別（ㄧ）：執行宣告 VS. 全域宣告

讓我們透過立即函式來比較 let 執行宣告和 var 全域宣告的差別。

var 全域宣告

由於 var 全域宣告的特性，因此，第一次 console.log 結果時， whoAmI 已宣告，但尚未賦予值，所以顯示為 undefined。

不過，在第二次 console.log 結果時， whoAmI 已宣告，並賦予值為 皮爾斯，所以顯示為 皮爾斯。

let 執行宣告

由於 Let 執行才宣告的特性，當第一次 console.log 結果時，此時的 whoAmI 尚未進行宣告，因此，系統會直接跳錯，進而終止整個程式碼的執行，導致第二次的 console.log 根本不會執行，錯誤訊息如下圖：

Photo Credit by Zdeněk Macháček from unsplash

let 與 var 差別（二）：獨立作用域 VS. 函式作用域

如同前面所簡介的內容， var 變數的影響範圍在函式作用域 function，而 let 變數的影響範圍在於獨立作用域 block，除了 function 以外 if、for 的 {} 花括號都屬於 let 的作用域。

var 函式作用域（ function scope）

由於 var 函式作用域的特性，第一層和第二層的變數宣告「會互相影響」。

因此，當第一層宣告 lion 變數為（獅子）後，第二層再次執行時，則會將 lion 變數更新為（猴子）。

let 獨立作用域（block scope）

由於 let 獨立作用域的特性，第一層和第二層的變數宣告「不會互相影響」，他們僅會在自己的 block 當中做事，

因此，當第一層宣告 lion 變數為（獅子）後，第二層的執行結果時，也只會停留在第二層當中，並不會影響外層 lion 的變數內容。

For loop 應用

當var和 let 應用到 For 迴圈上，特別是遇到非同步事件時，由於兩者作用域的影響範圍差異，也會產生不同的結果。

var 函式作用域（ function scope）

當 var 函式作用域的特性碰上 setTimeout（） 非同步的事件時，在 JavaScript 中，會等候 console.log 執行完成後，才實際執行 setTimeout（）事件。

因此，整體情況如下：

1. 優先跑完 console.log，結果為 0,1,2,3,4,5,6,7,8,9。
2. 等到 i = 10 無法再執行 for 迴圈時，才會將 i = 10 放入 setTimeout（） 執行 10 次，因此，得到 10 次的「這執行第 10 次」的回應內容。

let 獨立作用域（block scope）

不過，當 let 獨立作用域碰到setTimeout（） 非同步的事件時，則會緊緊讓 i 緊緊鎖在 for 迴圈後方的 {} 花括號函式當中。

系統會連續跑 10 次的 console.log(i) 和 console.log(“這執行第” + i + “次”)，結果如下：

小小測驗題

若不使用 let 宣告的話，有辦法實現相同的結果嗎！

答案是可以的，大家可以猜猜看怎麽做。

Photo Credit by whoislimos from unsplash

公佈答案！！！

這裡可以使用立即函式，如此以來就會讓 setTimeout（） 非同步事件在程式碼運作的當下就立刻執行囉。

Const 三大特點

const常數不可變性

當我們使用const 宣告常數時，即無法再使用 let、const修改其變數(常數)內容，同時系統會跳出錯誤訊息。

const 一定優先賦予值

過去使用 var 或 let 宣告變數時，若宣告時尚未賦予值，則會顯示為 undefined ，但使用 const 宣告一定要當下賦予值，否則會跳出錯誤訊息。

const 物件傳參考特性

前面有提到使用const 來宣告常數，具有不可改變性，但當使用 const 來物件時，其內層的資料屬性是可以進行調整的，但不可直接改變 team 常數。

這點主要是因為 const 本身的傳參考特性，所以可以調整內層資料內容，如下：

Photo Credit by whoislimos from unsplash

結語

以上就是 ES6 let 、const 的介紹和案例運用，透過筆記撰寫的過程，無形中真的慢慢理解到他們與 var 差別了。

下一篇將接著介紹 ES6 當中的展開運算子(spread operator) 及其餘運算子 (rest operator ）的內容。

謝謝你的閱讀！如果有任何想法，也歡迎留言與我分享～
如果願意給我一些小小鼓勵，請給我 1–20 個拍手；
如果覺得文章對你有點幫助，請給我 21-30 個拍手；
如果非常喜歡我的技術筆記，請長按拍手按鈕（50個拍好拍滿）讓我知道哦 👏🏻
最後，若希望持續追蹤我的最新文章，別忘了追蹤 皮爾斯的自學旅程 唷，乾溫 :D