NUK JavaScript Lesson 01:let、const、型別

這一系列 JS 文章,是以學校的 JS 課程整理出來的筆記,算是想加深印象,也方便往後複習或查看資訊。

此篇將會介紹環境安裝、型別,與 ES 6 的 let、const。

環境安裝

GUTHUB

網站名稱:Visual Studio Code
網站鏈結:https://code.visualstudio.com

安裝步驟

  1. 新增一個資料夾,名稱我通常會取做 project
  2. 在資料夾裡新增 index.html 與 all.js 兩個檔案
  3. 用編輯器(VSCode)開啟 index.html 檔案
  4. 在 HTML 檔案裡面,輸入一個驚嘆號,接著在驚嘆號後面按下 tab 按鍵,即可展開 HTML 環境
  5. 在 body 裡面新增一串文字
1
2
3
<body>
Hello World !!!
</body>
  1. 打開網頁看看是否有出現東西
  2. 在 head 處輸入以下程式碼
1
2
3
<head>
<script src="all.js"></script>
</head>
  1. 在 all.js 裡面新增一段語法,看 JS 是否有成功載入
1
alert('hello');

let 與 const

在 ES 5 我們會用 var 來做宣告,但到了 ES 6 我們不想要汙染全域變數,因此使用 let 與 const 來宣告變數。

1
2
3
4
let Ming = '小明';
let Sean = '小翔';
console.log(Ming);
console.log(Sean);

上面兩行 Code 以白話文翻譯就是:

  1. 我要命名一個變數,這個變數的名稱叫做 Ming。
  2. 我要命名一個變數,這個變數的名稱叫做 Sean。
  3. 我要賦予 Ming 這個變數的值為小明。
  4. 我要賦予 Sean 這個變數的值為小翔。

特性

看了上面的例子,我們都知道如何以 let 或 const 宣告變數了,但是 let 與 const 有什麼不同呢?

以下我們用 let 與 const 宣告變數,不過這一次我們還想要重新賦予值給變數:

1
2
3
4
let a = 1;
a = 2; // let 可以重新賦予值
const b = 1;
b = 2; // const 不可以重新賦予值

運行上面的程式碼後,我們會發現 const 所宣告的變數 b 是無法重新賦予值的,這就是因為 const 不可變動的特性而出現的錯誤!

在 Chrome 瀏覽器中,按下 F12 可以開啟開發人員工具。
開發人員工具中的 console 能夠檢視我們的 JavaScript 是否有執行成功。

Q:為什麼 const 需要這種「不能被更動」的特性呢?
A:因為某些狀況下,開發者並不希望某一些資訊是可以被改變的。

例如:銀行帳號、重要資訊、API、網址、錢包地址(區塊鏈)、身份證字號、訂單編號。

Hoisting

什麼是 Hoisting?

首先,我們先來看以下的範例程式碼:

1
2
3
4
5
var a = 1;
var b = 'hello';
// var c = a + b;
console.log(c);
var c = a + b; // Hoisting

上述的程式碼中,我們分別宣告了 a 與 b 兩個變數並賦予其值,再宣告變數 c = a + b 並回傳其值。
在這個例子中,不管 c 是在第三行宣告的,還是在最後才宣告,console.log 都能抓到 c 的值。

但是!

如果使用 let 來宣告,狀況可就不同了:

1
2
3
4
5
let a = 1;
b = 'hello';
// let c = a + b;
console.log(c);
let c = a + b; // let 無法 Hoisting

這個例子中,我們只是把 var 換成 let,但是 console 卻傳來錯誤訊息,並表示無法存取到 c 這個變數。

為什麼?

因為 Hoisting 只會將 var 宣告的變數向上提升,而不會將 let 或 const 所宣告的變數向上提升。
因此,在上面這個範例中,let c = a + b; 不可以到了第五行才宣告,必須在第三行就宣告。

結論:

Hoisting : var 會向上提升,let 與 const 不會。

型別(Types)

  • 數字
  • 字串
  • 布林 (true、false)
  • undefined

我們剛才宣告的型別都是數字,現在我們來試著宣告一個字串型別的值:

1
2
let a = 1;
let b = "hello";

如果我們將 a 與 b 相加,會得到什麼結果呢?

1
2
3
let a = 1;
let b = "hello";
console.log(a + b);

我們會得到 1hello 的字串!

此外,不只數字跟數字、數字跟字串可以相加,布林值與字串也可以相加:

1
2
3
let a = true;
let b = "hello";
console.log(a + b);

我們會得到 true + hello,也就是 truehello 的字串。

總結

這一篇介紹了 let 與 const 的特性,包含重新賦予值以及 Hoisting,在最後也稍微介紹了型別的觀念。下一篇我會介紹函式,並且透過一些小題目來熟悉函式。

以上資源是我自己整理過後的筆記,若有錯誤歡迎隨時和我聯繫。