JavaScript 核心觀念(59) - ES6 章節:Let 及 Const - Let, Const 基本概念

前言

接下來是一個全新的章節,從這個章節開始就會介紹 ES6 語法哦。

Let, Const 基本概念

ES6 語法簡單來講就是為了改善原本開發上的一些問題,所以也可以將 ES6語法當成一個語法糖,那麼什麼是語法糖呢?語法糖的意思是在講後來新增的某個語法,但是對於原本功能並沒有任何影響的一種說法而已,通常來講語法糖會比原本的語法更簡潔且更具有可讀性。

而 ES6 所出的 letconst 都是宣告變數使用的,與前面所使用的 var 相同,但是在實作上會有一點點不太一樣。

首先在原本的開發模式時,我們都知道變數會有提升的狀況發生:

1
2
console.log(myName); // undefined
var myName = 'Ray';

但這個問題並不大,主要是 var 有一個滿麻煩的問題,就是若重複宣告變數,只會被覆蓋掉而不會出現錯誤:

1
2
3
4
var myName = 'Ray';
var myName = 'Ray2';

console.log(myName); // Ray2

那麼這種狀況在實際開發上是有可能養出一些蟲子,更不用說作用域的問題:

1
2
3
4
for(var i = 0; i < 10; i++) {
console.log(i); // 1..2..3..4..5..
}
console.log(i); //10

畢竟 var 是以函式作用域為主。

因此在 ES6 的 letconst 就可以解決這個問題,而這兩個宣告變數都有各自的名稱

  • let
    • 變數
  • const
    • 常數

首先先講講 let 變數,這個與 var 非常雷同,甚至你可以 var 直接無痛改成 let,但這時候你可能會問說「這樣子 letvar 有什麼差異?」

差異非常的大,舉例來講 let 是以區塊為作用域

1
2
3
4
for(var i = 0; i < 10; i++) {
console.log(i); // 1..2..3..4..5..
}
console.log(i); // i is not defined

除此之外 let 不可重複宣告

1
2
let myName = 'Ray';
let myName = 'Ray2'; // Uncaught SyntaxError: Identifier 'myName' has already been declared

const 就相對簡單一點了,使用 const 所宣告的變數就無法再次被重新賦予值

1
2
const myName = 'Ray';
myName = 'Ray2'; // Uncaught TypeError: Assignment to constant variable.

但是這邊有一個很特別的狀況,你是可以 varley 混用(通常不建議混用,作用域不同容易出現問題),但若是 let 先的話,就會出現錯誤:

1
2
3
let myName = 'Ray';
var myName = 'Ray2';
console.log(myName); // Uncaught SyntaxError: Identifier 'myName' has already been declared

反之若是 var 先宣告依然還是會出現錯誤:

1
2
3
var myName = 'Ray';
let myName = 'Ray2';
console.log(myName); // Uncaught SyntaxError: Identifier 'myName' has already been declared

那麼剛剛有講到 letconst 是以區塊為作用域,所以如果想要重複宣告的話,是可以這樣子寫的:

1
2
3
4
5
6
7
let myName = 'Ray';
console.log('A:', myName); // A: Ray
{
let myName = 'Ray2';
console.log('B:', myName); // B: Ray2
}
console.log('C:', myName); // C: Ray

參考文獻

Liker 讚賞 (拍手)

如果這一篇筆記文章對你有幫助,希望可以求點支持或 牡蠣 鼓勵 (ノД`)・゜・。

Liker 是一個按讚(拍手)的讚賞機制,每一篇文章最多可以按五下(拍手),按讚過程你是完全不用付費的(除非你想要每個月贊助我 :D),你只需要登入帳號就可以開始按讚。
而 Liker 會依據按讚數量分配獎金給創作者,所以如果你願意按個讚我會非常感謝你唷。

Google AD

撰寫一篇文章其實真的很花時間,如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話,我會非常感謝你 ヽ(・∀・)ノ