javascript中的淺拷貝是什么意思

本篇內容主要講解“javascript中的淺拷貝是什么意思”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“javascript中的淺拷貝是什么意思”吧!

1、簡單復制對象的最外層屬性，不處理對象更深層次的對象屬性，會導致復制對象和原始對象的深層次屬性指向同一個內存。

2、如果一個對象改變了內存的地址，就會影響另一個對象。

將對象序列化為JSON字符串，然后通過JSON.parse()將字符串生成新的對象，實現深度復制。

實例

        let arr = [],
 obj = {
a: 1
}
for(let i = 0; i < 3; i++) {
 
arr.push(obj)
 
}
//　基本變量的值一般都是存在棧內存中，而對象類型的變量的值存儲在堆內存中，棧內存存儲對應空間地址。基本的數據類型: Number 、Boolean、Undefined、String、Null。
console.log(arr) //[{ a: 2 },{ a: 2 },{ a: 2 }] 內存地址被替換指向{a:2}
console.log(JSON.parse(JSON.stringify(arr))) //[{ a: 1 },{ a: 1 }]防止重新賦值
console.log(obj)//{a:1}
//當我們執行obj.a = 2 時，堆內存就有新的對象{a：2}，棧內存的b指向新的空間地址( 指向{a：2} )，而堆內存中原來的{a：1}就會被程序引擎垃圾回收掉，節約內存空間。
obj.a = 2
console.log(obj)//{a:2}
console.log(arr) //[{ a: 2 },{ a: 2 }]
 
console.log("//")
 
// 深拷貝  如果對象的屬性值為一般類型（string， number），通過Object.assign({},srcObj)得到的新對象是深拷貝
let obj1 = {
a: 1,
b: 2
};
 
let obj2 = Object.assign({}, obj1, {
b: 20
});
 
console.log('obj1', obj1); // { a: 1, b: 2 }
console.log('obj2', obj2); // { a: 1, b: 20 }
 
console.log("//")
 
// 淺拷貝  如果屬性值為對象或其它引用類型，通過Object.assign({},srcObj)得到的新對象是淺拷貝
obj1 = {
a: 1,
b: {
c: 2,
d: 3
}
};
obj2 = Object.assign({}, obj1);
obj2.a = 10;
obj2.b.c = 20;
console.log('obj1', obj1); // { a: 1, b: { c: 20, d: 3 } }
console.log("obj2", obj2) //{ a: 10, b: { c: 20, d: 3} }
console.log("//")
//Object.assign({})和Object.assign()   里面加與不加{}的區別   ;
var test1 = {
a: 'a'
},
 
test2 = {
b: {
c: 1
}
};
 
// Object.assign({}) 原始對象不會被改變
console.log(Object.assign({}, test1, test2)); //合并之后{ a: "a", b: {c:1} }
console.log(test1) // {a:'a'}
console.log(test2) // {b:{c:1}}
// Object.assign() 原始對象會被改變(改變的只是被覆蓋的原始對象test2覆蓋test1)
console.log(Object.assign(test1, test2)); //合并之后{ a: "a", b: {c:1} }
console.log(test1) //{ a: "a", b: {c:1} }
console.log(test2) // {b:{c:1}}
//當替換一下被覆蓋的對象test1覆蓋test2
console.log(Object.assign(test2, test1)); //合并之后{ a: "a", b: {c:1} }
console.log(test1) //{ a: "a"}此結果是在上面test2覆蓋test1測試注釋情況下得到,如果不注釋打印得到{ a: "a", b: {c:1} },因為上面test1={ a: "a", b: {c:1} }
console.log(test2) // { a: "a", b: {c:1} }

到此，相信大家對“javascript中的淺拷貝是什么意思”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！