概念

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

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

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

1、遞歸方式（推薦，項(xiàng)目中最安全最常用）

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

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

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

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

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

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

所以，如果不是原先項(xiàng)目中有使用 lodash 這個(gè)庫(kù)的話，大可不必為了這一個(gè)功能而去引入它。

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

這個(gè)方法僅適用于JQuery構(gòu)建的項(xiàng)目。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é)：

進(jìn)行深拷貝的方法：

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

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

第三方庫(kù)lodash的cloneDeep()方法

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

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

最新評(píng)論