This is the first day of my participation in the August More Text challenge
Implementing shallow copy
First, a shallow copy is an exact copy of the property value of the original object. If it is a primitive data type, it copies the value of the primitive numeric type. If it is a reference data type, it copies the address pointer. If the reference memory address of one object changes, the other object also changes.
Object.assign() :
The first argument received is the target object, and the rest are the source objects
Usage: Object. The assign (target, source_1,…). , this method can realize shallow copy, also can realize one-dimensional array deep copy.
Note:
- If the target object and the source object have an attribute with the same name, or if multiple source objects have an attribute with the same name, the later attribute overrides the previous one
- If the function has only one argument, the object is returned if the argument is an object. When the parameter is not an object, it is first converted to an object and then returned
- Since null and undefined cannot be converted to objects, the first argument cannot be null or undefined
let target = {a: 1};
let object2 = {b: 2};
let object3 = {c: 3};
Object.assign(target,object2,object3);
console.log(target); // {a: 1, b: 2, c: 3}
Copy the code
Extended operator:
You can copy attributes using extended operators.
let obj1 = {a:1,b:{c:1}} let obj2 = {... obj1}; obj1.a = 2; console.log(obj1); //{a:2,b:{c:1}} console.log(obj2); //{a:1,b:{c:1}} obj1.b.c = 2; console.log(obj1); //{a:2,b:{c:2}} console.log(obj2); //{a:1,b:{c:2}}Copy the code
The array method implements shallow copies:
Array.prototype.slice()
This is a JavaScript array method that returns the selected element from an existing array.
Array. slice(start,end), which does not alter the original array and returns a new array
This method takes no arguments and makes a copy of the array.
Let arr = [1, 2, 3, 4]; console.log(arr.slice()==arr.slice())//false console.log(arr==arr.slice())//falseCopy the code
Array.prototype.concat()
The concat() method is used to merge two or more arrays. This method does not change the original array, but returns a new array.
This function takes two arguments, both of which are optional, to make a shallow copy of the array if not written
Implement shallow copy manually
Function shollowCopy(object) {// If (! object || typeof object ! = "object") return let tar = Array.isArray(object) ? [] : } for (const key in object) {if (object.hasownProperty (key)) {tar[key] = object[key]}} return tar} // test let arr = [12, 54, 567, 87, 9] let test = shollowCopy(arr) console.log(test) console.log(test === arr)Copy the code
Implementing deep copy
Shallow copy: Shallow copy refers to copying the property value of one object to another. If the value has a reference type, the address of the reference is copied to the pair of objects, so that both objects have a reference of the same reference type. Shallow copies can be implemented using object. assign and expansion operators, and arrays can be implemented using slice and concat
Deep copy: In contrast to shallow copy, if an attribute value is of a reference type, the deep copy creates a new reference type and copies the corresponding value to it, so that the object gets a new reference type instead of a reference of the original type. Deep copy can be implemented using JSON’s two functions for some objects, but since JSON’s object format is more strict than JS’s, the conversion will fail if the attribute value contains a function or Symbol value
JSON.stringify()
json.parse(JSON.stringify(obj))
Is one of the more commonly used deep copy methods, its principle is to useJSON.stringify
Serialize the JS object before usingJSON.parse
Deserialize (restore) the JS object- This method can be simple and crude to implement deep copy, but there are still problems, if the copied object has function, undefined, symbol, when using json.stringify processing, will disappear.
let obj = {
a: 0,
b: {
c: 0
}
}
let obj2=JSON.parse(JSON.stringify(obj))
console.log(obj2)
console.log(obj.b===obj2.b)//false
Copy the code
Handwritten deep copy
If we are assigning an object of type Object, we simply return the value of the object to the current value, so that we do not have the problem of copying the reference value to the same memory space.
function deepCopy(obj) {
if (!obj || typeof obj !== "object") return
let newobj = Array.isArray(obj) ? [] : {};
for (const key in obj) {
if (obj.hasOwnProperty(key)) {
newobj[key] = typeof obj[key]==="object"?deepCopy(obj[key]):obj[key]
}
}
return newobj
}
//测试
let tt=deepCopy(obj)
tt.b.c=111111
console.log(tt)
console.log(obj)
Copy the code
\