JS學習筆記#8 | 引用資料型別(Reference Data Type)

更新於 發佈於 閱讀時間約 3 分鐘

在 JavaScript 中,資料型別主要分為原始型(Primitive Type)和引用型(Reference Type)


原始型(Primitive Type)

  • 定義:是儲存實際數據值的變數。它們在記憶體中直接存儲值,並且每個原始型變數都有自己的記憶體空間。
  • 資料型別StringNumberBooleanNullUndefinedSymbolBigInt
  • 特點
    • 值比較:當比較兩個原始型變數時,比較的是它們的值。
    • 獨立性:原始型變數之間的複製不會互相影響。修改其中一個不會影響另一個。
let x = 10; 
let y = 10;
console.log(x == y); // 輸出:true
let a = 10;
let b = a; // 將 a 的值複製到 b
b = 20; // 修改 b 不會影響 a
console.log(a); // 輸出:10
console.log(b); // 輸出:20

引用型(Reference Type)

  • 定義:儲存的是對象在記憶體中的地址,而不是實際的數據。這意味著多個變數可以指向同一個對象,並影響同一個記憶體位置。
  • 資料型別ObjectArrayFunction
  • 特點
    • 引用比較:當比較兩個引用型變數時,比較的是它們的記憶體位置。
    • 共享記憶體:如果兩個變數指向同一個對象,對該對象的任何更改都會影響這兩個變數。
let Array1 = [1, 2, 3]; 
let Array2 = [1, 2, 3];
console.log(Array1 == Array2); // 輸出:false ,因為其實是指向不同的記憶體位置
let Array1 = [1, 2, 3];
let Array2 = Array1;
console.log(Array1 == Array2); // 輸出:true ,因為指向相同的記憶體位置
let arr1 = [1, 2, 3];
let arr2 = arr1; // 將 arr1 的引用複製給 arr2
arr2[0] = 99; // 修改 arr2 的內容
console.log(arr1); // 輸出:[99, 2, 3],因為 arr1 和 arr2 指向同一個陣列

原始型與引用型的主要區別

  1. 儲存方式
    • 原始型:直接儲存值。
    • 引用型:儲存對象的地址(引用)。
  2. 複製行為
    • 原始型:賦值會複製其值,兩者相互獨立。
    • 引用型:賦值會複製其引用,兩者指向相同的對象,修改一個會影響到另一個。
  3. 比較行為
    • 原始型:比較的是值本身。
    • 引用型:比較的是記憶體地址,只有在指向同一個對象時才相等。




