JavaScript 淺拷貝和深拷貝

来源:https://www.cnblogs.com/yuzhihui/archive/2023/01/16/17055138.html
-Advertisement-
Play Games

JavaScript 中的拷貝分為兩種:淺拷貝和深拷貝。 淺拷貝是指在拷貝過程中,只拷貝一個對象中的指針,而不拷貝實際的數據。所以,淺拷貝中修改新對象中的數據時,原對象中的數據也會被改變。 深拷貝是指在拷貝過程中,拷貝一個對象中的所有數據,並創建一個新對象,對新對象進行操作並不會影響到原對象。 ...


JavaScript 中的拷貝分為兩種:淺拷貝和深拷貝。

一、淺拷貝

淺拷貝是指在拷貝過程中,只拷貝一個對象中的指針,而不拷貝實際的數據。所以,淺拷貝中修改新對象中的數據時,原對象中的數據也會被改變。

JavaScript 中淺拷貝可以通過如下幾種方式實現:

  • 使用結構賦值的方式,例如 let newObject = {...oldObject}
  • 使用 Object.assign() 方法,例如 let newObject = Object.assign({}, oldObject)

二、深拷貝

深拷貝是指在拷貝過程中,拷貝一個對象中的所有數據,並創建一個新對象,對新對象進行操作並不會影響到原對象。

1、常規場景

JavaScript 中深拷貝可以通過如下幾種方式實現:

  • 使用 JSON.parse(JSON.stringify(object)) 方法

需要註意的是:該方法會忽略 undefined 以及正則表達式類型的屬性。

const A = { a: 7788, b: undefined, c: new RegExp(/-/ig) },
    B = JSON.parse(JSON.stringify(A));

console.log('A', A);
console.log('B', B);

  • 使用遞歸的方式,手動拷貝對象的每一層
function deepCopy(obj) {
    if (typeof obj !== 'object' || obj === null) {
        return obj;
    }
    let copy;
    if (Array.isArray(obj)) {
        copy = [];
        for (let i = 0; i < obj.length; i++) {
            copy[i] = deepCopy(obj[i]);
        }
    } else {
        copy = {};
        for (let key in obj) {
            copy[key] = deepCopy(obj[key]);
        }
    }
    return copy;
}

const objA = { a: 123 },
    objB = { b: 456 };

// 淺拷貝
const objC = {...objA};
console.log('objA.a', objA.a);  // objA.a 123
console.log('objC.a', objA.a);  // objC.a 123
objC.a = 788;
console.log('objA.a', objA.a);  // objA.a 788
console.log('objC.a', objC.a);  // objC.a 788

// 深拷貝
const objD = deepCopy(objB);
console.log('objB.b', objB.b);  // objB.b 456
console.log('objD.b', objD.b);  // objD.b 456
objD.b = 899;
console.log('objB.b', objB.b);  // objB.b 456
console.log('objD.b', objD.b);  // objD.b 899

這個函數接受一個參數 obj,如果它不是對象或者是 null,那麼直接返回該參數。如果它是數組,則創建一個新數組並遞歸複製每一項。否則,創建一個新對象並遞歸複製每一個屬性。

  • 使用 lodash 類庫的_.cloneDeep函數、 underscore 中的 _.clone() 函數等第三方庫

2、特定場景一:內置對象類型的深拷貝

JavaScript 中複製內置對象類型(例如 Date,RegExp 等)的深拷貝可以使用特定的構造函數來重新創建該對象。

例如,對於 Date 對象,可以使用 new Date(originalDate.getTime()) 來創建一個新的日期對象,其中 originalDate.getTime() 返回原始日期對象的時間戳。

對於 RegExp 對象,可以使用 new RegExp(originalRegExp) 或 new RegExp(originalRegExp.source, originalRegExp.flags) 來創建一個新的正則表達式對象。

下麵是一個使用構造函數來複制內置對象類型的深拷貝示例:


function deepCopy(obj) {
    let copiedObjects = new WeakMap();
    if (typeof obj !== 'object' || obj === null) {
        return obj;
    }
    if (copiedObjects.has(obj)) {
        return copiedObjects.get(obj);
    }
    let copy;
    if (obj instanceof Date) {
        copy = new Date(obj.getTime());
    } else if (obj instanceof RegExp) {
        copy = new RegExp(obj);
    } else if (Array.isArray(obj)) {
        copy = [];
    } else {
        copy = {};
    }
    copiedObjects.set(obj, copy);
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            if (typeof obj[key] === 'object' && obj[key] !== null) {
                copy[key] = deepCopy(obj[key], copiedObjects);
            } else {
                copy[key] = obj[key];
            }
        }
    }
    return copy;
}

