概念

深拷貝：在堆內(nèi)存中重新開辟一個存儲空間，完全克隆一個一模一樣的對象；

淺拷貝：不在堆內(nèi)存中重新開辟空間，只復(fù)制棧內(nèi)存中的引用地址。

本質(zhì)上兩個對象（數(shù)組）依然指向同一塊存儲空間在這里插入代碼片

1、遞歸方式（推薦，項目中最安全最常用）

//使用遞歸的方式實現(xiàn)數(shù)組、對象的深拷貝
export function deepClone (obj) {
    let objClone = Array.isArray(obj) ? [] : {};
    if (obj && typeof obj === "object") {
        for (var key in obj) {
            if (obj.hasOwnProperty(key)) {
                //判斷ojb子元素是否為對象，如果是，遞歸復(fù)制
                if (obj[key] && typeof obj[key] === "object") {
                    objClone[key] = deepClone(obj[key]);
                } else {
                    //如果不是，簡單復(fù)制
                    objClone[key] = obj[key];
                }
            }
        }
    }
    return objClone;
};   

2、JSON.stringify() ；(這個不推薦使用，有坑)

普通的對象也可以進行深拷貝，但是?。?！當(dāng)對象內(nèi)容項為number,string.boolean的時候，是沒有什么問題的。但是，如果對象內(nèi)容項為undefined,null,Date,RegExp,function，error的時候。使用JSON.parse(JSON.stringify())進行拷貝就會出問題了。

3、使用第三方庫lodash中的cloneDeep()方法

是否推薦使用，看情況吧。如果我們的項目中只需要一個深拷貝的功能，這種情況下為了一個功能引入整個第三方庫就顯得很不值得了。不如寫一個遞歸函數(shù)對于項目來說性能更好

實際上，lodash.cloneDeep()方法底層使用的本來就是遞歸方法。只是在外層又封裝了一層cloneDeep的主體函數(shù)baseClone。

所以，如果不是原先項目中有使用 lodash 這個庫的話，大可不必為了這一個功能而去引入它。

4、jquery的extend()方法進行深拷貝（推薦在JQ中使用）

這個方法僅適用于JQuery構(gòu)建的項目。JQuery自身攜帶的extend

let obj = { a: { c: 2, d: [1, 3, 5], e: "哇哇哇" }, b: 4 };
let newObj = $.extend(true, {}, obj1);
 //拷貝完成obj.b = 20;console.log(newObj.b); //輸出 4

總結(jié)：

進行深拷貝的方法：

遞歸函數(shù) （推薦使用，項目中使用的更多，更小，更安全）

JSON.stringify() 和JSON.parse() ; (不推薦使用,如果遇到Function,Date等類型的變量容易出現(xiàn)一些意料之外的問題)

第三方庫lodash的cloneDeep()方法

JQuery的extend()函數(shù) (推薦在JQuery項目中使用，其他項目依然推薦是用遞歸函數(shù))

到此這篇關(guān)于JS實現(xiàn)深拷貝的4種方式的文章就介紹到這了,更多相關(guān)JS深拷貝內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論