留言
avatar-img
留言分享你的想法!
avatar-img
koko的沙龍
1會員
34內容數
koko的沙龍的其他內容
2025/04/30
React 事件處理:讓網頁動起來~ 網頁的互動性是吸引使用者、提供良好體驗的關鍵。 在 React 中,透過監聽使用者的操作(例如點擊、滑鼠移動、鍵盤輸入),並執行相應的程式碼,來實現豐富的互動效果。
Thumbnail
2025/04/30
React 事件處理:讓網頁動起來~ 網頁的互動性是吸引使用者、提供良好體驗的關鍵。 在 React 中,透過監聽使用者的操作(例如點擊、滑鼠移動、鍵盤輸入),並執行相應的程式碼,來實現豐富的互動效果。
Thumbnail
2025/04/28
在 React 的世界裡,Props 負責從父元件向子元件傳遞資料,而 State 則是負責管理元件自身的內部資料。 State 就像元件的記憶,可以儲存元件的狀態,並根據狀態的變化來更新 UI。
Thumbnail
2025/04/28
在 React 的世界裡,Props 負責從父元件向子元件傳遞資料,而 State 則是負責管理元件自身的內部資料。 State 就像元件的記憶,可以儲存元件的狀態,並根據狀態的變化來更新 UI。
Thumbnail
2025/04/27
在 React 的世界裡,元件 (Component) 就像一個個獨立的個體,各自負責 UI 的一部分,要讓這些個體協同工作,就需要一種溝通的機制,而 Props 就是組件之間通信和數據傳遞的主要方式。
Thumbnail
2025/04/27
在 React 的世界裡,元件 (Component) 就像一個個獨立的個體,各自負責 UI 的一部分,要讓這些個體協同工作,就需要一種溝通的機制,而 Props 就是組件之間通信和數據傳遞的主要方式。
Thumbnail
看更多
你可能也想看
Thumbnail
2025 vocus 推出最受矚目的活動之一——《開箱你的美好生活》,我們跟著創作者一起「開箱」各種故事、景點、餐廳、超值好物⋯⋯甚至那些讓人會心一笑的生活小廢物;這次活動不僅送出了許多獎勵,也反映了「內容有價」——創作不只是分享、紀錄,也能用各種不同形式變現、帶來實際收入。
Thumbnail
2025 vocus 推出最受矚目的活動之一——《開箱你的美好生活》,我們跟著創作者一起「開箱」各種故事、景點、餐廳、超值好物⋯⋯甚至那些讓人會心一笑的生活小廢物;這次活動不僅送出了許多獎勵,也反映了「內容有價」——創作不只是分享、紀錄,也能用各種不同形式變現、帶來實際收入。
Thumbnail
嗨!歡迎來到 vocus vocus 方格子是台灣最大的內容創作與知識變現平台,並且計畫持續拓展東南亞等等國際市場。我們致力於打造讓創作者能夠自由發表、累積影響力並獲得實質收益的創作生態圈!「創作至上」是我們的核心價值,我們致力於透過平台功能與服務,賦予創作者更多的可能。 vocus 平台匯聚了
Thumbnail
嗨!歡迎來到 vocus vocus 方格子是台灣最大的內容創作與知識變現平台,並且計畫持續拓展東南亞等等國際市場。我們致力於打造讓創作者能夠自由發表、累積影響力並獲得實質收益的創作生態圈!「創作至上」是我們的核心價值,我們致力於透過平台功能與服務,賦予創作者更多的可能。 vocus 平台匯聚了
Thumbnail
本系列文章將循序漸進地介紹 JavaScript 的核心概念,從基礎語法到進階應用,例如非同步程式設計和 React 基礎。內容淺顯易懂,並使用生活化的比喻幫助讀者理解,搭配程式碼範例,適合 JavaScript 初學者學習。
Thumbnail
本系列文章將循序漸進地介紹 JavaScript 的核心概念,從基礎語法到進階應用,例如非同步程式設計和 React 基礎。內容淺顯易懂,並使用生活化的比喻幫助讀者理解,搭配程式碼範例,適合 JavaScript 初學者學習。
Thumbnail
每個建構函數都有 prototype 屬性,是一個物件,用來存放共享的方法或屬性。 物件透過 __proto__ 連接到其原型,形成屬性和方法的查找路徑。
Thumbnail
每個建構函數都有 prototype 屬性,是一個物件,用來存放共享的方法或屬性。 物件透過 __proto__ 連接到其原型,形成屬性和方法的查找路徑。
Thumbnail
建構函數是 JavaScript 中用來創建和初始化物件的一種特殊函數。它像一個「模具」,透過 new 關鍵字生成多個相似的物件實例。
Thumbnail
建構函數是 JavaScript 中用來創建和初始化物件的一種特殊函數。它像一個「模具」,透過 new 關鍵字生成多個相似的物件實例。
Thumbnail
Javascript 是一種程式語言,它的功能為"替網頁提供互動功能與動態行為",在本章節中,我將會完整且深入的解析 JavaScript 變數 (Variables) 與字串 (Strings),透過大量範例來強化理解與應用。
Thumbnail
Javascript 是一種程式語言,它的功能為"替網頁提供互動功能與動態行為",在本章節中,我將會完整且深入的解析 JavaScript 變數 (Variables) 與字串 (Strings),透過大量範例來強化理解與應用。
Thumbnail
在 JavaScript 中,資料型別主要分為原始型(Primitive Type)和引用型(Reference Type)。
Thumbnail
在 JavaScript 中,資料型別主要分為原始型(Primitive Type)和引用型(Reference Type)。
Thumbnail
今天要談的內容也是JavaScript很核心的部分,即使學完了先前的章節,馬上去看別人寫的JavaScript程式碼還是會看不懂,主要是因為JS開發者會採用各種簡化和替代的寫法,我們一一討論。 Anonymous(匿名) Function 首先我們要討論的是Anonymous(匿名) Fun
Thumbnail
今天要談的內容也是JavaScript很核心的部分,即使學完了先前的章節,馬上去看別人寫的JavaScript程式碼還是會看不懂,主要是因為JS開發者會採用各種簡化和替代的寫法,我們一一討論。 Anonymous(匿名) Function 首先我們要討論的是Anonymous(匿名) Fun
Thumbnail
在開始討論這兩個陌生的名詞之前,我們先準備一份資料以便後續測試使用。 這筆資料是users的資料,可能是社群平台用來記錄使用者資料的格式。其中users是一個array(有[]包著),裡面包含了3個Object(有{}包著),每個Object內有許多的property-value配對(如id:
Thumbnail
在開始討論這兩個陌生的名詞之前,我們先準備一份資料以便後續測試使用。 這筆資料是users的資料,可能是社群平台用來記錄使用者資料的格式。其中users是一個array(有[]包著),裡面包含了3個Object(有{}包著),每個Object內有許多的property-value配對(如id:
Thumbnail
今天我們會繼續用CodePen。 為何需要Object(物件) 在開始介紹object之前,我們先來討論object為何需要存在。 想像我們有一筆關於網站使用者的資料,裡面包含使用者名稱、年紀,還有sayHelloToUser()這個function。 我們可以逐個定義、宣告這些資料。
Thumbnail
今天我們會繼續用CodePen。 為何需要Object(物件) 在開始介紹object之前,我們先來討論object為何需要存在。 想像我們有一筆關於網站使用者的資料,裡面包含使用者名稱、年紀,還有sayHelloToUser()這個function。 我們可以逐個定義、宣告這些資料。
Thumbnail
在 JavaScript 中,資料型態分為「原生值(primitive values)」和「物件(objects)」。原生值包括String、Number、Boolean、Null、Undefined、Symbol和 BigInt。物件則是包括Array和 Function等結構。
Thumbnail
在 JavaScript 中,資料型態分為「原生值(primitive values)」和「物件(objects)」。原生值包括String、Number、Boolean、Null、Undefined、Symbol和 BigInt。物件則是包括Array和 Function等結構。
Thumbnail
自己在剛開始進入前端領域時,很剛好遇上需要使用 TypeScript 的案子,一開始都是跟著前輩怎麼寫就怎麼寫,不太有其他餘力來思考「為什麼」會需要寫這門程式語言,直到自己後來使用了 TypeScript 完整開發了電商的購物流程,才慢慢理解到使用 TypeScript 的好處與優勢。
Thumbnail
自己在剛開始進入前端領域時,很剛好遇上需要使用 TypeScript 的案子,一開始都是跟著前輩怎麼寫就怎麼寫,不太有其他餘力來思考「為什麼」會需要寫這門程式語言,直到自己後來使用了 TypeScript 完整開發了電商的購物流程,才慢慢理解到使用 TypeScript 的好處與優勢。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News