2. 程式人生 > >物件深拷貝和淺拷貝

物件深拷貝和淺拷貝

阿新 • • 發佈：2018-12-29

寫在前面

各類技術論壇關於深拷貝的部落格有很多,有些寫的也比我好,那為什麼我還要堅持寫這篇部落格呢,之前看到的一篇部落格中有句話寫的非常好

學習就好比是座大山，人們沿著不同的路登山，分享著自己看到的風景。你不一定能看到別人看到的風景，體會到別人的心情。只有自己去登山，才能看到不一樣的風景，體會才更加深刻。

寫部落格的初衷也是作為自己學到的知識點的總結,同時也希望能給點開這篇文章的人一些幫助,在前端開發的路上能夠少一點坎坷多一點希望

如有錯誤歡迎指出會在第一時間改正

基本型別的值和引用型別的值

JavaScript的變數中包含兩種型別的值

  1. 基本型別值 基本型別值指的是儲存在棧中的一些簡單的資料段
var str = 'a';
var num = 1;
複製程式碼

在JavaScript中基本資料型別有String,Number,Undefined,Null,Boolean，在ES6中，又定義了一種新的基本資料型別Symbol,所以一共有6種

基本型別是按值訪問的，從一個變數複製基本型別的值到另一個變數後這2個變數的值是完全獨立的，即使一個變數改變了也不會影響到第二個變數

var str1 = 'a';
var str2 = str1;
str2 = 'b';
console.log(str2); //'b'
console.log(str1); //'a'
複製程式碼
  1. 引用型別值
    引用型別值是引用型別的例項，它是儲存在堆記憶體中的一個物件，引用型別是一種資料結構，最常用的是Object,Array,Function型別，另外還有Date,RegExp,Error等，ES6同樣也提供了Set,Map2種新的資料結構

JavaScript是如何複製引用型別的

JavaScript對於基本型別和引用型別的賦值是不一樣的

var obj1 = {a:1};
var ob2 = obj1;
obj2.a = 2;
console.log(obj1); //{a:2}
console.log(obj2); //{a:2}
複製程式碼

在這裡只修改了obj1中的a屬性，卻同時改變了ob1和obj2中的a屬性

當變數複製引用型別值的時候，同樣和基本型別值一樣會將變數的值複製到新變數上，不同的是對於變數的值，它是一個指標，指向儲存在堆記憶體中的物件（JS規定放在堆記憶體中的物件無法直接訪問，必須要訪問這個物件在堆記憶體中的地址，然後再按照這個地址去獲得這個物件中的值，所以引用型別的值是按引用訪問）

變數的值也就是這個指標是儲存在棧上的，當變數obj1複製變數的值給變數obj2時，obj1,obj2只是一個儲存在棧中的指標,指向同一個儲存在堆記憶體中的物件，所以當通過變數obj1操作堆記憶體的物件時，obj2也會一起改變

儲存在於棧中的變數和堆記憶體中物件的關係

再舉個例子，小明(obj1變數)知道他家的地址(物件{a:1})，然後小明告訴了小剛(obj2變數)他家的地址(複製變數)，小剛這個時候就知道了小明家的地址，然後小剛去小明家把小明家的門給拆了(修改物件)，小明回家一看就會發現門沒了,這時小明和小剛去這個地址的時候都會看到一個沒有門的家-.-(物件的修改反映到變數)

淺拷貝

對於淺拷貝的定義可以理解為

建立一個新物件，這個物件有著原始物件屬性值的一份精確拷貝。如果屬性是基本型別，拷貝的就是基本型別的值，如果屬性是引用型別，拷貝的就是記憶體地址 ，所以如果其中一個物件改變了這個地址，就會影響到另一個物件。

以下是一些JavaScript提供的淺拷貝方法

Object.assign()

ES6中拷貝物件的方法，接受的第一個引數是拷貝的目標，剩下的引數是拷貝的源物件（可以是多個）

語法：Object.assign(target, ...sources)

