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
  • 一:背景 1. 講故事 年前遇到了好幾例托管堆被損壞的案例,有些運氣好一些,從被破壞的托管堆記憶體現場能觀測出大概是什麼問題,但更多的情況下是無法做出準確判斷的,原因就在於生成的dump是第二現場,借用之前文章的一張圖,大家可以理解一下。 為了幫助更多受此問題困擾的朋友,這篇來整理一下如何 快狠準 的 ...
  • 前言 .NET6 開始,.NET Croe API 項目取消了 Startup.cs 文件,在 Program.cs 文件的 Main 函數中完成服務的註冊和中間件管道的管理。但當我們項目引入更多包的時候,Program.cs 文件也會看起來很臃腫。 而且,我們不只會有一個後端項目,為了方便快速創建 ...
  • 目錄 背景 get 與 post 的區別 所有介面都用 post 請求? 背景 最近在逛知乎的時候發現一個有趣的問題:公司規定所有介面都用 post 請求,這是為什麼? 看到這個問題的時候其實我也挺有感觸的,因為我也曾經這樣問過我自己。在上上一家公司的時候接到一個項目是從零開始搭建一個微服務,當時就 ...
  • *以下內容為本人的學習筆記,如需要轉載,請聲明原文鏈接 微信公眾號「englyf」https://mp.weixin.qq.com/s/2GFLTstDC7w6u3fTJxflNA 本文大概 1685 個字,閱讀需花 6 分鐘內容不多, 但也花了一些精力如要交流, 歡迎關註我然後評論區留言 謝謝你的 ...
  • 在新版本的pandas中,上述代碼會引起警告,建議改成SQLAlchemy connectable(engine/connection),後續代碼將引入這種升級的連接方式。 ...
  • 幾乎所有的高級編程語言都有自己的垃圾回收機制,開發者不需要關註記憶體的申請與釋放,Python 也不例外。Python 官方團隊的文章 https://devguide.python.org/internals/garbage-collector 詳細介紹了 Python 中的垃圾回收演算法,本文是這篇 ...
  • 如果您想查找高於或低於平均值的數字,可以不必計算該平均值,就能查看更高或更低的值。通過Java應用程式,可以自動突出顯示這些數字。除了快速突出顯示高於或低於平均值的值外,您還可以查看高於或低於的值的個數。現在讓我們看看如何在 Java應用程式中實現此操作。 引入jar包 導入方法1: 手動引入。將  ...
  • 第一種方式:使用{} firstDict = {"name": "wang yuan wai ", "age" : 25} 說明:{}為創建一個空的字典對象 第二種方式:使用fromkeys()方法 second_dict = dict.fromkeys(("name", "age")) #valu ...
  • 在golang中可以使用a := b這種方式將b賦值給a,只有當b能進行深拷貝時a與b才不會互相影響,否則就需要進行更為複雜的深拷貝。 下麵就是Go賦值操作的一個說明: Go語言中所有賦值操作都是值傳遞,如果結構中不含指針,則直接賦值就是深度拷貝;如果結構中含有指針(包括自定義指針,以及切片,map ...
  • 本文結合京東監控埋點場景,對解決樣板代碼的技術選型方案進行分析,給出最終解決方案後,結合理論和實踐進一步展開。通過關註文中的技術分析過程和技術場景,讀者可收穫一種樣板代碼思想過程和解決思路,並對Java編譯器底層有初步瞭解。 ...