型別與變數

原始型別(Primitive Type)

• number (數字也稱字元)
• string (字串)
• boolean (布林)
• undefined (沒有被宣告，或者是已經宣告了，但是沒有賦值，也稱未定義)
• null (沒有值)
• symbol

number(數字) 與 string(字串) 型別

以街景來舉例原始型別內容

以街景圖來說，有哪些東西值得被記錄起來？

街景圖有很多都可以設定，像是招牌名稱是什麼招牌、幾輛摩托車、車子什麼型號...等等

那如何宣告變數呢？

宣告 變數名稱 = 值，寫法如下:

// 建立一個招牌變數叫 sign，並給予一個值為 日立變頻冷氣
// string 字串 
var sign = "日立變頻冷氣";

// 建立一個電話變數叫 phoneNumber，並給予一個值為 22622579
// number 數字
var phoneNumber = 22622579;

注意

型別數字不用加引號，字串要加引號("")
當然，宣告變數也可以不賦予值

var phoneNumber;

此意思是我宣告 phoneNumber 這個變數，但內容是空的
下面會提到

boolean(布林)型別

電腦程式需要知道這是正確的還是錯誤的，所以要告知電腦目前的狀態是正確還是錯誤就是用 boolean 告知，boolean 只會有兩個值，一個是 true，另一個是 false

true 與 false 代表什麼意思？

譬如說開關有打開或沒打開，可以寫成：

// 開關有打開
var power = true;

// 開關沒打開
var power = false;

或是條件有沒有成立，可以寫成：

// 組織成立
var organization = true;

// 組織不成立
var organization = false;

注意

型別布林不用加引號

undefined(未定義)

意思是一個變數但未賦予任何一個值，如下：

var phoneNumber;
console.log("phoneNumber值為：", phoneNumber);

宣告一個變數但都沒有定義賦予任何值的話，程式會不知道變數內容是什麼，就會認定型別是 undefined

Javascript 是如何執行？

通常在引入(載入) js 檔案的時候，也是視同建立了一個 js 環境，建立 js 環境做了兩個步驟：

1. 建立出執行環境(window、this)
2. 執行 js 時有創造階段與執行階段

• 創造階段(Creation Phase):設定變數到記憶體
• 執行階段(Execution Phase):逐行執行程式碼

舉例以下程式：

var a = 1;

js 是如何執行 var a = 1 的呢？

背後原理是這樣，會先解析您寫的程式碼再進行瀏覽器編譯器編譯，編譯後在丟到瀏覽器去解析讓瀏覽器看的懂程式。

那瀏覽器如何解析的呢？

我們寫的這一段 var a = 1; 的時候，編譯其實會編譯成兩段程式碼如下：

var a = 1;

// 編譯器會拆成兩段去寫，會先把變數先創起來，再依序的賦予值進去
// 如下:

var a; // 第一階段解析
a = 1; // 第二階段解析

瀏覽器是以您寫的程式進行編譯器編譯過後的程式碼去執行，而不是直接拿您寫的程式去執行。

那這些值會紀錄到瀏覽器哪裡呢？是記在瀏覽器記憶體位置，如同跟電腦主機一樣的記憶體一樣概念。

在舉例以下程式：

var a = 1;
var b = 2;

會把變數存在瀏覽器記憶體裡面
當我選到 a 的時候，它會在 1 的位置，當我選到 b 的時候，它會在 2 的位置

所以當 js 建立的時候，瀏覽器就會把這兩個變數暫存在瀏覽器的記憶體位置

注意

當瀏覽器關掉後，記憶體位子也就跟著釋放掉了，就移除了

所以以上面範例的流程來解釋：

var a = 1;
var b = 2;

// 編譯會編譯成以下程式：

var a;    // 第 1 個記憶體位置
var b;    // 第 2 個記憶體位置
a = 1;    // 第 3 個記憶體位置
b = 2;    // 第 4 個記憶體位置

// 會把宣告變數拉到最上面，再依序存在記憶體與賦予值

如何檢查值？

語法如下:

console.log(要檢查的變數值);

舉例如下:

var a = 2;
console.log(a);  // 會顯示 2

除錯工具 Chrome DevTools

Chrome 的開發者工具

如何開啟？

右鍵 -> 檢查

本章重點

知道如何宣告變數
知道有哪幾種型別
知道怎麼開啟除錯工具

練習題目

第一關：JS 環境與變數環境
第二關：變數命名
第三關：變數型別判斷與弱型別轉型