var target = {};
var source = {a:1};
Object.assign(target ,source);
console.log(target); //{a:1}
source.a = 2;
console.log(source); //{a:2}
console.log(target); //{a:1}
複製程式碼

Object.assign是一個淺拷貝,它只是在根屬性(物件的第一層級)建立了一個新的物件，但是對於屬性的值是仍是物件的話依然是淺拷貝，

Object.assign還有一些注意的點是:

  1. 不會拷貝物件繼承的屬性
  2. 不可列舉的屬性
  3. 屬性的資料屬性/訪問器屬性
  4. 可以拷貝Symbol型別

可以理解為Object.assign就是使用簡單的=來賦值,遍歷從右往左遍歷源物件(sources)的所有屬性用 = 賦值到目標物件(target)上

var obj1 = {
    a:{
        b:1
    },
    sym:Symbol(1)
};
Object.defineProperty(obj1,'innumerable',{
    value:'不可列舉屬性',
    enumerable:false
});
var obj2 = {};
Object.assign(obj2,obj1)
obj1.a.b = 2;
console.log('obj1',obj1); 
console.log('obj2',obj2); 
複製程式碼

可以看到Symbol型別可以正確拷貝，但是不可列舉的屬性被忽略了並且改變了obj1.a.b的值，obj2.a.b的值也會跟著改變，說明依舊存在訪問的是堆記憶體中同一個物件的問題

擴充套件運算子

利用擴充套件運算子可以在構造字面量物件時,進行克隆或者屬性拷貝

語法：var cloneObj = { ...obj };

var obj = {a:1,b:{c:1}}
var obj2 = {...obj};
obj.a=2;
console.log(obj); //{a:2,b:{c:1}}
console.log(obj2); //{a:2,b:{c:1}}

obj.b.c = 2;
console.log(obj); //{a:2,b:{c:2}}
console.log(obj2); //{a:2,b:{c:2}}
複製程式碼

擴充套件運算子Object.assign()有同樣的缺陷，對於值是物件的屬性無法完全拷貝成2個不同物件,但是如果屬性都是基本型別的值的話,使用擴充套件運算子更加方便

Array.prototype.slice()

slice() 方法返回一個新的陣列物件，這一物件是一個由 begin和 end（不包括end）決定的原陣列的淺拷貝。原始陣列不會被改變。

語法: arr.slice(begin, end);

在ES6以前,沒有剩餘運算子,Array.from的時候可以用 Array.prototype.slice將arguments類陣列轉為真正的陣列,它返回一個淺拷貝後的的新陣列

Array.prototype.slice.call({0: "aaa", length: 1}) //["aaa"]

let arr = [1,2,3,4]
console.log(arr.slice() === arr); //false
複製程式碼

深拷貝

淺拷貝只在根屬性上在堆記憶體中建立了一個新的的物件，複製了基本型別的值,但是複雜資料型別也就是物件則是拷貝相同的地址，而深拷貝則是對於複雜資料型別在堆記憶體中開闢了一塊記憶體地址用於存放複製的物件並且把原有的物件複製過來，這2個物件是相互獨立的,也就是2個不同的地址

將一個物件從記憶體中完整的拷貝一份出來,從堆記憶體中開闢一個新的區域存放新物件,且修改新物件不會影響原物件

一個簡單的深拷貝

var obj1 = {
    a: {
        b: 1
    },
    c: 1
};
var obj2 = {};

obj2.a = {}
obj2.a.b = obj1.a.b;
console.log(obj1); //{a:{b:1},c:1};
console.log(obj2); //{a:{b:1},c:1};
obj1.a.b = 2;
console.log(obj1); //{a:{b:2},c:1};
console.log(obj2); //{a:{b:1},c:1};)
複製程式碼

