JS對象怎麼深拷貝？

工作中經常會遇到對象深拷貝的問題，所以這篇文章給大家簡單介紹一下對象深拷貝的方法，也可以當做是自己的筆記，以備查看。

深拷貝的方法我所瞭解的也是我工作中常用的有兩種。

一、JSON數據轉換

let obj1 = {
    name: 'Tom',
    bodyInfo: {
        foot: 's41'
    }
};

let obj2 = JSON.parse(JSON.stringify(obj1));

console.log(obj2);
/*
{
    name: 'Tom',
    bodyInfo: {
        foot: 's41'
    }
}
*/

這樣一行代碼就完成了JS對象的深度拷貝，但是此方法有弊端，就是如果值爲undefined，function，symbol(ES6新數據類型，可自行百度，此處不做介紹)的時候，對象的屬性會自動抹去。

let sy = Symbol('obj');
let obj1 = {
    name: 'Tom',
    wife: undefined,
    bodyInfo: {
        foot: 's41'
    },
    say: function(){},
    IDcard: sy 
};

let obj2 = JSON.parse(JSON.stringify(obj1));

console.log(obj2);
/*
{
    name: 'Tom',
    bodyInfo: {
        foot: 's41'
    }
}
*/

所以在使用這個方法的時候需要考慮好是否是適合的場景，否則容易出現問題。

 

二、封裝方法

自己封裝一個深拷貝方法雖然比第一種稍微複雜一點點，但是最實用。

function deepCopy(obj) {
    let _obj = Array.isArray(obj) ? [] : {};
    for (let i in obj) {
        if (obj.hasOwnProperty(i)) {
            if (typeof obj[i] === 'object') {
                _obj[i] = deepCopy(obj[i]);
            } else {
                _obj[i] = obj[i];
            }
        }
    }
    return _obj;
}

簡單的幾行代碼，深拷貝的函數就封裝完成了。

 

還有部分小夥伴使用object.assign， 數組的concat() 等方法進行拷貝。這樣雖然能實現深拷貝，但是侷限於拷貝對象的值，如果對象內包含複雜數據類型，就會拷貝失敗。如果您拷貝的對象都是基礎數據類型的話可以使用。