簡述 JS 中對象的創建和拷貝

在 JavaScript 中，對象是一種非常重要且靈活的數據結構，用于存儲多個值（屬性）和方法（函數）

對象的創建和拷貝是日常開發中經常涉及的操作，對于業務邏輯的準確實現有著重要的作用

本文將簡要概括 JavaScript 中對象的創建和拷貝方式，都是一些非常基礎的知識，大家看個樂就好~

對象的作用
創建對象
- 對象字面量
- 使用 new Object() 方法
- 構造函數
- Object.create()
- 類（ES6+）
對象的拷貝
- 深拷貝與淺拷貝的區別
- 如何實現深拷貝
- 展開運算符是深拷貝還是淺拷貝
補充知識點：JS 中有哪些數據類型？
面試問題合集

對象的作用

JavaScript中的對象是一種復合數據類型，用于存儲多個值（屬性）和方法（函數）。它主要有以下作用：

組織數據：對象可以存儲和管理相關數據，使數據處理更加結構化。
封裝功能：對象可以包含相關的函數，便于管理和使用。
數據抽象：對象允許隱藏內部實現細節，只暴露必要的操作接口。
模擬現實世界實體：對象是現實世界實體的良好抽象，有助于在程序中模擬現實世界的行為和屬性。

創建對象

在JavaScript中，創建對象是非常常見的操作，因為對象是一種非常靈活的數據結構，用于存儲和組織數據。以下是創建對象的幾種主要方式及其特點：

1. 對象字面量

這是創建對象最簡單也是最直接的方式。通過大括號 {} 來定義一個新對象，可以在其中直接定義屬性和方法。

let person = {name: "Alice",age: 25,greet: function() {console.log("Hello, " + this.name);}
};

優點：簡單直觀，易于閱讀和寫入。
缺點：不適合創建具有相同屬性和方法的多個實例。

2. 使用 `new Object()` 方法

這種方法使用 new Object() 構造函數來創建一個新的空對象。這是一種較為基礎的方法，與對象字面量 {} 類似，但使用了構造函數的形式。

let person = new Object();
person.name = "Eve";
person.age = 28;
person.greet = function() {console.log("Hello, " + this.name);
};

優點：

明確表達了創建對象的意圖。
可以動態添加屬性和方法。

缺點：

與使用對象字面量相比，沒有明顯的優勢，而且寫法更繁瑣。
每次使用 new Object() 都會創建一個全新的對象實例，如果需要創建多個結構相同的對象，這種方式不如使用構造函數或類那樣高效。

比較 `new Object()` 和 `{}`

實際上，new Object() 和對象字面量 {} 在功能上是等價的。對象字面量的語法更簡潔、更直觀，因此在實際開發中更常被使用。例如，以下兩種創建空對象的方式是等效的：

let obj1 = new Object();
let obj2 = {};

通常，推薦使用對象字面量的方式，因為它更簡潔且易于閱讀和維護。
然而，了解 new Object() 的存在和用法也是有益的，特別是在需要通過某些特定的構造函數動態決定對象類型的高級用法中。

3. 構造函數

可以定義一個構造函數，然后用 new 關鍵字來創建對象的實例。

function Person(name, age) {this.name = name;this.age = age;this.greet = function() {console.log("Hello, " + this.name);};
}
let person1 = new Person("Bob", 30);

優點：適合創建多個具有相似屬性和方法的對象。
缺點：每個實例都會重新定義方法，可能導致內存浪費。

4. Object.create()

Object.create() 方法可以用來創建一個新對象，使用現有的對象來提供新創建的對象的__proto__。

const proto = {greet: function() {console.log("Hello, " + this.name);}
};let person = Object.create(proto);
person.name = "Charlie";
person.age = 20;person.greet();

優點：可以指定原型對象，適合實現原型繼承。
缺點：不如構造函數直觀，使用稍復雜。

5. 類（ES6+）

