Javascript對象的深淺拷貝

qieangel2013 發(fā)布于2019-08-22 16:12 / 3410人閱讀

摘要：開門見山，有人叫對象的復制為深復制淺復制，也有人叫深拷貝淺拷貝。高級屬性修改深拷貝滿足對象的復制，淺拷貝影響原數(shù)組。關于對象的深淺拷貝，暫且探索到這里，后續(xù)有新發(fā)現(xiàn)再進行補充。

開門見山，有人叫對象的復制為深復制淺復制，也有人叫深拷貝淺拷貝。
其實都是copy。

深拷貝(遞歸復制，復制所有層級，獨立副本，一個完全和原來對象屬性無關的副本)
返回對象：一個。
傳入對象：一個。
條件：JSON安全的對象，可以序列化為JSON字符串，并且可以解析為新的字符串。
深拷貝算法：

function deepCopy(data){
    let memory = null;
    const type = Object.prototype.toString.call(data);
    if (type === "[object Array]"){
        memory = []
        for (let i=0 ;i{
            memory[key] = data[key]
        })
    }else{
        return data;
    }
    return memory;
}

jQuery深拷貝:
var copiedObject = jQuery.extend(true, {}, originalObject)

es6深拷貝：
var copiedObject= JSON.parse(JSON.stringify(originalObject));

深拷貝是遞歸復制，新復制的對象與原對象是完全獨立的兩個對象，它們指向不同的內(nèi)存地址，做set不會影響到對方。

淺拷貝（單次復制，復制最高層級，引用副本，一個基于對原對象屬性引用的副本）
返回對象：一個。
傳入對象：一個或多個。
條件：無。

jQuery淺拷貝：
var copiedObject = jQuery.extend({}, originalObject)

es6淺拷貝：
var copiedObject = Object.assign({},originalObject)

es7淺拷貝：
var copiedObject = {...originalObject}

淺拷貝算法：

  function shallowCopyObj(original){
        let copy = {}
        Object.keys(original).forEach(key=>{
            copy[key] = original[key]
        })
        return copy
    }

由于javascript的對象是存地址的，所以淺復制的對象與原對象，都指向同一個內(nèi)存地址，屬于引用復制，做set會影響到對方。

實驗：
①普通屬性修改：深拷貝和淺拷貝都可以滿足對象的復制。
普通屬性是指value值為非Array，Object類型的數(shù)據(jù)類型，也就是Number，String，Boolean等基本數(shù)據(jù)類型。
原因：基本數(shù)據(jù)類型屬于值傳遞。

var obj = {foo:1};
var deepCopyObj = JSON.parse(JSON.stringify(obj));
deepCopyObj.foo = 2;
console.log("obj.foo:",obj.foo);//1
console.log("deepCopyObj.foo:",deepCopyObj.foo);//2

var obj = {foo:1};
var shallowCopyObj = Object.assign({},obj);
shallowCopyObj.foo = 2;
console.log("obj.foo:",obj.foo);//1
console.log("shallowCopyObj.foo:",shallowCopyObj.foo);//2

②高級屬性修改：深拷貝滿足對象的復制，淺拷貝影響原數(shù)組。
高級屬性是指Array，Object數(shù)據(jù)類型。
原因：基本數(shù)據(jù)類型屬于引用傳遞。

var obj = {foo:1,bar:{baz:1}};
var deepCopyObj = JSON.parse(JSON.stringify(obj));
deepCopyObj.bar.baz = 2;
console.log("obj.bar.baz:",obj.bar.baz);//1
console.log("deepCopyObj.bar.baz:",deepCopyObj.bar.baz);//2

var obj = {foo:1,bar:{baz:1}};
var shallowCopyObj = Object.assign({},obj);
shallowCopyObj.bar.baz = 2;
console.log("obj.bar.baz:",obj.bar.baz);//2 Attention！
console.log("shallowCopyObj.bar.baz:",shallowCopyObj.bar.baz);//2

印象中const也是保持變量地址不變的操作，那么es6中的let和const對于對象的深淺拷貝有影響嗎？

也就是將上面代碼中的var替換為let和const。

