JavaScript 變數：理解基元與引用型

兩種基本類型的資料儲存在 JavaScript 中的變數：基元 和 引用型別。了解這兩種類型之間的區別對於記憶體管理以及調節資料的共享、儲存和變更至關重要​​。本文深入探討了它們之間的區別，提供了現實世界的範例，並研究了有效處理這兩種類型的方法。

---

1.基元與引用型

原語

最簡單的資料型別稱為基元。它們直接將不可更改的資料儲存在變數中。 JavaScript 支援的基本型別如下：

• 字串：“你好”
• 數量：42
• 布林值：真或假
• 空
• 未定義
• 符號
• bigint

主要特徵：

• 不可變：它們的值不能直接改變。
• 以值儲存。

參考類型

另一方面，引用型別儲存物件的記憶體位置。變數不是儲存實際值，而是保存對記憶體位址的引用。例如：

• 對象：{名稱：'愛麗絲'}
• 數組：[1,2,3]
• 函數： function() { console.log('hello'); }
• 日期：新日期()

主要特徵：

• 可變：它們的內容可以修改。
• 儲存透過引用。

---

2.實際操作中的基元和引用型別

// Primitive Example
let a = 10;
let b = a;
b = 20;
console.log(a); // Output: 10

// Reference Example
let obj1 = { name: 'Alice' };
let obj2 = obj1;
obj2.name = 'Bob';
console.log(obj1.name); // Output: 'Bob'

說明：

• 原語：將 a 指派給 b 會建立該值的副本。更改 b 不會影響 a，因為它們是獨立的。
• 引用型別：obj1和obj2都指向相同的記憶體位置。透過 obj2 更改內容也會更新 obj1。

---

3.視覺化概念

• 基元：將每個變數想像成它自己的包含值的框。複製會建立一個具有獨立值的新框。
• 引用類型：將變數視為指向共享容器的標籤。引用同一容器的所有標籤都會受到其內容變更的影響。

---

4.變異與賦值

理解變異和賦值之間的區別是使用引用類型時的關鍵。

突變：修改現有物件的內容。

// Primitive Example
let a = 10;
let b = a;
b = 20;
console.log(a); // Output: 10

// Reference Example
let obj1 = { name: 'Alice' };
let obj2 = obj1;
obj2.name = 'Bob';
console.log(obj1.name); // Output: 'Bob'

賦值：更改對新物件的參考。

let arr = [1, 2, 3];
let arr2 = arr;
arr2.push(4);
console.log(arr); // Output: [1, 2, 3, 4]

---

5.複製物件與陣列

淺複製：

要建立物件或陣列的單獨副本，請使用展開運算子 (...) 或 Object.assign()。

let arr = [1, 2, 3];
let arr2 = arr;
arr2 = [4, 5, 6];
console.log(arr); // Output: [1, 2, 3]

深複製：

對於巢狀對象，需要深拷貝。常見的方法是使用 JSON.parse(JSON.stringify()).

let original = { name: 'Alice' };
let copy = { ...original };
copy.name = 'Bob';
console.log(original.name); // Output: 'Alice'

---

6.按值傳遞與按引用傳遞

原語（以數值傳遞）：

將基元傳遞給函數時，會傳遞值的副本。

let nested = { person: { name: 'Alice' } };
let deepCopy = JSON.parse(JSON.stringify(nested));
deepCopy.person.name = 'Bob';
console.log(nested.person.name); // Output: 'Alice'

引用型別（透過引用傳遞）：

傳遞參考型別時，會傳遞對記憶體位置的參考。

function modifyValue(x) {
  x = 20;
}
let num = 10;
modifyValue(num);
console.log(num); // Output: 10

---

7.原包裝種類

即使原語是不可變的，JavaScript 也會暫時將它們包裝在物件中以允許存取方法和屬性。

function modifyObject(obj) {
  obj.name = 'Bob';
}
let person = { name: 'Alice' };
modifyObject(person);
console.log(person.name); // Output: 'Bob'

說明：

字串原語「hello」暫時包裝在 String 物件中以存取 length 屬性。包裝在操作後被丟棄。

---

8.最佳實務

1. 使用 const 作為引用型別： 使用 const 聲明物件和陣列可以防止重新分配，但允許內容發生變化。

let str = 'hello';
console.log(str.length); // Output: 5

1. 避免意外突變：
   如果您需要獨立副本，請確保使用擴充運算子或深度複製技術建立副本。

2. 知道何時使用深層副本：
   對於淺層對象，擴展運算子就足夠了，但嵌套結構需要深層複製以避免引用問題。

3. 利用不變性：
   使用 Immutable.js 等函式庫或採用函數式程式設計技術來最大限度地減少意外突變引起的錯誤。

---

9.常見陷阱

1. 混淆賦值與變異：
   請注意您是在修改物件還是重新分配參考。

2. 修改共享引用:
   如果程式的其他部分也使用共享對象，則對共享對象的變更可能會產生意想不到的後果。

3. 假設所有副本都是獨立的：
   請記住，淺拷貝不能防止嵌套結構發生變化。

---

結論

JavaScript 的核心思想之一是基元和引用類型之間的區別。它會影響您向函數發送資料、管理變數以及防止程式碼中出現意外副作用的方式。透過掌握這些想法並使用最佳實踐，您可以建立更可靠且可維護的 JavaScript 程式碼。

追蹤我：Github Linkedin

以上是JavaScript 變數：理解基元與引用型的詳細內容。更多資訊請關注PHP中文網其他相關文章！