Deep copy and shallow copy js, method

Source: Internet
Author: User
Tags shallow copy

When working with JavaScript arrays, we often need to back up the array, and it turns out that if we simply give it to other variables, we just change any one of them, and then the others change, which leads to the problem.

Reference object.assign (): https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

<! DOCTYPE html>//the Object.assign () method is a shallow copy        varmyobject={A:A, B:"B", C:C,        }        varnewobject=object.assign ({},myobject); NEWOBJECT.A=222; Document.writeln ("Original:" +json.stringify (MyObject)); Document.writeln ("Now:" +json.stringify (newobject)); functionTest () {' Use strict '; Let Obj1= {a:0, b: {c:0}}; Let Obj2=object.assign ({}, obj1); Console.log (Json.stringify (OBJ2)); //{a:0, B: {c:0}}obj1.a= 1; Console.log (Json.stringify (obj1)); //{a:1, B: {c:0}}Console.log (Json.stringify (OBJ2));//{a:0, B: {c:0}}obj2.a= 2; Console.log (Json.stringify (obj1)); //{a:1, B: {c:0}}Console.log (Json.stringify (OBJ2));//{a:2, B: {c:0}}OBJ2.B.C= 3; Console.log (Json.stringify (obj1)); //{a:1, B: {c:3}}Console.log (Json.stringify (OBJ2));//{a:2, B: {c:3}}                    //Deep Clone          //using the JSON method is a deep copy, but JSON securityObj1 = {a:0, b: {c:0}}; Let Obj3=Json.parse (Json.stringify (obj1)); obj1.a= 4; OBJ1.B.C= 4; Console.log (Json.stringify (OBJ3)); //{a:0, B: {c:0}}} test (); </script><!--<script type= "Text/javascript" >//This is a shallow copy, and the variable copy object changes the value of the original object.        vararr = ["One", "one", "three"]; varArrto =arr; arrto[1] = "Test"; Document.writeln ("Original value of the array:" + arr + "<br/>");//Export: Original value of array: One,test,threeDocument.writeln ("New value of the array:" + Arrto + "<br/>");//Export: New value for array: One,test,three</script> <!--<script type= "Text/javascript" >//This is a deep copy, and the change to an existing object does not change the value of the original object             vararr = ["One", "one", "three"]; varArrtoo = Arr.slice (0); arrtoo[1] = "Set Map"; Document.writeln ("Original value of the array:" + arr + "<br/>");//Export: Original value of array: One,two,threeDocument.writeln ("New value of the array:" + Arrtoo + "<br/>");//Export: New value for array: One,set map,three</script>--><!--<script type= "Text/javascript" >//This is a deep copy .         vararr = ["One", "one", "three"]; varArrtooo =Arr.concat (); arrtooo[1] = "Set Map to"; Document.writeln ("Original value of the array:" + arr + "<br/>");//Export: Original value of array: One,two,threeDocument.writeln ("New value of the array:" + arrtooo + "<br/>");//Export: New value for array: One,set Map to,three</script>--><!--<script type= "Text/javascript" >//deep Copy, JSON method is deep copy         varsomeobj={A:A, B:"B", C:C         }         varnewobject=Json.parse (Json.stringify (someobj)); SOMEOBJ.A= "AAAA"; Document.writeln ("Original:" +json.stringify (someobj) + "<br/>"); Document.writeln ("Now:" +json.stringify (newobject) + "<br/>"); //Original: {"a": "AAAA", "B": "B", "C": "C"}        //now: {"A": "A", "B": "B", "C": "C"}</script> </body>

This is just a scratch, and will continue to explore.

Summary: Shallow copy object.assign (),

Deep copy with Json.parse (Json.stringify (someobj));

But make sure that Someobj is JSON-safe and conforms to JSON rules.

Deep copy and shallow copy js, method

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.