JavaScript 入門:資料型別一次搞懂! Primitive 與 Object 的差異

更新 發佈閱讀 5 分鐘

在學習 JavaScript 時,你有沒有遇過「字串不能改」、「複製變數並修改新變數後,舊變數也跟著變了」諸如此類的狀況? (我有) 其實這和 JavaScript 的資料型別還有傳值(Pass by value)、傳參考(pass by reference) 運作機制有關,如果沒有這些概念的話,程式開發過程中就很容易發生非預期的情況,為了避免再次發生這些看似怪異的狀況,需要從根本了解他們的差異。


JavaScript 的兩大資料類型

JavaScript 有內建的資料型別,分為 原生值(primitive values)物件(objects)

原生值是 JavaScript 的基礎資料單位,共有七種 :

  • number
  • string
  • boolean
  • bigInt
  • symbol
  • undefined
  • null

原生值 Primitive value

值類型 (value type):

值類型指的是,當把一個原生值賦予變數時,變數存的就是本身,而非記憶體位置,因此在複製或傳遞時,實際上是複製該值,而非共享一個資料。

let a = 10;
let b = a; // b 存的是 10,而非 a 的位置(複製 a 的值賦予 b)
b = 1;
console.log(a)// 修改 b 不會影響到 a,仍是 10

不可變 (immutable):

不可變的意思是,值一旦建立就無法修改,只能用「新值」取代「舊值」

let s = "Hello world";
s[0] = "h"; // 無效,字串不會被修改,但也不會報錯
console.log(s); // Hello world
s = "hello world"; // 有效,這是重新賦值,不是修改
console.log(s); // hello world
雖然可以用 s[0] 讀取值,但是無法用s[0]=”h” 修改 string 的內容。

對 primitive value 來說,看起來像是「修改」的動作其實都是產生新值並重新指派。


物件 Object

除了開頭提到的七種原生值外,其他的都屬於物件 (像是 Array、Function、Object、Date 等)

參考類型 (reference type)

參考類型的意思是,變數存的是指向該物件的參考,而非值本身。所以當多個變數指向同一個物件時,透過任一個變數修改內容,所有變數都會受到影響。

let d = { x: 1};
let e = d; // e 被賦值為 d 所指向的物件參考,也就是 e 與 d 指向相同物件
e.x = 2; // 這是修改物件內容,不是讓 e 指向新的物件
console.log(d); // 修改 e 的值,也會影響到 d { x: 2}

可變(mutable)

可變指的是,物件的內容是可以被更修改的。

let arr = ["h", "e", "l", "l", "o"];
arr[0] = "H"; // 可以修改
console.log(arr); // ['H','e','l','l','o']

總結

JavaScript 的資料類型中,除了七個原生值:number、bigInt、boolean、string、symbol、null、undefined 之外,其他都屬於物件。

  • 原生值:值類型、不可變
  • 物件:參考類型、可變

理解 JavaScript 的資料結構才能在程式開發上少走很多彎路,因為自己踩過對於程式語言特性一知半解的坑,透過整理筆記的方式加深印象,除了自己未來可以反覆觀看外,也希望筆記可以幫助同在學習的人~


參考

  1. JavaScript 有哪些資料型別 (data types)? 該怎麼辨別一個變數的資料型別?
  2. JavaScript 的資料型別與資料結構
