在js中如何區分深拷貝與淺拷貝？-有解無憂

一、自我理解

簡單來講就是：深拷貝層層拷貝，淺拷貝只拷貝第一層，

在深拷貝中，新物件中的更改不會影響原物件，而在淺拷貝中，新物件中的更改，原物件中也會跟著改，
在深拷貝中，原物件與新物件不共享相同的屬性，而在淺拷貝中，它們具有相同的屬性，

舉個栗子：存在A和B兩個資料，假設B復制了A，當修改A時，如果B跟著A變化了，則是淺拷貝；如果B不受A的改變而改變，則是深拷貝

let A = [0,1,2]
let B = A
console.log(A === B);
A[0] = 3
console.log(A,B);

結果如下：

這就是一個簡單的淺拷貝例子，雖然B復制了A，但是修改了A，B卻跟著A變化了？

二、資料存盤形式

通過上述栗子，我們就需要了解資料型別的存盤方式了，如果還沒有了解資料型別的小伙伴歡迎閱讀 JS中8種資料型別

基本資料型別：number，string，boolean，null，undefined，symbol（es6），還有谷歌67版本中的BigInt（任意精度整數）
參考資料型別：Object【Object是個大類，function函式、array陣列、date日期...等都歸屬于Object】

（1）基本資料型別存盤于堆疊中

變數名和值都存盤與堆疊中

每當宣告一個變數，就會開辟一個新的記憶體空間來存盤值，例如：let a = 1

// 宣告一個變數
let a = 1;

當b復制了a后，因為b也是一個變數，所以堆疊記憶體會再開辟一個新的記憶體空間：

// 宣告一個變數
let a = 1;
let b = a; //b變數復制a變數
console.log(a,b); //1 1

這就一目了然了，a和b兩個變數歸屬于不同的記憶體空間，所以當你修改其中一個值，另外一個值不會受其影響！

// 宣告一個變數
let a = 1;
let b = a; //b變數復制a變數
console.log(a,b); //1 1 
// 修改a的值不影響b
a = 123;
console.log(a,b); //123 1

（2）參考資料型別存盤與堆中

變數名存盤在堆疊中，值存在于堆中，這時堆疊記憶體中會提供一個指標用于指向堆記憶體中的值

當我們宣告一個參考資料型別時，會提供一個指標指向堆記憶體中的值：

// 宣告一個參考型別的值
let a = [0,1,2,3,4]

當b復制了a后，只是復制了當前堆疊記憶體中提供的指標，指向同一個堆記憶體中的值，并不是復制了堆記憶體中的值：

let a = [0,1,2,3,4]
let b = a //復制的是一個指標，而不是堆中的值

所以當我們進行a[0]=1 時，導致指標所指向的堆記憶體中的值發生了改變，而a和b是同一個指標，指向同一個堆記憶體地址，所以b的值也會受影響，這就是淺拷貝！

// 宣告一個參考型別的值
let a = [0,1,2,3,4];
let b = a; //復制的是一個指標，而不是堆中的值
console.log(a === b);
a[0] = 1; //改變a陣列值，b陣列跟著改變(淺拷貝)
console.log(a,b);

所以，我們需要在堆記憶體中新開辟一個記憶體專門接收存盤b的值，道理與基本資料型別一樣，這樣就可以實作深拷貝（修改一個值不會影響另一個值的變化）：

三、怎樣實作深拷貝？

（1）借助JSON物件的parse和stringify

parse()方法用于將一個字串決議為json物件

stringify()方法用于將一個物件決議為字串

// 淺拷貝
let arr = [1,"hello",{name:"張三",age:21}]
let copyArr = arr
console.log(arr === copyArr); //true
arr[1] = "您好"
console.log("淺拷貝",arr, copyArr);

// JSON物件方法實作深拷貝
let arr = [1,"hello",{name:"張三",age:21}]
let newArr = JSON.parse(JSON.stringify(arr)) //將arr陣列轉換為字串，再作為引數轉化為物件
arr[1] = "您好"
arr[2].name = "法外狂徒"
console.log("深拷貝",arr, newArr);

原理是利用JSON.stringify將物件轉成JSON字串，再用JSON.parse把字串決議成物件，這樣在堆中開辟了新的記憶體，實作深拷貝

這種寫法非常簡單，而且可以應對大部分的應用場景，但是它還是有很大缺陷的，比如拷貝其他參考型別、拷貝函式、回圈參考等情況

（2）手寫遞回