這個示例的深拷貝函數首先檢查當前對象是否為內置對象類型,如果是,則使用相應的構造函數重新創建該對象,否則創建一個普通對象或數組。然後進行遞歸複製每一個屬性。

需要註意的是,使用構造函數複製內置對象類型只適用於部分內置對象類型,對於其他的內置對象類型,可能需要使用其他的方法來進行複製,或者使用第三方庫來進行複製。

總之,深拷貝複製內置對象類型需要考慮使用構造函數來重新創建對象,如果需要對這些對象進行深拷貝操作,可以使用上述方法或其他庫來實現。

3、特定場景二:自定義對象類型的深拷貝

JavaScript 中自定義對象的深拷貝可以使用同樣的遞歸方式實現,可以使用 WeakMap 方法。

function deepCopy(obj) {
    let copiedObjects = new WeakMap();
    if (typeof obj !== 'object' || obj === null) {
        return obj;
    }
    if (copiedObjects.has(obj)) {
        return copiedObjects.get(obj);
    }
    let copy;
    if (obj instanceof MyCustomObject) {
        copy = new MyCustomObject();
    } else if (Array.isArray(obj)) {
        copy = [];
    } else {
        copy = {};
    }
    copiedObjects.set(obj, copy);
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            if (typeof obj[key] === 'object' && obj[key] !== null) {
                copy[key] = deepCopy(obj[key], copiedObjects);
            } else {
                copy[key] = obj[key];
            }
        }
    }
    return copy;
}

這個函數首先檢查當前對象是否為自定義對象,如果是,則創建一個新的自定義對象,否則創建一個普通對象或數組。然後進行遞歸複製每一個屬性。

註意,如果自定義對象中包含迴圈引用,需要使用 WeakMap 來避免出現死迴圈。

4、特定場景三:對象中存在函數或迴圈引用

對於函數,通常會忽略它們,因為函數不能被覆制,而是需要重新定義。

對於迴圈引用,可以使用 WeakMap 來存儲已經複製過的對象。每次遇到迴圈引用時,可以檢查 WeakMap 中是否已經有該對象的副本,如果有,則直接使用副本,而不是重新創建。

function deepCopy(obj) {
    let copiedObjects = new WeakMap();
    if (typeof obj !== 'object' || obj === null) {
        return obj;
    }
    if (copiedObjects.has(obj)) {
        return copiedObjects.get(obj);
    }
    let copy;
    if (Array.isArray(obj)) {
        copy = [];
    } else {
        copy = {};
    }
    copiedObjects.set(obj, copy);
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            if (typeof obj[key] === 'object' && obj[key] !== null) {
                copy[key] = deepCopy(obj[key], copiedObjects);
            } else {
                copy[key] = obj[key];
            }
        }
    }
    return copy;
}

這是使用 WeakMap 的一種示例,這個示例的深拷貝函數遞歸地複製對象,但檢查 WeakMap 中是否已經存在該對象的副本,如果存在則直接使用副本,而不是重新創建。

此外,使用 JSON.parse(JSON.stringify(obj)) 方法會自動忽略函數和迴圈引用,但是會忽略 undefined 以及正則表達式類型的屬性。

還有,還可以使用第三方庫,如 lodash 中的 _.cloneDeep() 函數、 underscore 中的 _.clone() 函數等來實現對象中存在函數或迴圈引用的深拷貝。

5、特定場景四:對象中有對其他對象的引用或者包含 Symbol 屬性的對象

對於對象中有對其他對象的引用,可以使用 WeakMap 來存儲已經複製過的對象。每次遇到對其他對象的引用時,可以檢查 WeakMap 中是否已經有該對象的副本,如果有,則直接使用副本,而不是重新創建。

對於對象中包含 Symbol 屬性的對象,可以使用 Object.getOwnPropertySymbols() 方法來獲取該對象所有的 Symbol 屬性,然後使用 Object.getOwnPropertyDescriptor() 方法來獲取這些 Symbol 屬性的值,最後將這些值賦給新對象。


