to sum up
Real knowledge comes from practice.
The difference between shallow copy and deep copy depends on how the copy is realized first, and then talk about the difference.
var a, b = a;
Basic types use assignment operations, only assignments, modifications will not affect each other.
The reference type assignment reference address is the same, and the modification will affect each other.
The difference between the following implementations:
Shallow copy, modify the array elements in one object, the other object will also be modified. If it is to modify or add attributes, it will not affect.
Deep copy, no matter what is modified, does not affect another object.
Deep copy is used in actual development, shallow copy is never used.
In addition, the factory function can be regarded as a deep copy of the known fixed properties. In vue, when the props attribute value is an object or an array, the method of returning the factory function is used.
const compB = {
template: `<div>
<p>age:{
{age}}</p>
<p>sex:{
{sex}}</p>
<p>hobby.ball:{
{hobby.ball}}</p>
<p>hobby.game:{
{hobby.game}}</p>
</div>`,
props: {
age: Number,
sex: {
type: String,
default: 'male',
validator(value) {
return value === 'male' || value === 'female'
}
},
hobby: {
type: Object,
default() {
return {
ball: '',
game: ''
}
}
}
}
}
Shallow copy
Test preview
undo: js execution order bug, later modification will also affect the previously printed result.
Test code
<script>
//浅拷贝实例:此递归方法不包含数组对象
function shallowCopy(src) {
var newobj = {};
for (var prop in src) {
if (src.hasOwnProperty(prop)) {
//仅拷贝私有属性，如toString这些对象公共属性不拷贝
newobj[prop] = src[prop];
}
}
return newobj;
}
var obj = {
strA:"test_A",
arr: [11,22,33],
obj:{a:{b:1},c:2},
fun:function(a,b){return a-b}
};
console.log("打印 obj");
console.log(obj);
var shallowObj = shallowCopy(obj);
console.log("shallowObj浅拷贝 obj，打印 shallowObj");
console.log(shallowObj);
shallowObj.arr[0] = 1;
shallowObj.strA="testEdit_A"
shallowObj.strB="testAdd_B"
console.log("修改 shallowObj，打印 shallowObj");
console.log(shallowObj);
console.log("打印 obj");
console.log(obj);
</script>Deep copy
Test preview
Test code
<script>
//深拷贝，要想达到深拷贝就需要用递归
function deepClone(obj){
var newObj = obj instanceof Array ? []:{};
if(typeof obj !== 'object'){
return obj;
}else{
for(var i in obj){
newObj[i] = typeof obj[i] === 'object' ? deepClone(obj[i]) : obj[i];
}
}
return newObj;
}
var obj = {
strA:"test_A",
arr: [11,22,33],
obj:{a:{b:1},c:2},
fun:function(a,b){return a-b}
};
console.log("打印 obj");
console.log(obj);
//测试对象深拷贝
var deepCloneObj = deepClone(obj);
console.log("deepCloneObj 深拷贝 obj，打印 deepCloneObj");
console.log(deepCloneObj);
console.log("修改 deepCloneObj ，打印 deepCloneObj");
deepCloneObj.arr[0] = 1;
deepCloneObj.strA="testEdit_A"
deepCloneObj.strC="testAdd_C"
console.log(deepCloneObj);
console.log("打印 obj");
console.log(obj);
//测试数组深拷贝
var testArr = [11, 22, 33, 44, "aa", "55", [1, 2,3,4]];
console.log("打印 testArr 数组");
console.log(testArr);
var arr = deepClone(testArr);
console.log("arr 拷贝了 testArr，打印 arr");
console.log(arr);
testArr[0] = 1;
console.log("修改 testArr，打印 testArr");
console.log(testArr);
console.log("打印 arr");
console.log(arr);
</script>Recommended related reading
Explain the JavaScript stack memory and heap memory in detail
Speak more clearly