This is the ninth day of my participation in the First Challenge 2022. For details: First Challenge 2022.

Shallow copy

Shallow copy refers to the creation of new data that has an exact copy of the original data attribute values

If the property is of a primitive type, the value of the primitive type is copied. If the attribute is a reference type, the memory address is copied

That is, shallow copies copy a layer, and deep reference types share memory addresses

Such as:

function shallowClone(obj) {
    const newObj = {};
    for(let prop in obj) {
        if(obj.hasOwnProperty(prop)){
            newObj[prop] = obj[prop];
        }
    }
    return newObj;
}
Copy the code

In JavaScript, shallow copies exist:

Object.assign

var obj = {
    age: 18,
    nature: ['smart', 'good'],
    names: {
        name1: 'fx',
        name2: 'xka'
    },
    love: function () {
        console.log('fx is a great girl')
    }
}
var newObj = Object.assign({}, fxObj);
Copy the code

slice()

const fxArr = ["One", "Two", "Three"]
const fxArrs = fxArr.slice(0)
fxArrs[1] = "love";
console.log(fxArr) // ["One", "Two", "Three"]
console.log(fxArrs) // ["One", "love", "Three"]
Copy the code

concat()

const fxArr = ["One", "Two", "Three"]
const fxArrs = fxArr.concat()
fxArrs[1] = "love";
console.log(fxArr) // ["One", "Two", "Three"]
console.log(fxArrs) // ["One", "love", "Three"]
Copy the code

Extended operator

const fxArr = ["One", "Two", "Three"]
const fxArrs = [...fxArr]
fxArrs[1] = "love";
console.log(fxArr) // ["One", "Two", "Three"]
console.log(fxArrs) // ["One", "love", "Three"]
Copy the code

Deep copy

Deep copy opens up a new stack. Two object families are identical but correspond to two different addresses. Modifying the properties of one object does not change the properties of the other

Common deep-copy modes are:

_.cloneDeep()

const _ = require('lodash'); const obj1 = { a: 1, b: { f: { g: 1 } }, c: [1, 2, 3] }; const obj2 = _.cloneDeep(obj1); console.log(obj1.b.f === obj2.b.f); // falseCopy the code

jQuery.extend()

const $ = require('jquery');
const obj1 = {
    a: 1,
    b: { f: { g: 1 } },
    c: [1, 2, 3]
};
const obj2 = $.extend(true, {}, obj1);
console.log(obj1.b.f === obj2.b.f); // false
Copy the code

JSON.stringify()

const obj2=JSON.parse(JSON.stringify(obj1));
Copy the code

However, this approach has the disadvantage of ignoring undefined, symbol, and functions

const obj = {
    name: 'A',
    name1: undefined,
    name3: function() {},
    name4:  Symbol('A')
}
const obj2 = JSON.parse(JSON.stringify(obj));
console.log(obj2); // {name: "A"}
Copy the code

recursive

function deepClone(obj, hash = new WeakMap()) { if (obj === null) return obj; If (obj instanceof Date) return new Date(obj); if (obj instanceof Date) return new Date(obj); if (obj instanceof RegExp) return new RegExp(obj); If (typeof obj! == "object") return obj; If (hash. Get (obj)) return hash. Get (obj); let cloneObj = new obj.constructor(); Set (obj, cloneObj); // Constructor points to the current class's own hash.set(obj, cloneObj); For (let key in obj) {if (obj.hasOwnProperty(key)) {cloneObj[key] = deepClone(obj[key], hash); } } return cloneObj; }Copy the code

conclusion

  1. Deep copy recursively copies all values or attributes in the new object, while copy copies only references.
  2. In a deep copy, changes in the new object do not affect the original object, while in a shallow copy, changes in the new object are changed in the original object.
  3. In the deep copy, the original object does not share the same properties as the new object, while in the shallow copy, they have the same properties.

Come on, come on!

Study hard!!