function deepCopy(obj) {
    let copiedObjects = new WeakMap();
    if (typeof obj !== 'object' || obj === null) {
        return obj;
    }
    if (copiedObjects.has(obj)) {
        return copiedObjects.get(obj);
    }
    let copy;
    if (Array.isArray(obj)) {
        copy = [];
    } else {
        copy = {};
    }
    copiedObjects.set(obj, copy);
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            if (typeof obj[key] === 'object' && obj[key] !== null) {
                copy[key] = deepCopy(obj[key], copiedObjects);
            } else {
                copy[key] = obj[key];
            }
        }
    }
    let symbols = Object.getOwnPropertySymbols(obj);
    symbols.forEach(symbol => {
        let descriptor = Object.getOwnPropertyDescriptor(obj, symbol);
        Object.defineProperty(copy, symbol, descriptor);
    });
    return copy;
}

這是使用 WeakMap 和 Symbol 屬性的一種示例,這個示例的深拷貝函數首先檢查 WeakMap 中是否已經存在該對象的副本,如果存在則直接使用副本,而不是重新創建。然後使用 Object.getOwnPropertySymbols() 方法獲取該對象所有的 Symbol 屬性,最後使用 Object.getOwnPropertyDescriptor() 方法獲取這些 Symbol 屬性的值,並將這些值賦給新對象。

這種方法可以保證深拷貝對象中包含的所有屬性,包括對其他對象的引用和 Symbol 屬性,但還是不能複製內置對象類型,這些對象類型是不可枚舉的。

三、迴圈引用

JavaScript 中的迴圈引用指的是兩個或多個對象之間相互引用的情況。這種情況通常發生在將一個對象賦給另一個對象的屬性時,同時還將另一個對象賦給第一個對象的屬性。

以下是一個示例:

let obj1 = {};
let obj2 = {};

obj1.prop = obj2;
obj2.prop = obj1;

這樣就會產生一個迴圈引用,因為 obj1 和 obj2 相互引用。

迴圈引用可能導致 JavaScript 引擎無法正確處理記憶體,並導致記憶體泄漏。因此,在編寫 JavaScript 代碼時需要特別註意避免迴圈引用。如果您需要在兩個對象之間建立關係,可以使用弱引用來避免迴圈引用。

在深拷貝中遇到迴圈引用就會導致死迴圈,因此需要使用特殊的演算法來解決這個問題。可以使用遞歸演算法和深度優先遍歷來實現深拷貝,在遍歷過程中跟蹤已經遍歷過的對象,如果遇到迴圈引用就直接返回已經遍歷過的對象的引用。

 

總的來說,在使用淺拷貝和深拷貝時,需要根據需求和對象的結構來進行選擇。通常來說,如果需要對對象進行修改並且不希望對原對象造成影響,那麼應該使用深拷貝。如果只是需要讀取對象中的數據而不需要修改,那麼可以使用淺拷貝。在實現深拷貝時,需要特別註意迴圈引用和特殊屬性問題。

作者:yuzhihui
出處:http://www.cnblogs.com/yuzhihui/ 聲明:歡迎任何形式的轉載,但請務必註明出處!!!
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Elasticsearch(簡稱:ES)功能強大,其背後有很多預設值,或者預設操作。這些操作優劣並存,優勢在於我們可以迅速上手使用 ES,劣勢在於,其實這些預設值的背後涉及到很多底層原理,怎麼做更合適,只有數據使用者知道。用 ES 的話來說,你比 ES 更懂你的數據,但一些配置信息、限制信息,還是需... ...
  • SummingMergeTree引擎繼承自MergeTree。區別在於,當合併SummingMergeTree表的數據片段時,ClickHouse會把所有具有相同主鍵的行合併為一行,該行包含了被合併的行中具有數值數據類型的列的彙總值。如果主鍵的組合方式使得單個鍵值對應於大量的行,則可以顯著的減少存儲 ...
  • 用正則表達式進行搜索 正則表達式介紹 正則表達式是用來匹配文本的特殊的串(字元集合)。 使用MySQL正則表達式 MySQL用WHERE子句對正則表達式提供了初步的支持,允許你指定正則表達式,過濾SELECT檢索出的數據。MySQL僅支持多數正則表達式實現的一個很小的子集。 基本字元匹配 SELEC ...
  • 1. MySQL8安裝 安裝環境 操作系統:CentOS7 MySQL版本:8.0.28 安裝方式:二進位Generic 軟體路徑:/app/database 數據路徑:/data/3306 日誌路徑:/binlog/3306 MySQL Community Server 社區版官網下載鏈接 MyS ...
  • 摘要:華為日曆月活高達數千萬,這使其對支撐業務的資料庫提出了巨大挑戰:高併發場景下,資料庫如何實現快速擴容?海量數據運行,如何確保業務穩定性? 本文分享自華為雲社區《穩定支撐千萬級月活,華為日曆背後的英雄》,作者: GaussDB 資料庫。 隨著科技進步,手機日曆早已融入我們的生活,不僅可以記錄時間 ...
  • 列表中自動播放視頻,常規方案是在每個 xml 中寫入視頻佈局,然後在滑動時獲取當前的下標,播放此下標的視頻 弊端:播放容易出錯,需要精準控制好停止播放操作,並且適配器中容易觸發多次刷新,導致執行多次同樣的操作,不易控制離開停止等操作,增加了佈局的負擔,影響滑動流暢度,無法復用... 使用過的都比較清 ...
  • 前言 最近在做博客園的界面美化,用的是博客園[guangzan]的開源項目,配置超級簡單,只需要複製粘貼代碼就好啦。 但在粘貼 CSS 代碼時遇到一個問題,那就是所有代碼都擠在了一行,沒有一點排板的樣子(如下圖),對我來說是不能忍受的,便決定解決這一問題。 經過一番網上衝浪後,我找到瞭解決方法,並且 ...
  • JavaScript 中有多種方法來判斷變數的類型,如 typeof、instanceof、Object.prototype.toString.call()、constructor屬性、Symbol.toStringTag屬性以及 lodash 等第三方庫 ...
