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
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
今天我們會繼續用CodePen。 為何需要Object(物件) 在開始介紹object之前,我們先來討論object為何需要存在。 想像我們有一筆關於網站使用者的資料,裡面包含使用者名稱、年紀,還有sayHelloToUser()這個function。 我們可以逐個定義、宣告這些資料。
Thumbnail
今天我們會繼續用CodePen。 為何需要Object(物件) 在開始介紹object之前,我們先來討論object為何需要存在。 想像我們有一筆關於網站使用者的資料,裡面包含使用者名稱、年紀,還有sayHelloToUser()這個function。 我們可以逐個定義、宣告這些資料。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
本系列文章將循序漸進地介紹 JavaScript 的核心概念,從基礎語法到進階應用,例如非同步程式設計和 React 基礎。內容淺顯易懂,並使用生活化的比喻幫助讀者理解,搭配程式碼範例,適合 JavaScript 初學者學習。
Thumbnail
本系列文章將循序漸進地介紹 JavaScript 的核心概念,從基礎語法到進階應用,例如非同步程式設計和 React 基礎。內容淺顯易懂,並使用生活化的比喻幫助讀者理解,搭配程式碼範例,適合 JavaScript 初學者學習。
Thumbnail
Javascript 是一種程式語言,它的功能為"替網頁提供互動功能與動態行為",在本章節中,我將會完整且深入的解析 JavaScript 變數 (Variables) 與字串 (Strings),透過大量範例來強化理解與應用。
Thumbnail
Javascript 是一種程式語言,它的功能為"替網頁提供互動功能與動態行為",在本章節中,我將會完整且深入的解析 JavaScript 變數 (Variables) 與字串 (Strings),透過大量範例來強化理解與應用。
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
在開始討論這兩個陌生的名詞之前,我們先準備一份資料以便後續測試使用。 這筆資料是users的資料,可能是社群平台用來記錄使用者資料的格式。其中users是一個array(有[]包著),裡面包含了3個Object(有{}包著),每個Object內有許多的property-value配對(如id:
Thumbnail
在開始討論這兩個陌生的名詞之前,我們先準備一份資料以便後續測試使用。 這筆資料是users的資料,可能是社群平台用來記錄使用者資料的格式。其中users是一個array(有[]包著),裡面包含了3個Object(有{}包著),每個Object內有許多的property-value配對(如id:
Thumbnail
每個建構函數都有 prototype 屬性,是一個物件,用來存放共享的方法或屬性。 物件透過 __proto__ 連接到其原型,形成屬性和方法的查找路徑。
Thumbnail
每個建構函數都有 prototype 屬性,是一個物件,用來存放共享的方法或屬性。 物件透過 __proto__ 連接到其原型,形成屬性和方法的查找路徑。
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
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
建構函數是 JavaScript 中用來創建和初始化物件的一種特殊函數。它像一個「模具」,透過 new 關鍵字生成多個相似的物件實例。
Thumbnail
建構函數是 JavaScript 中用來創建和初始化物件的一種特殊函數。它像一個「模具」,透過 new 關鍵字生成多個相似的物件實例。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News