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

What is the difference between the box-size property content-box and border-box in the css box model?

 The box model is a very important concept in CSS layout, it includes content area, padding, border, and margin. Box models can be divided into two types: standard box models and IE box models. The box model, as the name suggests, is used to hold things, and the things it holds are the content of HTML elements. In other words, every visible HTML element is a box.

Js uses recursive way to traverse the dom tree to dynamically create element nodes

 What is a dom tree? In short, DOM is the Document Object Model, which provides a structured representation for documents and defines how to access the document structure through scripts. DOM is composed of nodes. After the HTML is loaded, the rendering engine will generate a DOM tree in memory based on the HTML document. This article uses a small case to traverse the dom tree recursively. The core of the method is to determine whether the incoming data is an array, and then traverse the root node. Note that there must be an end condition when using recursion.