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

更新 發佈閱讀 5 分鐘

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


JavaScript 的兩大資料類型

JavaScript 有兩種內建的資料型別,分別為原始型別(Primitive values)物件類別(objects)

Primitive 是 JavaScript 的基礎資料單位,共有七種 :

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

原始型別 Primitive

Primitive 是「值類型」、「不可變」。

值類型 (value type):

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

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

Object 是「參考類型」、「可變」

參考類型 (reference type)

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

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

可變(mutable)

相對於不可變,可變指的是,Object 的內容是可以被更修改的。

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

總結

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

  • Primitive:值類型、不可變
  • Object:參考類型、可變

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


參考

  1. JavaScript 有哪些資料型別 (data types)? 該怎麼辨別一個變數的資料型別?
  2. JavaScript 的資料型別與資料結構
留言
avatar-img
Elaine 粼粼的林林總總
7會員
35內容數
不定期地分享程式/旅遊/學習/閱讀或各式各樣的文章,如果對我的分享有興趣,歡迎來找我玩~
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
賽勒布倫尼科夫以流亡處境回望蘇聯電影導演帕拉贊諾夫的舞台作品,以十段寓言式殘篇,重新拼貼記憶、暴力與美學,並將審查、政治犯、戰爭陰影與「形式即政治」的劇場傳統推到台前。本文聚焦於《傳奇:帕拉贊諾夫的十段殘篇》的舞台美術、音樂與多重扮演策略,嘗試解析極權底下不可言說之事,將如何成為可被觀看的公共發聲。
Thumbnail
賽勒布倫尼科夫以流亡處境回望蘇聯電影導演帕拉贊諾夫的舞台作品,以十段寓言式殘篇,重新拼貼記憶、暴力與美學,並將審查、政治犯、戰爭陰影與「形式即政治」的劇場傳統推到台前。本文聚焦於《傳奇:帕拉贊諾夫的十段殘篇》的舞台美術、音樂與多重扮演策略,嘗試解析極權底下不可言說之事,將如何成為可被觀看的公共發聲。
Thumbnail
柏林劇團在 2026 北藝嚴選,再次帶來由布萊希特改編的經典劇目《三便士歌劇》(The Threepenny Opera),導演巴里・柯斯基以舞台結構與舞台調度,重新向「疏離」進行提問。本文將從觀眾慾望作為戲劇內核,藉由沉浸與疏離的辯證,解析此作如何再次照見觀眾自身的位置。
Thumbnail
柏林劇團在 2026 北藝嚴選,再次帶來由布萊希特改編的經典劇目《三便士歌劇》(The Threepenny Opera),導演巴里・柯斯基以舞台結構與舞台調度,重新向「疏離」進行提問。本文將從觀眾慾望作為戲劇內核,藉由沉浸與疏離的辯證,解析此作如何再次照見觀眾自身的位置。
Thumbnail
本文深入解析臺灣劇團「晃晃跨幅町」對易卜生經典劇作《海妲.蓋柏樂》的詮釋,從劇本歷史、聲響與舞臺設計,到演員的主體創作方法,探討此版本如何讓經典劇作在當代劇場語境下煥發新生,滿足現代觀眾的觀看慾望。
Thumbnail
本文深入解析臺灣劇團「晃晃跨幅町」對易卜生經典劇作《海妲.蓋柏樂》的詮釋,從劇本歷史、聲響與舞臺設計,到演員的主體創作方法,探討此版本如何讓經典劇作在當代劇場語境下煥發新生,滿足現代觀眾的觀看慾望。
Thumbnail
《轉轉生》為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,融合舞蹈、音樂、時尚和視覺藝術,透過身體、服裝與群舞結構,回應殖民歷史、城市經驗與祖靈記憶的交錯。本文將從服裝設計、身體語彙與「輪迴」的「誕生—死亡—重生」結構出發,分析《轉轉生》如何以當代目光,形塑去殖民視角的奈及利亞歷史。
Thumbnail
《轉轉生》為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,融合舞蹈、音樂、時尚和視覺藝術,透過身體、服裝與群舞結構,回應殖民歷史、城市經驗與祖靈記憶的交錯。本文將從服裝設計、身體語彙與「輪迴」的「誕生—死亡—重生」結構出發,分析《轉轉生》如何以當代目光,形塑去殖民視角的奈及利亞歷史。
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: 曹操傳令,語句如箭
Thumbnail
JavaScript 演義 #2: 三顧茅廬,尋碼正位
Thumbnail
JavaScript 演義 #2: 三顧茅廬,尋碼正位
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News