To understand the process of implementing a deep copy, we will examine the process of implementing a deep copy of an object.

Basic environment

  • First, make sure node.js is installed on your computer. You can use terminal Node-v to view the version.
  • NPM is a package management tool for Node. Use the NPM install http-server -g command to install a simple static server on which web pages can runHttp-server-p Specifies the port number

The implementation process

  1. Encapsulates a deep-copy function that can be called to copy
  2. If the parameter is null or not an object or array, it is returned without deep copy.
// Deep copy function
function deepClone(obj={}) {
    if(typeofobj ! = ='object' || obj == null) {// obj is null, or is not an object or array
        return obj
    }
    
}
Copy the code
  1. Class to determine whether the passed argument is an array or an object, and return an empty array if it is an array, or an empty object otherwise
// Deep copy function
function deepClone(obj={}) {
    if(typeofobj ! = ='object' || obj == null) {// obj is null, or is not an object or array
        return obj
    }

    // Initialize the result
    let result
    if(obj instanceof Array){
        result=[]
    }else{
        result={}
    }

    // Return the result
    return result
    
}
Copy the code
  1. Loop through each item of a group or object, judge each item, and useobj.hasOwnProperty(key)Ensure that key is not a prototype chain attribute, then recurse each item, judge the type of each item, return different results according to different types, append to result, and finally return result, namely copy success.
// Deep copy function
function deepClone(obj={}) {
    if(typeofobj ! = ='object' || obj == null) {// obj is null, or is not an object or array
        return obj
    }

    // Initialize the result
    let result
    if(obj instanceof Array){
        result=[]
    }else{
        result={}
    }

    for(let key in obj){
    // Ensure that key is not an attribute of the stereotype
        if(obj.hasOwnProperty(key)){
            // recursive call
            result[key]=deepClone(obj[key])
        }
    }

    // Return the result
    return result
    
}
Copy the code

Implement a deep-copy example using the functions encapsulated above

const obj1={
    age:20.name:'xxx'.address: {city:'beijing'
    },
    arr: ['a'.'b'.'c'.'d']}const obj2=deepClone(obj1)
obj2.address.city='shanghai'
console.log(obj1.address.city); // beijing

// Deep copy function
function deepClone(obj={}) {
    if(typeofobj ! = ='object' || obj == null) {// obj is null, or is not an object or array
        return obj
    }

    // Initialize the result
    let result
    if(obj instanceof Array){
        result=[]
    }else{
        result={}
    }

    for(let key in obj){
        if(obj.hasOwnProperty(key)){
            // recursive call
            result[key]=deepClone(obj[key])
        }
    }

    // Return the result
    return result
    
}
Copy the code