JavaScript 指標

1. 在 JavaScript 中傳遞原始物件的值
2. JavaScript 中複合物件的引用傳遞
3. 在 JavaScript 中使用 Spread Operator 進行深度複製
4. 使用 JSON.parse() 和 JSON.stringify() 進行物件的深層複製
5. 在 JavaScript 中使用 Object.assign() 進行物件的深層複製
6. 在 JavaScript 中使用 Object.slice(0) 進行陣列的深度複製
7. 在 JavaScript 中使用 lodash 進行深度克隆

在像 C++ 這樣的程式語言中，我們經常初始化指標以獲取內容位置。但是在 JavaScript 的情況下，我們沒有直接指向地址的約定。

在 JavaScript 中，我們有兩種資料型別，一種是原始資料型別，另一種是複合資料型別。

通常，原始資料型別遵循以維護按值傳遞。複合資料型別允許按引用傳遞；這就是淺拷貝的工作原理。

物件的淺拷貝獲取目標物件的引用，所做的任何修改都會影響原始物件和副本。

在這裡，我們將看到按值傳遞和按引用傳遞的工作原理。我們還將嘗試製作複合物件的深拷貝。

具體來說，我們將使用 lodash、JSON.parse 和 JSON.stringify、slice()、Object.assign() 功能介紹 spread operator。

在 JavaScript 中傳遞原始物件的值

在處理原始物件時，會維護目標物件的一般副本。並且在這個驅動器中，即使對副本進行任何修改，原始物件也不會受到影響。

這個過程以 pass by value 命名，預設執行 deep copy。

var x = 7;
var y = x;
x = 42;
console.log(x);
console.log(y);

輸出：

物件 y 的修改不會影響 x 物件。

JavaScript 中複合物件的引用傳遞

在複合物件的情況下，引用作為副本傳遞。因此，對複製物件所做的任何修改都會影響原始物件。

這種方法也稱為淺拷貝或按引用傳遞。

var x = {num: 42};
var y = x;
y.num = 7;
console.log(x.num);
console.log(y.num);

輸出：

在這裡，我們有一個物件 y，它獲取 x 的副本。但內部圖片僅使用物件 x 引用。

因此，當我們更改副本中的內容時，效果將在原始物件上，因為這裡的兩個物件都指向同一個引用。

為了解決這種淺拷貝的情況，我們有一些命題和工作，不管物件型別（陣列或物件）或需要單獨注意。

例如，spread operator 適用於陣列和物件中的 deep copy。讓我們按照以下部分進行清晰的檢視。

在 JavaScript 中使用 Spread Operator 進行深度複製

傳播運算子是將一個物件傳播到另一個物件的約定。這種複製方法是準確的，任何修改都會使物件保持完整或應該被更改。

同樣，展開運算子適用於陣列和物件。讓我們檢查以下例項。

var x = [1, 2, 3];
var y = [...x];
y[2] = 5;
console.log(x[2]);
console.log(y[2]);

輸出：

對巢狀物件使用擴充套件運算子會很乏味，因為你必須訪問每個級別的鍵。在這種情況下，更簡單的解決方案是使用即將推出的方法。

使用 JSON.parse() 和 JSON.stringify() 進行物件的深層複製

每當我們使用一個物件時，我們都會訪問觸發 keys 的內容。JSON.parse(JSON.stringify(Object)) 使艱苦的工作變得更好。

它對目標物件進行深拷貝，我們還可以修改內容。

var json = {num:{ val: 7}};
var collect = JSON.parse(JSON.stringify(json));
collect.num.val = 42;
console.log(json.num.val);
console.log(collect.num.val);

輸出：

在 JavaScript 中使用 Object.assign() 進行物件的深層複製

Object.assign() 方法制作原始物件的準確副本。

以這種方式解決問題，我們需要 2 個引數；一個是一對空白花括號 {}，後跟目標物件。讓我們檢查例項以獲得更好的理解。

var x = {'food': 'cheese',
        'sport': 'badminton'};
var y = Object.assign({}, x);
y.food = 'chocolate';
console.log(x.food);
console.log(y.food);

輸出：

在 JavaScript 中使用 Object.slice(0) 進行陣列的深度複製

沒有任何引數或零的方法 slice() 啟動可以進行深層複製。這是處理陣列的熟悉且最常用的方法之一。

除此之外，你還可以使用 map 複製陣列。檢查此文件以進行進一步查詢。

這些示例將更具說明性。

var x = [1, 3, 4];
var y = x.slice(0);
y[2] = 5;
console.log(x);
console.log(y);

輸出：

在 JavaScript 中使用 lodash 進行深度克隆

要使用此解決方案，你需要載入 lodash 4.x 庫。我們已經檢查了 jsbin 編輯器中的示例。

在這裡，你將在庫部分找到 lodash 4.x。

var x = [1,2,3];
var y = _.cloneDeep(x);
y[1] = 4;
console.log(y[1]);
console.log(x[1]);

輸出：