在上面的程式碼中，我們新建了一個obj2物件,同時根據obj1物件的a屬性是一個引用型別,我們給obj2.a的值也新建一個新物件(即在記憶體中新開闢了一塊記憶體地址),然後把obj1.a.b屬性的值數字1複製給obj2.a.b，因為數字1是基本型別的值，所以改變obj1.a.b的值後，obj2.a不會收到影響，因為他們的引用是完全2個獨立的物件,這就完成了一個簡單的深拷貝

###JSON.stringify() JSON.stringify()是目前前端開發過程中最常用的深拷貝方式，原理是把一個物件序列化成為一個JSON字串，將物件的內容轉換成字串的形式再儲存在磁碟上，再用JSON.parse()反序列化將JSON字串變成一個新的物件

var obj1 = {
    a:1,
    b:[1,2,3]
}
var str = JSON.stringify(obj1)
var obj2 = JSON.parse(str)
console.log(obj2); //{a:1,b:[1,2,3]}
obj1.a=2
obj1.b.push(4);
console.log(obj1); //{a:1,b:[1,2,3,4]}
console.log(obj2); //{a:1,b:[1,2,3]}
複製程式碼

通過JSON.stringify實現深拷貝有幾點要注意

  1. 拷貝的物件的值中如果有函式,undefined,symbol則經過JSON.stringify()序列化後的JSON字串中這個鍵值對會消失
  2. 無法拷貝不可列舉的屬性，無法拷貝物件的原型鏈
  3. 拷貝Date引用型別會變成字串
  4. 拷貝RegExp引用型別會變成空物件
  5. 物件中含有NaN、Infinity和-Infinity，則序列化的結果會變成null
  6. 無法拷貝物件的迴圈應用(即obj[key] = obj)
function Obj() {
    this.func = function () {
        alert(1) 
    };
    this.obj = {a:1};
    this.arr = [1,2,3];
    this.und = undefined;
    this.reg = /123/;
    this.date = new Date(0);
    this.NaN = NaN
    this.infinity = Infinity
    this.sym = Symbol(1)
}
var obj1 = new Obj();
Object.defineProperty(obj1,'innumerable',{
    enumerable:false,
    value:'innumerable'
})
console.log('obj1',obj1);
var str = JSON.stringify(obj1);
var obj2 = JSON.parse(str);
console.log('obj2',obj2);
複製程式碼

打印出來的結果如下

可以看到除了Object物件和陣列其他基本都和原來的不一樣，obj1的constructor是Obj(),而obj2的constructor指向了Object()，而對於迴圈引用則是直接報錯了

雖說通過JSON.stringify()方法深拷貝物件也有很多無法實現的功能，但是對於日常的開發需求(物件和陣列)，使用這種方法是最簡單和快捷的

使用第三方庫實現物件的深拷貝

1.lodash 2.jQuery

以上2個第三方的庫都很好的封裝的深拷貝的方法，有興趣的同學可以去深入研究一下

遞迴

這裡簡單封裝了一個deepClone的函式，for in遍歷傳入引數的值，如果值是引用型別則再次呼叫deepClone函式，並且傳入第一次呼叫deepClone引數的值作為第二次呼叫deepClone的引數，如果不是引用型別就直接複製

var obj1 = {
    a:{
        b:1
    }
};
function deepClone(obj) {
    var cloneObj = {}; //在堆記憶體中新建一個物件
    for(var key in obj){ //遍歷引數的鍵
       if(typeof obj[key] ==='object'){ 
          cloneObj[key] = deepClone(obj[key]) //值是物件就再次呼叫函式
       }else{
           cloneObj[key] = obj[key] //基本型別直接複製值
       }
    }
    return cloneObj 
}
var obj2 = deepClone(obj1);
obj1.a.b = 2;
console.log(obj2); //{a:{b:1}}
複製程式碼

但是還有很多問題

  • 首先這個deepClone函式並不能複製不可列舉的屬性以及Symbol型別
  • 這裡只是針對Object引用型別的值做的迴圈迭代，而對於Array,Date,RegExp,Error,Function引用型別無法正確拷貝
  • 物件迴圈引用成環了的情況

