認識javascript type

更新 發佈閱讀 6 分鐘

javascript有分兩大類型別:原始型別 (Primitive Types) 和物件型別 (Object Types)兩種,而原始型別包含stringnumberbooleannullundefinedSymbol,物件型別則是包含陣列、函式、日期等。


這次我們來了解原始型別:

原始型別的定義是「單一值」的小零件(字、數字、是/否…),他們跟物件型別不同,是不可變的,且賦值是傳值,修改一個部會影響另一個。


number(數值):

就是數字,像是:整數:123456、小數:3.14、也包含特殊值:NaN、Infinity,都是屬於number,比如:NaN會出現在javascript自動轉型後的結果無法轉換為數字。



string(字串):

字串是指,只要是「字」或「一串文字」會被用" "' '包起來,都是叫string。

舉例:

let zhe = "我叫阿哲"

console.log(zhe) //印出"我叫阿哲"



boolean(布林):

布林就是指,只有兩種答案,true(對、是、正確) or false(否、不對、否定)。

let isLightOn = true

if (isLightOn) {
console.log("燈是亮的")
} else {
console.log("燈是關的")
}

//印出燈是亮的​



undefined(未定義):

undefined跟null一樣表示空值,undefined會出現像是已經宣告,但是尚未賦予值的變數上。也就是說對系統來說,他不知道變數的值是什麼,所以讀取該變數的時候會出現undefined

let zhe

console.log(zhe) //系統印出undefined



NaN/null(空值):

而null是會手動賦予給變數一個空值,表示"這邊是個空值"。

而NaN則是屬number型別的特殊值,但是用來代表它不是一個數字,如果有出現NaN代表可能有轉換失敗的情況。

null:

let user = { name: "Joe", role: "admin" }

function logout() {
  user = null //表示已登出
}

console.log("登出前",user)
logout()
console.log('登出後',user)

//印出:​
//登出前 { name: 'Joe', role: 'admin' }
//登出後 null


NaN:

let aa = "hello"

let bb = Number(aa)

console.log(bb) //跳出NaN



Symbol:
Symbol是用來產生所謂那個"獨一無二"那個"唯一"的值,一旦啟用就不能更改,而就算給他同樣的名字,結果還是不同。是用來避免"撞名""衝突"的。

範例:

const classMate = {
  '宜蓁' : { score: 70, sleep: '3:00', drink: true },
  'chita' : { score: 90, sleep: '20:00', drink:false },
  '宜蓁' : { score: 100, sleep: '19:00', drink: false },
}

console.log(classMate)

//印出​
{
  '宜蓁': { score: 100, sleep: '19:00', drink: false },
  'chit' { score: 90, sleep: '20:00', drink: false }
}

系統結果顯示,第二個宜蓁覆蓋掉第一個宜蓁了。但是我們又想要兩個宜蓁出現的話。

Symbol:

const classMate = {
  [Symbol('宜蓁')] : { score: 70, sleep: '3:00', drink: true },
  [Symbol('chita')] : { score: 90, sleep: '20:00', drink:false },
  [Symbol('宜蓁')] : { score: 100, sleep: '19:00', drink: false },
}


console.log(classMate)

//就會印出:
{
  [Symbol(宜蓁)]: { score: 70, sleep: '3:00', drink: true },
  [Symbol(chita)]: { score: 90, sleep: '20:00', drink: false },
  [Symbol(宜蓁)]: { score: 100, sleep: '19:00', drink: false }
}

東西都會跑出來了。但是定義屬性鍵名的時候一定要將 Symbol 值放在中括號 [] 裡面,否則屬性的鍵名會當做字串而不是 Symbol 值哦!






































留言
avatar-img
留言分享你的想法!
avatar-img
睿哲楊的沙龍
1會員
10內容數
睿哲楊的沙龍的其他內容
2025/12/08
var : var的作用域是屬於"函式作用域(Function Scope)"意思是當我們在一個函數內部用 var 宣告變數時,變數只在該函數內部可見,是可以被重複宣告的,是使用在變數可能或不會被重新賦予值,或者宣告範圍在整個函式(function)或者區塊(block)中,但是跟let相比之下,比
Thumbnail
2025/12/08
var : var的作用域是屬於"函式作用域(Function Scope)"意思是當我們在一個函數內部用 var 宣告變數時,變數只在該函數內部可見,是可以被重複宣告的,是使用在變數可能或不會被重新賦予值,或者宣告範圍在整個函式(function)或者區塊(block)中,但是跟let相比之下,比
Thumbnail
2025/12/04
基本設定 git init //初始化git儲存庫​ git config --global user.name //"設定的名字" git config --global user.email //"設定的Email" git config --list //檢視 Git 設定
2025/12/04
基本設定 git init //初始化git儲存庫​ git config --global user.name //"設定的名字" git config --global user.email //"設定的Email" git config --list //檢視 Git 設定
2025/11/27
這邊我們要先釐清grid跟flexbox的差別,flexbox是一條軸線("就是橫排跟直排"),而grid則是「行+列同時控制」,將容器切割成格子,會將元素擺進指定的格子或者自動排列。 grid 程式碼如下: display: grid //啟用 Grid grid-template-col
Thumbnail
2025/11/27
這邊我們要先釐清grid跟flexbox的差別,flexbox是一條軸線("就是橫排跟直排"),而grid則是「行+列同時控制」,將容器切割成格子,會將元素擺進指定的格子或者自動排列。 grid 程式碼如下: display: grid //啟用 Grid grid-template-col
Thumbnail
看更多