留言
avatar-img
Elaine 粼粼的林林總總
6會員
20內容數
不定期地分享程式/旅遊/學習/閱讀或各式各樣的文章,如果對我的分享有興趣,歡迎來找我玩~
2026/02/03
Javascript 中有三種宣告的保留字:var、let、const,這三種宣告方式究竟差在哪裡呢?
Thumbnail
2026/02/03
Javascript 中有三種宣告的保留字:var、let、const,這三種宣告方式究竟差在哪裡呢?
Thumbnail
2026/01/31
這篇文章將會探討 Git 的工作目錄、暫存區和儲存庫三大區域,並解釋檔案在這三個區域中的狀態(未追蹤、已追蹤、已修改、已刪除),以及 git status 指令中常見的訊息。透過理解這三大區域的運作原理,可以幫助開發者更精準、安全地進行版本控制。
2026/01/31
這篇文章將會探討 Git 的工作目錄、暫存區和儲存庫三大區域,並解釋檔案在這三個區域中的狀態(未追蹤、已追蹤、已修改、已刪除),以及 git status 指令中常見的訊息。透過理解這三大區域的運作原理,可以幫助開發者更精準、安全地進行版本控制。
2026/01/28
上一篇文章中,我們已經成功安裝好 Git,在本篇文章中,將會講解 Git 的核心操作,包括初始化儲存庫、查看檔案狀態、添加變更到暫存區,以及保存版本。文章中也簡單提及了 Git 的三個核心區域:工作目錄、暫存區和儲存庫,並解釋了 .gitignore 的用途。
Thumbnail
2026/01/28
上一篇文章中,我們已經成功安裝好 Git,在本篇文章中,將會講解 Git 的核心操作,包括初始化儲存庫、查看檔案狀態、添加變更到暫存區,以及保存版本。文章中也簡單提及了 Git 的三個核心區域:工作目錄、暫存區和儲存庫,並解釋了 .gitignore 的用途。
Thumbnail
看更多
你可能也想看
Thumbnail
在 vocus 與你一起探索內容、發掘靈感的路上,我們又將啟動新的冒險——vocus App 正式推出! 現在起,你可以在 iOS App Store 下載全新上架的 vocus App。 無論是在通勤路上、日常空檔,或一天結束後的放鬆時刻,都能自在沈浸在內容宇宙中。
Thumbnail
在 vocus 與你一起探索內容、發掘靈感的路上,我們又將啟動新的冒險——vocus App 正式推出! 現在起,你可以在 iOS App Store 下載全新上架的 vocus App。 無論是在通勤路上、日常空檔,或一天結束後的放鬆時刻,都能自在沈浸在內容宇宙中。
Thumbnail
vocus 慶祝推出 App,舉辦 2026 全站慶。推出精選內容與數位商品折扣,訂單免費與紅包抽獎、新註冊會員專屬活動、Boba Boost 贊助抽紅包,以及全站徵文,並邀請你一起來回顧過去的一年, vocus 與創作者共同留下了哪些精彩創作。
Thumbnail
vocus 慶祝推出 App,舉辦 2026 全站慶。推出精選內容與數位商品折扣,訂單免費與紅包抽獎、新註冊會員專屬活動、Boba Boost 贊助抽紅包,以及全站徵文,並邀請你一起來回顧過去的一年, vocus 與創作者共同留下了哪些精彩創作。
Thumbnail
iFrame在微前端架構中的優缺點,分析了其對用戶體驗、SEO及性能的影響。 iFrame在嵌入小型UI元件、創建隔離環境等特定場景中仍具備相當的應用價值。
Thumbnail
iFrame在微前端架構中的優缺點,分析了其對用戶體驗、SEO及性能的影響。 iFrame在嵌入小型UI元件、創建隔離環境等特定場景中仍具備相當的應用價值。
Thumbnail
這是一篇介紹如何使用Google Maps API在網頁上呈現地圖,並進行店家名稱的搜尋的文章。內容包含如何申請Google Cloud Platform的API金鑰、初始化地圖、設定搜尋功能等步驟。文章中提供了部分程式碼範例,並附上圖片說明操作過程。
Thumbnail
這是一篇介紹如何使用Google Maps API在網頁上呈現地圖,並進行店家名稱的搜尋的文章。內容包含如何申請Google Cloud Platform的API金鑰、初始化地圖、設定搜尋功能等步驟。文章中提供了部分程式碼範例,並附上圖片說明操作過程。
Thumbnail
在剛開始寫 JavaScript 可能大多數的人不會特別意識到 JavaScript 的型別系統有什麼特別之處,我是在看完 Youtube 上 CS50 的課程,才理解到在不同的程式語言中,會因為語言的特性而有不同的系統,JavaScript 就是偏向比較特別的那一種。
Thumbnail
在剛開始寫 JavaScript 可能大多數的人不會特別意識到 JavaScript 的型別系統有什麼特別之處,我是在看完 Youtube 上 CS50 的課程,才理解到在不同的程式語言中,會因為語言的特性而有不同的系統,JavaScript 就是偏向比較特別的那一種。
Thumbnail
JavaScript 演義 #5: 羽扇指天,語法清晰
Thumbnail
JavaScript 演義 #5: 羽扇指天,語法清晰
Thumbnail
JavaScript 演義 #4: 曹操傳令,語句如箭
Thumbnail
JavaScript 演義 #4: 曹操傳令,語句如箭
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News