實驗結果是let和const不會影響深淺拷貝的結果，因為let強調(diào)塊作用域，而const強調(diào)變量整體地址空間的不變性。

關于對象的深淺拷貝，暫且探索到這里，后續(xù)有新發(fā)現(xiàn)再進行補充。

謝謝您的閱讀～

云服務器 GPU云服務器深淺拷貝 javascript的dom對象 javascript淺拷貝 javascript深拷貝

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94138.html

JavaScript的深淺拷貝

摘要：什么是深淺概念深拷貝淺拷貝只針對像這樣的對象，對于基本類型而言，可以理解為是沒有深淺的區(qū)別的。和指向了同一塊內(nèi)存深拷貝重新開辟了一個空間，修改對象的屬性，彼此不會影響。并不會更改使用遞歸適用于對象里面有對象什么是深淺概念深拷貝、淺拷貝只針對像Object/Array這樣的對象，對于基本類型而言，可以理解為是沒有深淺的區(qū)別的。淺拷貝復制的是引用，修改對象的屬性，會彼此影響。 ju...

zhunjiee 2019-08-22 15:55 評論0 收藏0
JavaScript專題之深淺拷貝

摘要：專題系列第六篇，講解深淺拷貝的技巧和以及實現(xiàn)深淺拷貝的思路前言拷貝也是面試經(jīng)典吶數(shù)組的淺拷貝如果是數(shù)組，我們可以利用數(shù)組的一些方法比如返回一個新數(shù)組的特性來實現(xiàn)拷貝。所以我們可以看出使用和是一種淺拷貝。 JavaScript 專題系列第六篇，講解深淺拷貝的技巧和以及實現(xiàn)深淺拷貝的思路前言拷貝也是面試經(jīng)典吶！數(shù)組的淺拷貝如果是數(shù)組，我們可以利用數(shù)組的一些方法比如：slice、co...

RancherLabs 2019-08-21 11:47 評論0 收藏0
深淺拷貝

摘要：深復制實現(xiàn)代碼如下第一種方法通過遞歸解析解決第二種方法通過解析解決作者六師兄鏈接原生深拷貝的實現(xiàn)處理未輸入新對象的情況通過方法構造新的對象深淺拷貝針對的是對象類型，如果是字符串的數(shù)組用[...arr]，還是不會影響要區(qū)分針對數(shù)組的深淺拷貝(默認情況為里面沒有對象的數(shù)組)，與針對對象的深淺拷貝 JavaScript數(shù)組深拷貝和淺拷貝的兩種方法 let a1 = [1, 2]; ...

Karrdy 2019-08-23 15:42 評論0 收藏0
javascript之深淺拷貝

摘要：為何寫最近在研究深淺拷貝，找了很多資料，感覺不是很滿意，所以自己就整理了一份。深拷貝如果給放到新的內(nèi)存中，將的各個屬性都復制到新內(nèi)存里，就是深拷貝。安全的值是指能夠呈現(xiàn)為有效格式的值。參考文檔冴羽的專題之深淺拷貝深拷貝與淺拷貝的實現(xiàn) 為何寫：最近在研究深淺拷貝，找了很多資料，感覺不是很滿意，所以自己就整理了一份。廢話不多說，我們來一起復習一下吧，也希望留下您寶貴意見。何為深淺拷貝？...

LMou 2019-08-26 11:34 評論0 收藏0
JavaScript 中的深淺拷貝

摘要：基本類型指的是簡單的數(shù)據(jù)段，而引用類型指的是一個對象保存在堆內(nèi)存中的地址，不允許我們直接操作內(nèi)存中的地址，也就是說不能操作對象的內(nèi)存空間，所以，我們對對象的操作都只是在操作它的引用而已。工作中經(jīng)常會遇到需要復制 JavaScript 數(shù)據(jù)的時候，遇到 bug 時實在令人頭疼；面試中也經(jīng)常會被問到如何實現(xiàn)一個數(shù)據(jù)的深淺拷貝，但是你對其中的原理清晰嗎？一起來看一下吧！一、為什么會有深淺...

Tonny 2019-08-23 14:13 評論0 收藏0