ES6 引入了類的概念，使得創建對象更接近傳統面向對象編程。

class Person {constructor(name, age) {this.name = name;this.age = age;}greet() {console.log("Hello, " + this.name);}
}let person = new Person("Dave", 40);

優點：語法清晰，易于理解和繼承，更接近傳統的OOP語法。
缺點：較新的語法，舊版瀏覽器可能不支持。

對象的拷貝

在 JavaScript 中，理解深拷貝和淺拷貝的區別及其實現方式對于管理復雜數據結構非常重要。以下是深拷貝和淺拷貝的區別和實現方法的詳解：

深拷貝與淺拷貝的區別

淺拷貝（Shallow Copy）：
- 淺拷貝只復制對象的第一層屬性。如果屬性值是基本數據類型，拷貝的是值；如果屬性值是引用數據類型（如對象或數組），拷貝的是內存地址（引用），因此原始數據和拷貝數據會共享相同的引用對象。
- 修改引用數據類型的屬性時，原始對象和拷貝對象都會受到影響。
深拷貝（Deep Copy）：
- 深拷貝會遞歸復制所有層級的屬性，確保原始數據和拷貝數據在內存中完全獨立。修改拷貝對象不會影響原始對象。
- 實現深拷貝通常需要遞歸調用或使用特定的庫函數。

如何實現深拷貝

使用 JSON 方法：
- 最簡單的深拷貝實現可以通過 JSON 的序列化和反序列化完成。但這種方法不能復制函數、undefined、Symbol 等特殊類型的數據，也無法處理循環引用的情況。
```
const obj = {a: 1,b: {c: 2}
};
const deepCopy = JSON.parse(JSON.stringify(obj));
deepCopy.b.c = 3;
console.log(obj.b.c); // 輸出 2
```
使用庫（如 Lodash 的 cloneDeep 方法）：
- 一些 JavaScript 庫如 Lodash 提供了深拷貝的實現。這些實現通常更為完整，能處理各種數據類型和復雜的數據結構。
```
import _ from 'lodash';
const obj = {a: 1,b: {c: 2}
};
const deepCopy = _.cloneDeep(obj);
deepCopy.b.c = 3;
console.log(obj.b.c); // 輸出 2
```

手動實現遞歸深拷貝：

你可以手動編寫一個遞歸函數來實現深拷貝。這種方法需要處理各種數據類型和循環引用的問題。

function deepClone(obj, hash = new WeakMap()) {if (obj === null) return null; if (typeof obj !== 'object') return obj;if (obj instanceof Date) return new Date(obj);if (obj instanceof RegExp) return new RegExp(obj);if (hash.has(obj)) return hash.get(obj);const cloneObj = new obj.constructor();hash.set(obj, cloneObj);for (const key in obj) {if (obj.hasOwnProperty(key)) {cloneObj[key] = deepClone(obj[key], hash);}}return cloneObj;
}

開發中如何避免淺拷貝

在處理復雜的數據結構時，尤其是包含嵌套對象或數組時，避免使用如 Object.assign() 或展開運算符（...）這樣的淺拷貝方法。
使用深拷貝方法（如上述的 JSON 方法或 Lodash 的 cloneDeep）來確保數據的完整獨立性。
在不需要完整拷貝對象的情況下，明確你的需求，選擇合適的拷貝策略。

展開運算符是深拷貝還是淺拷貝

展開運算符（spread operator）在 JavaScript 中用于“展開”數組或對象的元素。
當用于對象或數組時，展開運算符僅復制第一層的元素到新的數組或對象中。
這意味著如果原始數據結構中包含嵌套的對象或數組，這些嵌套的結構不會被真正地復制，而是復制它們的引用。
因此，展開運算符實際上進行的是淺拷貝。

示例：對象的淺拷貝

