iT邦幫忙

0

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

  • 分享至 

  • xImage
  •  

資料型態

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

基本資料型態

  • numbers 數字 — 任何純數字類型的值,包含整數、小數、負數,例如:03.14-3

    let a = 1;
    let b =3.14159;
    

    除了常規的數字之外,也有幾個特殊的的值也歸類在數字中,例如 NaNInfinity-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 布林 — 只包含兩種值,truefalse
    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) 強制轉換資料型態
系列文章列表:[快速入門前端] 系列文章索引列表


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言