The first thing we need to understand is what is a shallow copy?

  • Depth copy is a JavaScript operation on data, but depth copy is relative to JavaScript data type. In JavaScript, there is no depth copy for basic types. Shallow copy is just for JavaScript complex data types (reference data types)

  • Basic data types are stored on the stack, and shallow copies are also the stack of operations (except that the values of basic data types are operated on, and the memory addresses of reference types are operated on), so there is no such thing as shallow copies of basic data types

  • Note shallow cloning: only the first level of the object or array is processed, and the rest of the level is shared, so that the cloned result is still associated with the previous one (the heap memory address of the object).

  • Json. parse/stringify: Not all values support “the re becomes empty, BigInt cannot handle it, error will be reported, attribute value is undefined or function will disappear, date object becomes string will not be converted back”

    The + re becomes an empty object +BigIntCannot handle, an error will be reported + property value isundefined 或 functionWill all disappear + the date object becomes a string and cannot be converted back +ArrayBuffer.const obj = {
    num: 1.str: 'String'.bigInt: 10n.undefined: undefined.function: function() {}
    reg: 123 / / ^,
    date: new Date()}console.log(JSON.parse(JSON.stringify(obj)))
Copy the code

    A shallow copy of the object type

    const obj1 = {
    a: 1
    b: 2.c: {
       a: 1}}constobj2 = { ... obj1 }const obj3 = Object.assign(obj1)
Copy the code

    A shallow copy of the array type

    const arr1 = [1[1.2].3]

const arr2 = arr1.slice()
const arr3 = []
Copy the code

    Shallow clones of objects or arrays (encapsulated) article 28 utility classes

    const shallowClone = function shallowClone(obj) {
    const type = toType(obj)
    let Ctor = null
    if(obj == null) return obj 
    
    // Handle other special values
    Ctor = obj.constructor
    if(/^(regexp|date)$/i.test(type)) return new Ctor(obj)
    if(/^(symbol|bigint)$/i.test(type)) return Object(obj)
    if(/^error$/i.test(type)) return new Ctor(obj.message)
    if(/^function$/i.test(type)) {
        return function anonymous() {
            return obj.apply(this.arguments)}}// Arrays and objects are handled based on loops
    if(isPlainObject(obj) || type === 'array') {
        const result = new Ctor
        each(obj, function(key, value) {
            result[key] = value
        })
        return result
    }
    return obj
}
Copy the code

    Proclonation (encapsulation) of object types article 28 utility classes

    const deepClone = function deepClone(obj, cache) {
    const type = toType(obj)
    let Ctor = null
    let result = null
    
    // If it is not an array or object, shallow clone it
    if(! isPlainObject(obj) && type ! = ='array') return shallowClone(obj)
    // It is the other way around
    cache = !Array.isArray(cache) ? [] : cache
    if(cache.indexOf(obj) >= 0) return obj 
    cache.push(obj)
    // Normal iterative processing
    Ctor = obj.constructor
    result = new Ctor()
    each(obj, function(key, value) {
        result[key] = deepClone(value, cache)
    })
    return result
}
Copy the code