在js中如何區分深拷貝與淺拷貝?

不知名前端李小白 發表於 2022-01-27

一、自我理解

簡單來講就是:深拷貝層層拷貝,淺拷貝只拷貝第一層

  • 在深拷貝中,新物件中的更改不會影響原物件,而在淺拷貝中,新物件中的更改,原物件中也會跟著改。

  • 在深拷貝中,原物件與新物件不共享相同的屬性,而在淺拷貝中,它們具有相同的屬性。

舉個例子:存在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);

結果如下:

在js中如何區分深拷貝與淺拷貝?

 這就是一個簡單的淺拷貝例子,雖然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;

在js中如何區分深拷貝與淺拷貝?

當b複製了a後,因為b也是一個變數,所以棧記憶體會再開闢一個新的記憶體空間:

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

在js中如何區分深拷貝與淺拷貝?

這就一目瞭然了,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]

在js中如何區分深拷貝與淺拷貝?

當b複製了a後,只是複製了當前棧記憶體中提供的指標,指向同一個堆記憶體中的值,並不是複製了堆記憶體中的值:

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

在js中如何區分深拷貝與淺拷貝?

所以當我們進行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);

在js中如何區分深拷貝與淺拷貝?

所以,我們需要在堆記憶體中新開闢一個記憶體專門接收儲存b的值,道理與基本資料型別一樣,這樣就可以實現深拷貝(修改一個值不會影響另一個值的變化):

在js中如何區分深拷貝與淺拷貝?

 

三、怎樣實現深拷貝?

(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);

在js中如何區分深拷貝與淺拷貝?

// 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);

在js中如何區分深拷貝與淺拷貝?

原理是利用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); //實現深拷貝

在js中如何區分深拷貝與淺拷貝?

利用遞迴可以實現深度拷貝,但是有侷限性,例如陣列還沒考慮進去!

想要相容陣列其實很簡單,直接判斷一下引數是不是陣列,然後利用三木運算決定是建立一個新物件還是一個新陣列:

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);

在js中如何區分深拷貝與淺拷貝?

$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);

在js中如何區分深拷貝與淺拷貝?

 

總結/注意

實現深拷貝方式有多種,以上三種較為常用,另外還有一個:函式庫lodash中_.cloneDeep方法(本人未使用過)也可以實現深拷貝。

最後需要補充一下,網上有很多人說sliceconcat方法可以實現,但我要說的是sliceconcat方法不能實現深拷貝的!!!

下面舉例說明:

// 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);

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

在js中如何區分深拷貝與淺拷貝?

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