摘要:深拷貝和淺拷貝深拷貝和淺拷貝的示意圖大致如下淺拷貝只復(fù)制指向某個(gè)對(duì)象的指針,而不復(fù)制對(duì)象本身,新舊對(duì)象還是共享同一塊內(nèi)存。參考文章什么是深拷貝和淺拷貝及其實(shí)現(xiàn)方式
走在前端的大道上
本篇將自己讀過(guò)的相關(guān)文章中,對(duì)自己有啟發(fā)的章節(jié)片段總結(jié)在這(會(huì)對(duì)原文進(jìn)行刪改),會(huì)不斷豐富提煉總結(jié)更新。
淺拷貝var m = { a: 10, b: 20 } var n = m; n.a = 15; // 這時(shí)m.a的值是多少
m.a會(huì)輸出15,因?yàn)檫@是淺拷貝,n和m指向的是同一個(gè)堆,對(duì)象復(fù)制只是復(fù)制的對(duì)象的引用。
深拷貝深拷貝和上面淺拷貝不同,就是徹底copy一個(gè)對(duì)象,而不是copy對(duì)象的引用,例如,還是之前的例子,我們這么寫(xiě):
var m = { a: 10, b: 20 } var n = {a:m.a,b:m.b}; n.a = 15;
這次,我們?cè)賮?lái)輸出m.a ,發(fā)現(xiàn)m.a的值還是10,并沒(méi)有改變,m對(duì)象和n對(duì)象是雖然所有的值都是一樣的,但是在堆里面,對(duì)應(yīng)的不是同一個(gè)了,這個(gè)就是深拷貝。
深拷貝和淺拷貝深拷貝和淺拷貝的示意圖大致如下:
淺拷貝只復(fù)制指向某個(gè)對(duì)象的指針,而不復(fù)制對(duì)象本身,新舊對(duì)象還是共享同一塊內(nèi)存。但深拷貝會(huì)另外創(chuàng)造一個(gè)一模一樣的對(duì)象,新對(duì)象跟原對(duì)象不共享內(nèi)存,修改新對(duì)象不會(huì)改到原對(duì)象。
淺拷貝的實(shí)現(xiàn)方式 1、可以通過(guò)簡(jiǎn)單的賦值實(shí)現(xiàn)類似上面的例子,當(dāng)然,我們也可以封裝一個(gè)簡(jiǎn)單的函數(shù),如下:
function simpleClone(initalObj) { var obj = {}; for ( var i in initalObj) { obj[i] = initalObj[i]; } return obj; } var obj = { a: "hello", b:{ a: "world", b: 21 }, c:["Bob", "Tom", "Jenny"], d:function() { alert("hello world"); } } var cloneObj = simpleClone(obj); console.log(cloneObj.b); console.log(cloneObj.c); console.log(cloneObj.d); cloneObj.b.a = "changed"; cloneObj.c = [1, 2, 3]; cloneObj.d = function() { alert("changed"); }; console.log(obj.b); console.log(obj.c); console.log(obj.d);2、Object.assign()實(shí)現(xiàn)
Object.assign() 方法可以把任意多個(gè)的源對(duì)象自身的可枚舉屬性拷貝給目標(biāo)對(duì)象,然后返回目標(biāo)對(duì)象。但是 Object.assign() 進(jìn)行的是淺拷貝,拷貝的是對(duì)象的屬性的引用,而不是對(duì)象本身。
var obj = { a: {a: "hello", b: 21} ,c: 33}; var initalObj = Object.assign({}, obj); initalObj.a.a = "changed"; console.log(obj.a.a); // "changed" initalObj.c = 66; console.log(obj.c); // 33
注意:當(dāng)object只有一層的時(shí)候,是深拷貝,例如如下:
var obj1 = { a: 10, b: 20, c: 30 }; var obj2 = Object.assign({}, obj1); obj2.b = 100; console.log(obj1); // { a: 10, b: 20, c: 30 } <-- 沒(méi)被改到 console.log(obj2); // { a: 10, b: 100, c: 30 }深拷貝的實(shí)現(xiàn)方式
1、方法一還是手動(dòng)復(fù)制
和上面的舉例一樣,手動(dòng)復(fù)制可以實(shí)現(xiàn)深拷貝。
2、對(duì)象只有一層的話可以使用上面的:Object.assign()函數(shù)
3、轉(zhuǎn)成 JSON 再轉(zhuǎn)回來(lái)
var obj1 = { body: { a: 10 } }; var obj2 = JSON.parse(JSON.stringify(obj1)); obj2.body.a = 20; console.log(obj1); // { body: { a: 10 } } <-- 沒(méi)被改到 console.log(obj2); // { body: { a: 20 } } console.log(obj1 === obj2); // false console.log(obj1.body === obj2.body); // false
用JSON.stringify把對(duì)象轉(zhuǎn)成字符串,再用JSON.parse把字符串轉(zhuǎn)成新的對(duì)象。
可以封裝如下函數(shù)
var cloneObj = function(obj){ var str, newobj = obj.constructor === Array ? [] : {}; if(typeof obj !== "object"){ return; } else if(window.JSON){ str = JSON.stringify(obj), //系列化對(duì)象 newobj = JSON.parse(str); //還原 } else { for(var i in obj){ newobj[i] = typeof obj[i] === "object" ? cloneObj(obj[i]) : obj[i]; } } return newobj; };
4、遞歸拷貝
function deepClone(initalObj, finalObj) { var obj = finalObj || {}; for (var i in initalObj) { var prop = initalObj[i]; // 避免相互引用對(duì)象導(dǎo)致死循環(huán),如initalObj.a = initalObj的情況 if(prop === obj) { continue; } if (typeof prop === "object") { obj[i] = (prop.constructor === Array) ? [] : {}; arguments.callee(prop, obj[i]); } else { obj[i] = prop; } } return obj; } var str = {}; var obj = { a: {a: "hello", b: 21} }; deepClone(obj, str); console.log(str.a);
5、使用Object.create()方法
直接使用var newObj = Object.create(oldObj),可以達(dá)到深拷貝的效果。
function deepClone(initalObj, finalObj) { var obj = finalObj || {}; for (var i in initalObj) { var prop = initalObj[i]; // 避免相互引用對(duì)象導(dǎo)致死循環(huán),如initalObj.a = initalObj的情況 if(prop === obj) { continue; } if (typeof prop === "object") { obj[i] = (prop.constructor === Array) ? [] : Object.create(prop); } else { obj[i] = prop; } } return obj; }
6、jquery
jquery 有提供一個(gè)$.extend可以用來(lái)做 Deep Copy。
var $ = require("jquery"); var obj1 = { a: 1, b: { f: { g: 1 } }, c: [1, 2, 3] }; var obj2 = $.extend(true, {}, obj1); console.log(obj1.b.f === obj2.b.f); // false
7、lodash
另外一個(gè)很熱門(mén)的函數(shù)庫(kù)lodash,也有提供_.cloneDeep用來(lái)做 Deep Copy。
var _ = require("lodash"); var obj1 = { a: 1, b: { f: { g: 1 } }, c: [1, 2, 3] }; var obj2 = _.cloneDeep(obj1); console.log(obj1.b.f === obj2.b.f); // false
這個(gè)性能還不錯(cuò),使用起來(lái)也很簡(jiǎn)單。
參考文章:
1.什么是js深拷貝和淺拷貝及其實(shí)現(xiàn)方式
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/90798.html
摘要:本文解釋中深拷貝和淺拷貝的區(qū)別。深拷貝深拷貝指遞歸的復(fù)制對(duì)象的屬性給新對(duì)象。有些時(shí)候一層的深拷貝被認(rèn)為是淺拷貝,比如的值是一個(gè)對(duì)象,淺拷貝出來(lái)的新對(duì)象直接引用了原對(duì)象的對(duì)象,所以也會(huì)相互影響的。 本文解釋javascript中深拷貝和淺拷貝的區(qū)別。 淺拷貝/Shallow Copy 淺拷貝指拷貝了引用值。 var original = {prop1 : Prop1, prop2 : p...
摘要:接下來(lái)就讓我們更細(xì)致的探究中的深淺拷貝。總結(jié)以上對(duì)深拷貝和淺拷貝做了簡(jiǎn)單的介紹,在深拷貝的實(shí)現(xiàn)上也只介紹了最簡(jiǎn)單的實(shí)現(xiàn)形式,并未考慮復(fù)雜情況以及相應(yīng)優(yōu)化,想要對(duì)深拷貝有更深入的了解,需要大家花時(shí)間去深入研究,或者可以關(guān)注我后續(xù)文章的動(dòng)態(tài)。 對(duì)象和數(shù)組的拷貝對(duì)我來(lái)說(shuō)一直都是一個(gè)比較模糊的概念,一直有點(diǎn)一知半解,但是在實(shí)際工作中又偶爾會(huì)涉及到,有時(shí)候還會(huì)一不小心掉坑里,不知道大家有沒(méi)有同樣...
摘要:深拷貝和淺拷貝的區(qū)別背景最近在用框架寫(xiě)頁(yè)面,賦值給中的對(duì)象時(shí)會(huì)出現(xiàn)一個(gè)問(wèn)題,賦值和被賦值對(duì)象之中任何一個(gè)有變化,另一個(gè)也會(huì)隨之變化。 深拷貝和淺拷貝的區(qū)別 背景:最近在用vue框架寫(xiě)頁(yè)面,賦值給Vue.$data中的對(duì)象時(shí)會(huì)出現(xiàn)一個(gè)問(wèn)題,賦值和被賦值對(duì)象之中任何一個(gè)有變化,另一個(gè)也會(huì)隨之變化。例如: var b = { foo: 123 }; var vm = new Vue(...
摘要:參考鏈接淺拷貝最簡(jiǎn)單的淺拷貝就賦值。所謂的淺拷貝就是,后面的對(duì)象和前面的對(duì)象在第一層數(shù)據(jù)結(jié)構(gòu)中指向同一個(gè)堆地址。但是如果前面的數(shù)據(jù)不止有一層,如此時(shí),使用和方式實(shí)現(xiàn)的都是淺拷貝。深拷貝管你怎么變,互不影響。 參考鏈接:http://www.cnblogs.com/st-les...https://blog.csdn.net/hj7jay/... 淺拷貝: 1.最簡(jiǎn)單的淺拷貝就賦值。由于...
摘要:只有對(duì)于復(fù)雜數(shù)據(jù)類型才有深淺拷貝一說(shuō)粗淺的解釋淺拷貝并不是真的拷貝,新對(duì)象仍指向原被拷貝對(duì)象的內(nèi)存地址,如有更新會(huì)被同步引用數(shù)據(jù)類型的名存在棧內(nèi)存中,值存在于堆內(nèi)存中,但是棧內(nèi)存會(huì)提供一個(gè)引用的地址指向堆內(nèi)存中的值深拷貝是完全拷貝出了獨(dú)立的 只有對(duì)于Object(復(fù)雜數(shù)據(jù)類型)才有深淺拷貝一說(shuō) 1、粗淺的解釋: 淺拷貝并不是真的拷貝,新對(duì)象仍指向原被拷貝對(duì)象的內(nèi)存地址,如有更新會(huì)被同步...
閱讀 3530·2021-11-23 10:10
閱讀 3292·2019-08-30 14:03
閱讀 2066·2019-08-30 13:09
閱讀 3392·2019-08-29 15:29
閱讀 1540·2019-08-29 11:23
閱讀 2002·2019-08-28 18:28
閱讀 2840·2019-08-26 13:34
閱讀 2168·2019-08-26 11:32