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.stringifySerialize the JS object before usingJSON.parseDeserialize (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

\