學習目標:了解 JavaScript 中的變數的使用方法、各種資料型別以及如何知道 value 的型別
關於學習 JavaScript 的筆記,主要源自於以下學習資源:
變數 Variable
變數就像一個箱子,可以將其取名用來儲存值(Value)並通過等號將放入。
- 用法:
使用 let
宣告一個變數 message
let message = 'Hello'; //message 賦予值 Hello
來確認有沒有儲存
alert(message); //Hello
可以用 ,
創造多個變數
let message = 'Hello',user = 'Mia',age='25';
可以變數放入變數
let hello = 'Hello World';let message = hello;alert(hello); //Hello Worldalert(message); //Hello World
常數 Constants
像是一個上鎖的箱子,放入的內容不能被修改。
用法:
const myMom = Janice;myMom = eva; //錯誤,不能對常數重新賦予值
變數與常數命名規則
- 不能以數字作首字
- 不能使用
-
- 區分大小寫
- 在 JavaScript 中有意義的名稱不能使用,例如:
let
、function
、return
等。#保留字列表 - 命名需語義化,可採用「底線連結」或「駝峰式」命名
[補充說明] 比較好的的常數命名情況一、在執行前就已知資料的常數,可以使用全大寫加底線命名。 - 舉例: const COLOR_RED = "#F00";情況二、在執行後才知道資料,使用一般常規名法即可。 - 舉例:const pageLoadTime ; // 網頁加載所需的時間
值(Value)的型別
知道 Variable 可以拿來放 Value ,因此要了解 Value 有哪些「型別」才能靈活運用。
1. undefined
- 表示還不存在,JavaScript 給所有 Variable 的初始值,因此不建議拿來使用。
- 是 Variable 在 creation 階段時被 JavaScript 設定的 value。
永遠不要把 Variable value 設定為 undefined,除非對你 debug 有幫助,因為你不知道是你設定的還是 JavaScript 設定的
2. null
- 也表示不存在,與 undefined 不同的是「可以拿來使用」來表示變數沒有value。
3. boolean:
- 僅包含
true
和false
,通常用於儲存 是 或 否。 - 舉例:
nameValueChecked = true // 是,名字的值已被確認。phoneValueChecked = false // 是,手機的值沒有被確認。
- 可以做為比較的結果
- 舉例:
let isGreater = 3 > 1;alert( isGreater ); //true
4. number
- 數字(包含整數或是浮點數)
- 不像其他語言程式可能會有整數型態、浮點數型態或其他特定的型態,在 JavaScript 中只有一種數值型態。
- 可搭配 Operator (運算子) 來使用,回傳值。
- 在 JavaScript 中 number 的範圍是:
-(2^53 - 1)
~2^53 - 1
,換算成整數的話就是:-9007199254740991
~9007199254740991
,在這個範圍外的數字 JavaScript 不保證精確度。舉例:
9007199254740991+1 //90071992547409929007199254740991+2 //9007199254740992
- 變化型
- 得精確度範圍間的最大整數:
Number.MAX_SAFE_INTEGER
- 得精確度範圍間的最大整數:
Number.MIN_SAFE_INTEGER
- 特殊型 number
Infinity
代表數學概念中的正無窮 ∞,是一个比任何数字都大的特殊值。舉例:
alert( 1 / 0 ); //Infinity 透過除以 0 得到alert( Infinity ); //Infinity 直接在代碼使用alert( -Infinity ); //代表負無窮
2. NaN
代表一個計算錯誤。舉例:
alert( "not a number "/ 2); //NaN
5. string
- 一串字串組成,必須被括在引號裡。
- 舉例:
雙引號:"Hello"單引號:'Hello'反引號:`Hello`
- 雙引號跟單引號都是「簡單」引用,兩者在 JavaScript 中幾乎沒有什麼差別
- 反引號是「功能擴展」引用功能有以下兩種:
- 允許將變數及表達式函式包裝在
${…}
中,將它們嵌入字串中。
[範例]${…} 的使用let name = Miaalert( `Hello, ${name} !` ); // Hello, Mia 嵌入一個變數alert( `the result is ${2 + 3}` ) //the result is 5 嵌入一個表達式函式
2. 允許跨行
[範例]跨行let guestList = `Guests: * John * Pete * Mary`;
6. symbol
- 使用於 ES6,尚未所有瀏覽器通用。
7. BigInt
- 使用於 ES6,尚未所有瀏覽器通用。
- 用於表示任意長度的整數。在 JavaScript 中,number 型態無法代表大於 253(或小于 -253)的整數,這是其內部表示形式導致的技術限制。
- 通過將 n 附加到數字的最後來創建 BigInt
- 舉例:
const bigInt = 1234567890123456789012345678901234567890n;// 尾部的 "n" 表示这是一个 BigInt 类型
- 參考資料:JS最新基本数据类型:BigInt
由於很少用到 BigInt 類型的數字,因此先略過
上述 7 種類型屬於「原始型別 Primitive Type 也稱純值(single value)」,是一種既非對象也無方法的數據。
最後第 8 種
8. object
- 是用於儲存資料集合與函式的組合。
- 在 JavaScript 中是非常非常非常常用到的型別。
- 舉例:
let person = {
firstName: 'Tony',
lastName: 'Chen',
address: {
street: '1111 Main St.',
city: 'Taiwan',
state: 'TW',
}
};
以上 8 種就是存在於 JavaScript 的資料型別
我們可以從中得知 JavaScript 的變數可以保存任何資料,不用特意定義變數的資料型別,當它在執行的時候才會知道資料的型別,也允許變更型別。
舉例:
// 不會跳錯誤let message = "hello"; //stringmessage = 123456; //number
允許這種操作的編程語言稱為「動態型別(Dynamic Typing)」
因此在這種操作下,我們必須時常驗證資料的型態,來確保程式不會出錯
判斷型別函數 typeof <value>
- 用於判斷型別
- 方法一、作為運算子使用
typeof x
- 方法二、作為函式使用
typeof(x)
- 舉例
typeof undefined //"undefined"typeof true // "boolean"typeof 3 // "number"typeof “hello” // "string"typeof symbol(“id”) // "symbol"typeof Math // "object"typeof null // "object"typeof alert // "function"
最後 3 行要說明一下
math
是 JavaScript 中提供數學運算的內建 object 。typeof null
結果是object
,這其實是不對的,官方也承認了這是 typeof 運算符的問題,因為兼容性的問題所以保留下來,但 null 絕對不是一個 object。typeof alert
結果是function
,因為在 javaScript 中 alert 是一個函式,但在我們剛剛上述的 8 種形態中並沒有 function 這種類型,函式是其實是物件的一種,在 typeof 中會將 function 區分出來,雖然有點奇怪,但在實作上非常方便
重點整理
- 變數(Variable):就像一個箱子,可以將其取名用來儲存值(Value)並通過等號將放入。
- 常數( Constants):像是一個上鎖的箱子,放入的內容不能被修改。
- 值(Value)的型別一共有八種:
- undefined:表示還不存在未被定義,是 Variable 的 Value 初始值,不可拿來使用。
- null:表示不存在,可以拿來使用
- boolean:只有
true
跟false
,常用來作為判斷依據。 - number:整數、小數及負數,常搭配運算子使用。
- string:字串,必須被括在引號中。
- symbol:ES6 新增的型別,尚未被所有瀏覽器使用。
- BigIng:ES6 新增的型別,尚未被所有瀏覽器使用,用於表示任意長度的整數。
- object:物件,是資料與函數的組合。
- 可以使用
typeof (value)
來判斷型別。