shallow copy
Shallow copy is to create a new object, copy all the basic type values and reference type values of the original object, and copy its reference address. When the value of the reference type data in the copied object is modified, it will affect the original object.
deep copy
Deep copy means that when an object is copied, all its attributes and nested objects are recursively copied until all references and attributes of the entire object are completely copied. When the copied object is modified, it does not affect the original object.
object.assign method
object.assign Copies all enumerable properties from one or more source objects to a target object.
// Object.assign(target, source)
let obj1 = {
a: 1 };
let obj2 = {
a: 2, b: 1}
let obj = {
}
let res = Object.assign(obj, obj1, obj2)
console.log(res)
// { a: 2, b: 1 }
The above code copies the properties of the source objects obj1 and obj2 to the target object obj. If the properties in the source objects are the same, the property values of the source objects in the rear will overwrite the property values of the objects in the front. As above, the value of attribute a of obj2 overwrites the value of attribute a of obj1, and finally the value of attribute a of the object is 2.
let obj = {
}
const obj1 = {
info: {
name: 'ayetongzhi',
}
}
const res = Object.assign(obj, obj1)
console.log(res);
// { info: { name: 'ayetongzhi' } }
res.info.name = 'maomao'
console.log(res);
// { info: { name: 'maomao' } }
console.log(obj1);
// { info: { name: 'maomao' } }
The above code copies the properties of the object obj1 to the object obj to obtain the object res. When we change the name property of the object res, the name property of the source object obj also changes.
spread operator
The spread operator can realize the shallow copy of the object, the syntax is let cloneObj = { ... obj }.
let obj1 = {
info: {
name: 'ayetongzhi'
}
}
const obj = {
...obj1}
console.log(obj)
// { info: { name: 'ayetongzhi' } }
obj.info.name = 'maomao'
console.log(obj);
// { info: { name: 'maomao' } }
console.log(obj1);
// { info: { name: 'maomao' } }
Array.prototype.concat method
The concat method is used to merge arrays, and can also be used to implement shallow copies.
const arr1 = [{
name:'ayetongzhi'}, 1]
const arr2 = [2, 3]
const arr = arr1.concat(arr2)
console.log(arr);
// [ { name: 'ayetongzhi' }, 1, 2, 3 ]
arr1[0].name = 'maomao'
console.log(arr);
// [ { name: 'maomao' }, 1, 2, 3 ]
In the above code, we use the concat method to merge the array arr2 into the array arr1 and return the new array arr. We change the name attribute of the objects in the array arr1, and the name attribute of the objects in arr also changes.
Array.prototype.slice method
The slice method is used to copy the array and accepts two parameters startIndex and endIndex, which are the index of the start of copying (including the value of the current index) and the index of the end of copying (excluding the value of the current index, including the value before the end index). If the endIndex parameter is not passed, it will be copied from the start index to the end of the array.
const arr = [{
name: 'ayetongzhi'}, 1, 2]
let newArr = arr.slice(0)
newArr[0].name = 'maomao'
console.log(arr[0]);
// { name: 'maomao' }
In the above code, we copied the array arr, and modified the name attribute of the object in newArr, and the object name in arr also changed.