本人總結的深拷貝的方法

看過很多關於深拷貝的部落格，本人總結出了一個能夠深拷貝大部分物件的方法

const isComplexDataType = obj => (typeof obj === 'object' || typeof obj === 'function') && (obj !== null)

const deepClone = function (obj, hash = new WeakMap()) {

    if (obj.constructor === Date) return new Date(obj);   //日期物件就返回一個新的日期物件
    if (obj.constructor === RegExp) return new RegExp(obj);  //正則物件就返回一個新的正則物件

    //如果成環了,引數obj = obj.loop = 最初的obj 會在WeakMap中找到第一次放入的obj提前返回第一次放入WeakMap的cloneObj
    if (hash.has(obj)) return hash.get(obj)

    let allDesc = Object.getOwnPropertyDescriptors(obj);     //遍歷傳入引數所有鍵的特性
    let cloneObj = Object.create(Object.getPrototypeOf(obj), allDesc); //繼承原型鏈

    hash.set(obj, cloneObj)

    for (let key of Reflect.ownKeys(obj)) {   //Reflect.ownKeys(obj)可以拷貝不可列舉屬性和符號型別
        // 如果值是引用型別(非函式)則遞迴呼叫deepClone
        cloneObj[key] =
            (isComplexDataType(obj[key]) && typeof obj[key] !== 'function') ?
                deepClone(obj[key], hash) : obj[key];
    }
    return cloneObj;
};


let obj = {
    num: 0,
    str: '',
    boolean: true,
    unf: undefined,
    nul: null,
    obj: {
        name: '我是一個物件',
        id: 1
    },
    arr: [0, 1, 2],
    func: function () {
        console.log('我是一個函式')
    },
    date: new Date(0),
    reg: new RegExp('/我是一個正則/ig'),
    [Symbol('1')]: 1,
};

Object.defineProperty(obj, 'innumerable', {
    enumerable: false,
    value: '不可列舉屬性'
});

obj = Object.create(obj, Object.getOwnPropertyDescriptors(obj))

obj.loop = obj

let cloneObj = deepClone(obj);

console.log('obj', obj);
console.log('cloneObj', cloneObj);


for (let key of Object.keys(cloneObj)) {
    if (typeof cloneObj[key] === 'object' || typeof cloneObj[key] === 'function') {
        console.log(`${key}相同嗎？ `, cloneObj[key] === obj[key])
    }
}
複製程式碼

這個函式有幾個要點

  1. 利用Reflect.ownKeys()方法,能夠遍歷物件的不可列舉屬性和Symbol型別
  2. null直接返回
  3. 當引數為Date,RegExp型別則直接生成一個新的例項
  4. 使用Object.getOwnPropertyDescriptors()獲得物件的所有屬性對應的特性,結合Object.create()建立一個新物件繼承傳入原物件的原型鏈
  5. 利用WeekMap()型別作為雜湊表,WeekMap()因為是弱引用的可以有效的防止記憶體洩露,作為檢測迴圈引用很有幫助,如果存在迴圈引用直接返回WeekMap()儲存的值

這裡我用全等判斷列印了2個物件的屬性是否相等,通過列印的結果可以看到,雖然值是一樣的,但是在記憶體中是兩個完全獨立的物件

上述的深拷貝函式中Null和Function型別引用的還是同一個物件,因為deepClone函式對於物件的值是函式或者null時直接返回,這裡沒有深拷貝函式,如果需要深拷貝一個函式,可以考慮使用Function建構函式或者eval?這裡還有待研究

總結

  1. 封裝的deepClone方法雖然能實現大部分的物件拷貝但是在日常開發中一般並不需要拷貝很多特殊的引用型別，平時開發過程中深拷貝物件使用JSON.stringify依然是最方便的方法之一（當然也需要了解JSON.stringify的缺點）

  2. 實現一個完整的深拷貝是非常複雜的,需要考慮到很多邊界情況,這裡我也只是對部分的原生的建構函式進行了深拷貝,如果日常需要的話,建議還是藉助第三方完整的庫

  3. 對於深入研究深拷貝的原理有助於理解JavaScript引用型別的特點，以及遇到相關特殊的問題也能迎刃而解，對於提高JavaScript的基礎還是很有幫助的~~~