遞回方法實作深度克隆原理：遍歷物件、陣列...直到里邊都是基本資料型別，然后再去復制，就是深度拷貝

如果是原始型別，無需繼續拷貝，直接回傳
如果是參考型別，創建一個新的物件，遍歷需要克隆的物件，將需要克隆物件的屬性執行深拷貝后依次添加到新物件上

// 手寫遞回實作深拷貝
function clone(target) {
    if (typeof target === 'object') {
        // 創建一個新物件
        let cloneTarget = {};
        // 遍歷需要克隆的物件
        for (const key in target) {
            // 將需要克隆物件的屬性執行深拷貝后依次添加到新物件上
            cloneTarget[key] = clone(target[key]);
        }
        // 回傳克隆物件
        return cloneTarget;
    } else {
        return target;
    }
};
// 模擬拷貝物件
const person = {
    name: "李小白",
    age: 18,
    job: {
        name:"web前端",
        salary:"15k",
        address:"成都"
    }
};
// 將需要克隆的物件傳遞給clone函式作為引數，接收一個克隆物件作為回傳結果
let newTarget = clone(person)
//修改原物件屬性
person["name"] = "李大白" 
person["job"]["salary"] = "25k" 
console.log(person,newTarget); //實作深拷貝

利用遞回可以實作深度拷貝，但是有局限性，例如陣列還沒考慮進去！

想要兼容陣列其實很簡單，直接判斷一下引數是不是陣列，然后利用三木運算決定是創建一個新物件還是一個新陣列：

function clone(target) {
    if (typeof target === 'object') {
        let isArr = Array.isArray(target)
        // 判斷傳入的引數是陣列嗎 ? 是則賦值[] : 否則賦值{}
        let cloneTarget = isArr ? [] : {};
        // 遍歷需要克隆的物件
        for (const key in target) {
            // 將需要克隆物件的屬性執行深拷貝后依次添加到新物件上
            cloneTarget[key] = clone(target[key]);
        }
        // 回傳克隆物件
        return cloneTarget;
    } else {
        return target;
    }
};

（3）JQuery中extend方法

在jQuery中提供一個$extend()來實作深拷貝

語法：

$.extend( [deep ], target, object1 [, objectN ] )

deep 表示是否深拷貝，為true為深拷貝，為false，則為淺拷貝
target Object型別目標物件，其他物件的成員屬性將被附加到該物件上，
object1 objectN可選， Object型別第一個以及第N個被合并的物件，

let arr = ["李小白",18,["前端","15k"],21]
// true:開啟深拷貝,目標物件:[],原物件:arr
let cloneArr = $.extend(true, [], arr)
arr[0] = "李大白";
arr[2][0] = "java";
console.log(arr, cloneArr);

$extend()第一個引數為true時可以實作深拷貝！但是第一個引數為false，則只會拷貝第一層屬性，不能實作深拷貝：

let arr = ["李小白",18,["前端","15k"],21]
// false:不開啟深拷貝,目標物件:[],原物件:arr
let cloneArr = $.extend(false, [], arr)
arr[0] = "李大白";
arr[2][0] = "java";
console.log(arr, cloneArr);

總結/注意

實作深拷貝方式有多種，以上三種較為常用，另外還有一個：函式庫lodash中_.cloneDeep方法（本人未使用過）也可以實作深拷貝，

最后需要補充一下，網上有很多人說slice和concat方法可以實作，但我要說的是slice和concat方法不能實作深拷貝的！！！

下面舉例說明：

// slice()
let arr = [0,1,["hello","world"]];
let cloneArr = arr.slice();
arr[0] = "零";
arr[2][0] = "hello2022"
console.log(arr,cloneArr);

// concat()
let arr = [0,1,["hello","world"]];
let cloneArr = arr.concat();
arr[0] = "零";
arr[2][0] = "hello2022"
console.log(arr,cloneArr);

這兩個方法得到的結果都是一樣的：

這一點大家一定要注意，深拷貝必須要拷貝所有層級的屬性，而這兩個方法拷貝不徹底，也就是只能拷貝第一層，希望大家不要踩坑！

本文來自博客園，作者：不知名前端李小白，轉載請注明原文鏈接：https://www.cnblogs.com/libo-web/p/15746886.html

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/421833.html

標籤：JavaScript

上一篇：帶你快速入坑ES6

下一篇：【JavaScript】筆記（2）--- ECMAScript初步（變數，函式，資料型別等相關知識）