Deep copy and shallow copy Introduction:

Deep copy: A deep copy is a complete copy of an object from the heap, creating a new area of the heap memory to store the new object, and modifying the new object does not affect the original object.

Shallow copy: A shallow copy creates a new object with an exact copy of the original object’s property values. If the property is a primitive type, it copies the value of the primitive type, and if the property is a reference type, it copies the memory address, so if one object changes the address, it affects the other object.

Common shallow copy methods: Array slice(), concat(), array.from (), object.assign (),… (expand operator), recursive implementation

  1. Method 1: Slice ()
let testArr1 = [1, 2, { name: 'echo' }, [11, 22]]; let shallowClone1 = testArr1.slice(); shallowClone1[0] = 666; shallowClone1[2].name = 'boy'; shallowClone1[3][0] = 111 console.log(shallowClone1); //[ 666, 2, { name: 'boy' }, [111, 22] ] console.log(testArr1); //[1, 2, {name: 'boy'}, [111, 22]] Reference data types do not.Copy the code
  1. Method 2: concat()
let testArr2 = [1, 2, 3]; let shallowClone2 = testArr2.concat() shallowClone2[0] = 11; console.log(testArr2); // [1, 2, 3] console.log(shallowClone2); / / [11, 2, 3]Copy the code

3. Array.from()

let testArr3 = [2, 4, 6]; let shallowClone6 = Array.from(testArr3, Item => item) console.log(' Here is the result of array.from ') // array.from () creates a new, shallow-copy array instance from an array-like or iterable. console.log(shallowClone6) //[2, 4, 6]Copy the code
  1. Four Object. The way the assign ()
// let testObj1 = {name: 'echo', age: 6, c: {sex: 1}} let shallowClone3 = object. assign({}, testObj1, {age: 9}); console.log(testObj1) // {name: "echo", age: 6, c: { sex: 1 }} console.log(shallowClone3) // {name: "echo", age: 9, c: {sex: 1}} // References to objects shallowClone3.c.ex = 0 console.log(testObj1) // {name: "echo", age: 6, c: {sex: 0}} console.log(shallowClone3) // {name: "echo", age: 6, c: {sex: 0}Copy the code
  1. Methods five… (Extend operator)
let testObj2 = { name: 'echo2', age: 6, obj: { like: 'code'}} let shallowClone4 = {... testObj2} shallowClone4.age = 9 console.log(testObj2) //{name: "echo2", age: 6} console.log(shallowClone4) //{name: "Echo2 ", age: 9} // Object reference shallowClone4.obj.like = 'JavaScript' console.log(testObj2) // {name: "echo2", age: 6, obj: { like: 'JavaScript'}} console.log(shallowClone4) // {name: "echo2", age: 6, obj: { like: 'JavaScript'}}Copy the code
  1. Method 6: recursive implementation
function shallowClone(obj) { if (typeof obj === 'object' && obj ! == null) { const cloneTarget = Array.isArray(obj) ? [] : {}; for (let key in obj) { if (obj.hasOwnProperty(key)) { cloneTarget[key] = obj[key]; } } return cloneTarget; } else { return obj; }}Copy the code

To solve shallow copy operations on reference data types that change the source data, use deep copy to solve the problem

Parse (json.srtingfy ()), recursive implementation

  1. Parse (json.srtingfy ())
Json.srtingfy (); json.parse (); json.parse (); Unable to deep copy Date, RegExp, Error objects // 2. TestObj3 = {name: 'lufei', age: 6, obj: {name: 'lufei', age: 6, obj: { like: 'code' }}; let deepClone1 = JSON.parse(JSON.stringify(testObj3)) deepClone1.obj.like = 'girl' console.log(testObj3) // {name: "lufei", age: 6, obj: { like: 'code'}} console.log(deepClone1) // {name: "lufei", age: 6, obj: { like: 'girl'}}Copy the code
  1. Method two: recursive implementation
function deepClone(obj) { if(typeof obj ! == 'object') { return } let objTwo = Array.isArray(obj) ? [] : {} for(let key in obj){ if(obj.hasOwnProperty(key)){ objTwo[key] = typeof obj[key] === 'object' ? deepClone(obj[key]) : obj[key] } } return objTwo } let ooo = {name: 1,age:222, obj: { haha: }} deepClone(ooo) console.log(' original value and reference value array. from') // let obj = {0:'1', 1:'2', length: 2, } let objArr = Array.from(obj, (item, Index) => {return 'No.' + item}) console.log(objArr) let arr = [1,2] arr = array. from(arr) console.log(arr === Array.from(arr)) function Fun() { this.name = 'echo' } let oi = new Fun() console.log(oi)Copy the code