感謝觀看

參考資料

深入JS深拷貝物件

JavaScript高階程式設計第三版

相關推薦

結合多個例項深入理解js的深拷貝和淺拷貝，多種方法實現物件的深拷貝

親們為什麼要研究深拷貝和淺拷貝呢，因為我們專案開發中有許多情況需要拷貝一個數組抑或是物件，但是單純的靠=“賦值”並不會解決所有問題，如果遇到引用型別的物件改變新賦值的物件會造成原始物件也發生同樣改變，而要去除影響就必須用到深拷貝，深拷貝，對於引用物件需要進行深拷貝才會去除影響。如果是值型別直接“=”

Js中物件的深拷貝和淺拷貝

淺拷貝：只拷貝物件的基礎屬性值，對屬性值為物件或陣列的屬性則拷貝指標。  深拷貝：拷貝物件的所有屬性作為一個全新的物件。拷貝前後的物件互不影響。 淺拷貝僅僅是指向被複制的記憶體地址，如果原地址中物件被改變了，那麼深拷貝出來的物件也會相應改變。 一、物件引用 物件引用容易

物件深拷貝和淺拷貝

寫在前面 各類技術論壇關於深拷貝的部落格有很多,有些寫的也比我好,那為什麼我還要堅持寫這篇部落格呢,之前看到的一篇部落格中有句話寫的非常好 學習就好比是座大山，人們沿著不同的路登山，分享著自己看到的風景。你不一定能看到別人看到的風景，體會到別人的心情。只有自己去登山，才能看到不一樣的風景，體會才更加

物件的深拷貝和淺拷貝淺析:物件中有List

目的 本文主要由例項的結果去分析深淺拷貝的不同，然後去理解深淺拷貝。對比深淺拷貝的結果，通過檢視屬性listString 和listUser 的值確定拷貝是否成功。 淺拷貝類 public class UserShallowClone implements Cloneable

初探python物件複製問題的深拷貝和淺拷貝

前階段學習python時遇到物件拷貝的問題，感覺有個不小的坑，於是乎搜了一下網上相關部落格的介紹，然而總覺得敘述太長，不夠簡潔。本文通過總結前人經驗，並根據自己的理解，簡單談一談python中的拷貝小坑。 python中實現物件複製的方法大致有3種：簡單粗暴直

JAVA 物件的clone() 以及深拷貝和淺拷貝

