[快速入門前端 38] JavaScript：資料型態 (1) 基本資料型態和複合資料型態

javascript 前端新手村資料型態變數

Doris 2023-07-06 14:37:42 ‧ 1068 瀏覽

分享至

資料型態

在前一天我們已經了解到變數的概念，而資料型態指的是變數中存放的是哪一種類型的資料，例如數字、文字 ( 字串 ) 等，而在 JavaScript 中，資料主要分為兩大類 —— 基本資料型態和複合資料型態。

基本資料型態

numbers 數字 — 任何純數字類型的值，包含整數、小數、負數，例如：0、3.14、-3 等
```
let a = 1;
let b =3.14159;
```
除了常規的數字之外，也有幾個特殊的的值也歸類在數字中，例如 NaN、Infinity、-Infinity。他們雖然看起來不是數字，但卻是屬於 numbers 型別。
- NaN
  NaN (Not a Number) 指本身是數字型態但卻不是數字的數，也就是一個無效的數字，基本上屬於錯誤的狀態，常會出現於轉換型態發生錯誤時。例如硬要把字串 'abc123' 轉換為數字時，因為含有 abc 字符造成轉換失敗，所以會變成 NaN。
- Infinity
  表示數學上的正無限大，不需要用引號包裹，若外面含有引號則會變成單純的字串。
- -Infinity
  表示數學上的負無限大。
string 字串 — 以單引號或雙引號包裹的任何一段字符組合，例如：”你好”、”Hello World!” 、“11234r5” 等。
在字串中 ' 和 " 無法混用，以單引號開頭就要以單引號結尾，例如 'abc" 會出現錯誤，除此之外 ' 和 " 可包含空格但無法跨行。
```
let c = 'Hello World!'; // 變數 c 的值為 Hello World! 字串
let d = "1234"; // 只要在單引號或雙引號內的字符皆為字串
```
boolean 布林 — 只包含兩種值，true 和 false
Boolean 中只有 true 和 false，通常會用來配合運算子進行邏輯運算或判斷。
```
let login = true;
```
undefined 未定義 — 是一個特殊型態，表示變數還沒有定義或找不到
```
let x;
console.log(x); // 此時變數 x 為 undefined
```
null 空值 — 表示變數為空，雖然已經定義了，但裡面沒有任何值

複合資料型態

複合資料型態分為兩種 — 陣列和物件，這兩種資料型態較為複雜，所以在這邊我們先初步介紹他的定義，後面再慢慢了解延伸的用法和相關函數。

array 陣列 — 用來儲存多個變數，以中括號包裹多個數組，並以逗號區隔，例如：[1, 2, 3] 及 [”123”, “你好”, “hello”]。

陣列的使用有點像把很多變數放在一個組合中，避免出現我們需要新增很多變數的情況，例如若我們需要運算出一整班 20 個學生的平均成績，若要新增 20 個變數再做運算會花費很多時間。這時候我們就可以將所有學生的成績放進陣列中，再進行運算。
object 物件 — 與陣列相同，物件也是為了解決需要新增多個變數的問題，只是物件的資料更複雜，屬於 { key: value } 的組合，例如：{ “小王”: 90, “小張”: 100 }。

如何判斷變數的型態 — typeof

不像一些強型別的程式語言，JavaScript 屬於動態型別語言，也就是說我們在宣告一個變數時不需要預先指定他的型態，瀏覽器會根據你的值自動幫你匹配一個合適的型態。若我們需要確認一個變數的資料型態為何，可以使用 typeof(變數)。

範例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JavaScript 小練習</title>
  </head>
	<body>
    <script>
      const age = 18; // 數字型態的變數
      const name = "小明";
      console.log(typeof(age)); // typeof 中寫變數名稱
      console.log(typeof(name));
      console.log(typeof(123)); // 或者 typeof 中寫值也可以
    </script>
  </body>
</html>

上一篇：[快速入門前端 37] JavaScript：變數和常數
下一篇：[快速入門前端 39] JavaScript：資料型態 (2) 強制轉換資料型態
系列文章列表：[快速入門前端] 系列文章索引列表