Make writing a habit together! This is the fifth day of my participation in the “Gold Digging Day New Plan · April More Text Challenge”,Click here for more details

Meaning of shallow copy

  • Shallow copy: Creates a new object with an exact copy of the original object’s property values. If the property is of a primitive type, the value of the primitive type is copied. If the property is of a reference type, the memory address is copied, so if one of the objects changes the address (value), the source object is also modified.
  • Deep copy: a full copy of a new object is created in the heap area of memory to store the new object, and modification of the new object does not affect the original object.

Shallow copy common method

  1. Assign the new object directly
let person = {
    name : 'I want to hide in a tin.'.age : 20
}
let person2 = person;
person2.name = "I'm Dicja.";
console.log(person); // {name: 'I am Dijia ', age: 20}
console.log(person2); // {name: 'I am Dijia ', age: 20}
Copy the code
  1. Object.assign()methods

The object.assign () method is used to assign the values of all enumerable properties from one or more source objects to target objects. It will return the target object.

Note: When modifying the base data type, the original object does not change.

let obj1 = { 
  person: { 
    name: "jack".age: 20
  },
  game: 'PUBG' 
};
let obj2 = Object.assign({}, obj1);
obj2.person.name = "alan";
obj2.game = 'DNF'
console.log(obj1); // { person: { name: 'alan', age: 20 }, game: 'PUBG' }
console.log(obj2); // { person: { name: 'alan', age: 20 }, game: 'DNF' }
Copy the code
  1. ES6 extension operator
let obj1 = { 
  person: { 
    name: "jack".age: 20
  },
  game: 'PUBG' 
};
letobj2 = { ... obj1 }; obj2.person.name ="alan";
obj2.game = 'DNF'
console.log(obj1); // { person: { name: 'alan', age: 20 }, game: 'PUBG' }
console.log(obj2); // { person: { name: 'alan', age: 20 }, game: 'DNF' }
Copy the code
  1. Handwritten shallow copy
function shallowClone (target) {
    let cloneTarget = {};
    for (const key in target) {
        cloneTarget[key] = target[key];
    }
    return cloneTarget;
}
​
let obj1 = { 
  person: { 
    name: "jack".age: 20
  },
  game: 'PUBG' 
}
let obj2 = shallowClone(obj1);
obj2.person.name = "alan";
obj2.game = 'DNF';
// console.log(obj1); // { person: { name: 'alan', age: 20 }, game: 'PUBG' }
// console.log(obj2); // { person: { name: 'alan', age: 20 }, game: 'DNF' }
​
Copy the code

Common methods for deep copy

  1. JSON.parse(JSON.stringify(Object))
let obj1 = { 
  person: { 
    name: "jack".age: 20
  },
  game: 'PUBG' 
}
​
let obj2 = JSON.parse(JSON.stringify(obj1));
obj2.person.name = "alan";
console.log(obj1); // { person: { name: 'jack', age: 20 }, game: 'PUBG' }
console.log(obj2); // { person: { name: 'alan', age: 20 }, game: 'PUBG' }
Copy the code

This method is the most primitive deep copy, with many shortcomings, such as copying other reference types, copying functions, circular references and so on.

If that’s all you say in an interview, you’re doomed.

  1. jQuery.extend()
$.extend(deepCopy, target, object1, [objectN]
​
var$=require('jquery');
let obj1 = { 
  person: { 
    name: "jack".age: 20
  },
  game: 'PUBG' 
}
let obj2 = $.extend(true, {}, obj1);
obj2.person.name = "alan";
console.log(obj1); // { person: { name: 'jack', age: 20 }, game: 'PUBG' }
console.log(obj2); // { person: { name: 'alan', age: 20 }, game: 'PUBG' }
Copy the code
  1. Handwritten deep copy
function deepClone (target) {
  if (typeof target === 'object') {
    let cloneTarget = {};
    for (let key in target) {
      cloneTarget[key] = deepClone(target[key]);
    }
    return cloneTarget;
  } else {
    returntarget; }}let obj1 = { 
  person: { 
    name: "jack".age: 20.like: {
      footBall: 'footBall'.basketBall: 'basketBall'}},game: 'PUBG'.array: [1.2.3]}const obj2 = deepClone(obj1);
console.log(obj2);
Copy the code

The console.log output is as follows:

{ person: 
   { name: 'jack'.age: 20.like: { footBall: 'footBall'.basketBall: 'basketBall'}},game: 'PUBG'.array: { 0: 1.1: 2.2: 3}}Copy the code

This is a deep copy of the most basic version, and this code can solve the problem recursively, but it obviously has a lot of flaws, such as not taking arrays into account.

Let’s modify the deepClone() code slightly:

function deepClone (target) {
  if (typeof target === 'object') {
    let cloneTarget = (target instanceof Array)? [] : {};for (let key in target) {
      cloneTarget[key] = deepClone(target[key]);
    }
    return cloneTarget;
  } else {
    returntarget; }}Copy the code

The console. Log output is as follows:

{ person: 
   { name: 'jack'.age: 20.like: { footBall: 'footBall'.basketBall: 'basketBall'}},game: 'PUBG'.array: [ 1.2.3]}Copy the code

OK, we’re done. No problem.

conclusion

And that’s all for this share

Circular references, copy functions and Date types are not taken into account in deep handwritten copy. If your business needs these, it can be modified again.

If you think the article is well written and inspiring, please do not hesitate to like and follow it and leave your valuable opinion in the comments section ~~😃