一周排行
    -Advertisement-
    Play Games
  • 下麵是一個標準的IDistributedCache用例: public class SomeService(IDistributedCache cache) { public async Task<SomeInformation> GetSomeInformationAsync (string na ...
  • 這個庫提供了在啟動期間實例化已註冊的單例,而不是在首次使用它時實例化。 單例通常在首次使用時創建,這可能會導致響應傳入請求的延遲高於平時。在註冊時創建實例有助於防止第一次Request請求的SLA 以往我們要在註冊的時候實例單例可能會這樣寫: //註冊: services.AddSingleton< ...
  • 最近公司的很多項目都要改單點登錄了,不過大部分都還沒敲定,目前立刻要做的就只有一個比較老的項目 先改一個試試手,主要目標就是最短最快實現功能 首先因為要保留原登錄方式,所以頁面上的改動就是在原來登錄頁面下加一個SSO登錄入口 用超鏈接寫的入口,頁面改造後如下圖: 其中超鏈接的 href="Staff ...
  • Like運算符很好用,特別是它所提供的其中*、?這兩種通配符,在Windows文件系統和各類項目中運用非常廣泛。 但Like運算符僅在VB中支持,在C#中,如何實現呢? 以下是關於LikeString的四種實現方式,其中第四種為Regex正則表達式實現,且在.NET Standard 2.0及以上平... ...
  • 一:背景 1. 講故事 前些天有位朋友找到我,說他們的程式記憶體會偶發性暴漲,自己分析了下是非托管記憶體問題,讓我幫忙看下怎麼回事?哈哈,看到這個dump我還是非常有興趣的,居然還有這種游戲幣自助機類型的程式,下次去大玩家看看他們出幣的機器後端是不是C#寫的?由於dump是linux上的程式,剛好win ...
  • 前言 大家好,我是老馬。很高興遇到你。 我們為 java 開發者實現了 java 版本的 nginx https://github.com/houbb/nginx4j 如果你想知道 servlet 如何處理的,可以參考我的另一個項目: 手寫從零實現簡易版 tomcat minicat 手寫 ngin ...
  • 上一次的介紹,主要圍繞如何統一去捕獲異常,以及為每一種異常添加自己的Mapper實現,並且我們知道,當在ExceptionMapper中返回非200的Response,不支持application/json的響應類型,而是寫死的text/plain類型。 Filter為二方包異常手動捕獲 參考:ht ...
  • 大家好,我是R哥。 今天分享一個爽飛了的面試輔導 case: 這個杭州兄弟空窗期 1 個月+,面試了 6 家公司 0 Offer,不知道問題出在哪,難道是杭州的 IT 崩盤了麽? 報名面試輔導後,經過一個多月的輔導打磨,現在成功入職某上市公司,漲薪 30%+,955 工作制,不咋加班,還不捲。 其他 ...
  • 引入依賴 <!--Freemarker wls--> <dependency> <groupId>org.freemarker</groupId> <artifactId>freemarker</artifactId> <version>2.3.30</version> </dependency> ...
  • 你應如何運行程式 互動式命令模式 開始一個互動式會話 一般是在操作系統命令行下輸入python,且不帶任何參數 系統路徑 如果沒有設置系統的PATH環境變數來包括Python的安裝路徑,可能需要機器上Python可執行文件的完整路徑來代替python 運行的位置:代碼位置 不要輸入的內容:提示符和註 ...