Skip to main content

What is the implementation and difference between js deep copy and shallow copy?

 Deep copy is to re-open a new reference address for the variable, which is completely separated from the original, which is equivalent to dividing a new space for itself. Although the content in it is the same, even if one of them is changed, the other is not. will be affected. Shallow copy means that the reference address of the reference type in the stack cannot be changed. The two variables share the same reference address and change the things in the same place. Therefore, the shallow copy causes the change of one variable to cause the same change of the other variable. .

Deep copy of objects using parsing structures in es6

 let obj1={id:100,name:"aaa"};
    let obj2={...obj1};
    obj2.name="bbb";
    console.log(obj1);//{id: 100, name: "aaa"}
    console.log(obj2);//{id: 100, name: "bbb"}
Deep copy using methods in JSON
let obj1={id:100,name:"aaa"};
    let obj2=JSON.parse(JSON.stringify(obj1));
    obj2.name="bbb";
    console.log(obj1);//{id: 100, name: "aaa"}
    console.log(obj2);//{id: 100, name: "bbb"}
    </script>
Deep copy using recursion
let obj2={};
    function deepCopy(newObj,oldObj){
        for(let item in oldObj){
            if(oldObj[item] instanceof Object){
                newObj[item]={};
                deepCopy(newObj[item],oldObj[item]);
            }
            else if(oldObj[item] instanceof Array){
                newObj[item]=[];
                deepCopy(newObj[item],oldObj[item]);
            }
            else{
                newObj[item]=oldObj[item];
            }
        }
    }
    deepCopy(obj2,obj1);
    obj2.hobby.two="hello";
    console.log(obj1);
    console.log(obj2);


Comments

Popular posts from this blog

vue routing global guard beforeEach and afterEach

 Global routing front guard (beforeEach) This function is used the most. Its function is to perform permission-related verification before routing jumps. This function contains three parameters: to: the object of the target route that is about to enter; from: the route that the current route is leaving; next: confirm the release. It can be used to log in and register, to determine whether there is a token before logging in, and release if it exists. , if it does not exist, it will not be released. The post routing guard (afterEach), its role is to trigger after the routing jump.

ES6 arrow functions

 In ES6, in addition to the new features of let and const, arrow functions are the most frequently used new features. But this feature is not unique to ES6. Arrow functions, as the name suggests, are functions defined using arrows (=>) and belong to a class of anonymous functions. It allows us to write smaller function syntaxes. The code of arrow functions is simpler and more flexible to write.