const original = {a: 1,b: {c: 2}
};
const copied = { ...original };
copied.a = 3; // 修改基本類型值
copied.b.c = 3; // 修改引用類型值
console.log(original); // 輸出：{ a: 1, b: { c: 3 } }
console.log(copied);  // 輸出：{ a: 3, b: { c: 3 } }

在這個例子中，修改 copied.b.c 同時也改變了 original.b.c，因為 b 屬性的值（一個對象）通過引用被復制到了 copied 對象中。

示例：數組的淺拷貝

const originalArray = [1, { b: 2 }, 3];
const copiedArray = [...originalArray];
copiedArray[1].b = 3; // 修改數組中對象的屬性
console.log(originalArray); // 輸出：[1, { b: 3 }, 3]
console.log(copiedArray);  // 輸出：[1, { b: 3 }, 3]

這個例子同樣展示了修改 copiedArray 中的對象屬性 b 時，originalArray 中相應的屬性也被改變了。這是因為數組中的對象是通過引用被復制的。

補充知識點：JS 中有哪些數據類型？

在 JavaScript 中，數據類型分為兩大類：基本數據類型（Primitive types）和引用數據類型（Reference types）。
理解這兩種類型的區別對于掌握 JavaScript 的數據操作和性能優化非常重要。

基本數據類型（Primitive types）

基本數據類型直接存儲在棧（Stack）中，它們的值是不可變的。
當你對基本數據類型的變量進行操作時，實際上是在操作它的值的副本，而不是原始值本身。JavaScript 中的基本數據類型包括：

Number: 用于表示整數或浮點數，也包括特殊的數值如 Infinity, -Infinity, 和 NaN。
BigInt: 用于表示非常大的整數，超出了 Number 類型能夠表示的范圍。
String: 由字符組成的序列，用于表示文本數據，使用單引號、雙引號或反引號表示。
Boolean: 表示邏輯實體，只有兩個值，true 和 false，用于邏輯判斷。
Undefined: 一個變量被聲明了，但沒有賦值時，它的值就是 undefined。
Null: 表示沒有值或空值。通常用來表示變量將不會存儲任何值。
Symbol: ES6 引入的新的基本數據類型，每個 Symbol 的值都是唯一的，常用于創建對象的私有成員。

引用數據類型（Reference types）

引用數據類型的值是對象，存儲在堆（Heap）中，變量實際上存儲的是一個指向堆內存中實際對象的指針。這意味著當你操作一個對象時，你是在操作對象的引用而不是實際的對象。引用數據類型包括：

Object: 基本的對象類型，幾乎所有的 JavaScript 對象都是 Object 類型的實例。
- Date: 用于處理日期和時間。
- RegExp: 用于定義正則表達式。
- Array和Function也都是對象。
- 其他如 Map, Set, WeakMap, WeakSet 等也屬于對象。
Array: 用于存儲有序集合的對象。
Function: 函數實際上是一種特殊類型的對象，它具有可被執行的功能。

特殊提及

BigInt: ES2020 引入的一種新的數字類型，可以表示非常大的整數。
傳統的 Number 類型只能安全地表示 -2^53 + 1 到 2^53 - 1 之間的整數，而 BigInt 可以表示任意大的整數。

類型檢測

可以使用 typeof 操作符來檢查一個變量的類型，除了 null 返回的是 "object"。
對于更復雜的類型判斷，通常使用 instanceof 操作符或者 Object.prototype.toString.call() 方法。

總結

基本數據類型：Number, String, Boolean, Undefined, Null, Symbol, BigInt
引用數據類型：Object (包括 Array, Function, Date, RegExp 等)
JavaScript 的靈活性在很大程度上來自于它的動態類型系統和對各種數據類型的支持。
理解這些數據類型及其使用場景對于編寫有效和高效的 JavaScript 代碼至關重要。
了解這些類型及其分類有助于更好地理解 JavaScript 的內存管理和性能優化，以及如何在代碼中有效地處理數據。