JS實現深拷貝的4種方式介紹

目錄 概念 1、遞歸方式（推薦，項目中最安全最常用） 2、JSON.stringify() ；(這個不推薦使用，有坑) 3、使用第三方庫lodash中的cloneDeep()方法 4、jquery的extend()方法進行深拷貝（推薦在JQ中使

目錄

• 概念
• 1、遞歸方式（推薦，項目中最安全最常用）
• 2、JSON.stringify() ；(這個不推薦使用，有坑)
• 3、使用第三方庫lodash中的cloneDeep()方法
• 4、jquery的extend()方法進行深拷貝（推薦在JQ中使用）
• 總結：

概念

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

淺拷貝：不在堆內存中重新開辟空間，只復制棧內存中的引用地址。

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

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

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

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

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

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

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

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

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

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

這個方法僅適用于JQuery構建的項目。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

總結：

進行深拷貝的方法：

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

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

第三方庫lodash的cloneDeep()方法

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

到此這篇關于JS實現深拷貝的4種方式的文章就介紹到這了,更多相關JS深拷貝內容請搜索技圈網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持技圈網！