java賦值是複製物件引用，如果我們想要得到一個物件的副本，使用賦 值操作是無法達到目的的： @Test public void testassign(){ Person p1=new Person(); p1.setAge(31); p1.setName

javascript學習總結之物件的深拷貝和淺拷貝

前言 最近在寫ES6的文章的時候發現重複遇到關於javascript深拷貝和淺拷貝的問題，然後查找了一些資料，根據資料和自己的理解做了以下筆記，畢竟javascript關於深拷貝和淺拷貝的問題在一些面試的時候有些面試官可能會進行提問，一起來看看吧！ 資料型別 在瞭解淺拷貝和深拷貝之前，我們先回顧一下ja

js中的深拷貝和淺拷貝

所有 object 簡單的 col images new color 其他 java 深復制和淺復制只針對像 Object, Array 這樣的復雜對象的。簡單來說，淺復制只復制一層對象的屬性，而深復制則遞歸復制了所有層級。 深淺拷貝 的主要區別就是：復制的是引用(地址)還

python學習系列--深拷貝和淺拷貝

深拷貝 淺拷貝 copy deepcopy概念普通情下，復制一個對象是不會新開辟內存空間的，只是把新的對象名稱指向原有的內存地址，這種操作其實不是算是拷貝，只是新的引用。把新的對象置於新的內存空間中，才是拷貝。在python中，深淺拷貝的區別實際上是拷貝的深度不同。操作常見的‘=’號就是一種拷貝方式。pyth

js 中引用類型 的深拷貝 和 淺拷貝的區別

而是 query reac cat 避免 string val this 臨時 一、曾經在讀JQ源碼的時候，對深拷貝算是有了一點的理解。我們在項目中是不是經常會遇到這樣的問題呢？ 後臺返回一個數組對象（引用類型）.次數在頁面渲染中需要對部分數據進行處理 比如：銀行卡6234

淺談Java中的深拷貝和淺拷貝

detail tle pac err @override 復制對象 deep har 間接 　　淺談Java中的深拷貝和淺拷貝（轉載） 原文鏈接： http://blog.csdn.net/tounaobun/article/details/8491392 假如說你想復制一

js的命名空間 && 單體模式 && 變量深拷貝和淺拷貝 && 頁面彈窗設計

但是 界面 ket 模式 utf 針對 col con prop 說在前面：這是我近期開發或者看書遇到的一些點，覺得還是蠻重要的。 一、為你的 JavaScript 對象提供命名空間 <!DOCTYPE html> <html> <head&

深拷貝和淺拷貝

深拷貝 淺拷貝 #include <stdio.h> int main(int argc, char *argv[]) { char *p1="123"; char *p2="123"; char *p3="456"; const char *p4="ab

python的復制，深拷貝和淺拷貝的區別(轉)

pla bsp space 數據 深拷貝 淺拷貝 deepcopy 拷貝 tro 在python中，對象賦值實際上是對象的引用。當創建一個對象，然後把它賦給另一個變量的時候，python並沒有拷貝這個對象，而只是拷貝了這個對象的引用 一般有三種方法， alist=[1,2,

python的深拷貝和淺拷貝

內存區域 需要 不可變 python3 復制 deepcopy 原始的 pen -m # 對象賦值 a = 'hello world' b = a print('a:',a,', b:',b) # a: hello world

Python-8 深拷貝和淺拷貝

water mark alt img 分享 深拷貝 所有 nag copy 淺拷貝 淺拷貝是對於一個對象的頂層拷貝通俗的理解是：拷貝了引用，並沒有拷貝內容 深拷貝 深拷貝是對於一個對象所有層次的拷貝(遞歸) 進一步理解拷貝 拷貝的其他方式 使用copy模

【轉載】圖解 Python 深拷貝和淺拷貝

div 原子 總結 但是 home 後來 idt scrip 需要 作者：田小計劃 出處：http://www.cnblogs.com/wilber2013/ Python中，對象的賦值，拷貝（深/淺拷貝）之間是有差異的，如果使用的時候不註意，就可能產生意外的結果。

對象的深拷貝和淺拷貝

height post ++ oid 一份 char log pac clu 在copy一個對象時（用一個對象去初始化另外一個對象），會調用類中的拷貝構造函數。如果我們自己沒有在類裏面寫拷貝構造函數，則C++編譯器會調用默認的拷貝構造函數。 淺拷貝：如果類定義的對象包含

深拷貝和淺拷貝的區別

log birt 並且 ace UNC 分享 一個 eof 發生 深拷貝和淺拷貝的區別 深拷貝和淺拷貝最根本的區別在於是否真正獲取一個對象的復制實體，和不是引用。 簡單來說 淺拷貝（shallowCopy）只是增加了一個指針指向已存在的內存地址， 深拷貝（deepCop

python的復制，深拷貝和淺拷貝的區別

一個 對象賦值 source 深拷貝 對象的引用 數據 拷貝 也會 方法 寫在前面： python中的.copy()拷貝和[:]拷貝皆為淺拷貝 在python中，對象賦值實際上是對象的引用。當創建一個對象，然後把它賦給另一個變量的時候，python並沒有拷貝這個對象，而只是