JavaScript shallow copy and deep copy and object and JSON format conversion JSON.stringify, JSON.parse

   shallow copy: For reference types, it means that two reference types point to the same address, changing one will change the other accordingly.


   For example, when the variable value of ku is set to {age : 18}, the variable value of angel points to ku. In the stack memory, the memory address of angel is the same as that of ku. In the heap memory, they are the same object.



insert image description here



   When changing the attribute value of ku age, the attribute value of angel age will also change accordingly.



insert image description here



   deep copy: For reference types, the reference type points to a new memory address after copying, and the changes of the two objects do not affect each other.


   First, a brief introduction to JSON (JavaScript Object Notation) is a general data format for expressing values ​​and objects in JavaScript, and its essence is a string that conforms to certain specifications. Due to the excellent characteristics of JSON, it is very easy to exchange data with other languages, especially in front-end and back-end interactions.


   In the previous blog, I also shared a crawler project case about JS deserialization. Here, the following examples of serialization and deserialization are used to illustrate the difference between deep copy and shallow copy, and then serialization and deserialization will be illustrated in detail. various usages.


   Convert to JSON string format by JSON.stringify (serialization)



insert image description here



   Then assign it to angel through JSON.parse (deserialization). When the ku age changes, the value of angel age remains unchanged. That is to say, in the stack memory and the heap memory, ku and angel have independent memory addresses and object objects, and when changes occur, the two do not affect each other.



insert image description here



   == Note: The assignment of basic types is similar to deep copy, but not deep copy. ==



insert image description here



   Using the JSON.stringify(obj) method will return the JSON string data of the object obj, but the non-data attributes belonging to the JavaScript language itself will be skipped by JSON.stringify, including object methods, Symbol types, and undefined attributes.



   Visible, the output is empty content

insert image description here



   Not all objects can be converted to JSON format. If there is a circular reference between objects, the conversion will fail. The reason for the failure is that the teacher references the student, which in turn references the teacher.



insert image description here



   If you want to convert only the individual properties of the object into JSON format, or display the properties in the loop application, you can pass let json = JSON.stringify(obj[,replacer,space]), where the parameter obj: the object to be encoded; replacer : An array of attributes to be encoded or a mapping function function(k,v); space: the number of spaces used for formatting.



  
insert image description here



   If you want to pass an array in the second parameter, then JSON.stringify will only convert the names in the array to JSON format, so that there is a circular reference in the calculation object, and the format can also be successfully converted.


   If we want to serialize all object properties outside the loop application, we only need to write all the property names of the object into the array, which is also valid for the sub-objects of the object.


   The execution results are as follows, but there is still a problem. If there are too many object properties, the array may be very long and the code will be very lengthy. In this case, the mapping function needs to be used.



insert image description here



   Mapping function:Instead of an array as a replacer, we can create a function that takes (key, value) as a parameter and decides how to serialize the corresponding property.


   For example, when resolving circular references, we exclude reference properties. Since attributes with a value of undefined will be ignored by JSON.stringify, we can easily exclude all unwanted attributes.

insert image description here



   Number of spaces used for formatting:The third parameter spaces of JSON.stringify(value, replacer, spaces) can specify the number of indentation spaces of the JSON string. Commonly used values ​​are 2 and 4. In the above example, the number of indentation spaces is not specified, so the formatted JSON string is unformatted.


   This way the output is indented more clearly



insert image description here



   Custom toJSON method:Like toString, the object's toJSON method will be called during serialization, and we can change the serialization method by overriding this method.


   It can be seen that after rewriting the object's toJSON method, the result of using stringify has changed. We can rewrite the toJSON method according to our needs to achieve the desired results.



insert image description here



   JSON.parse:The example of deserialization was briefly introduced before, and now we will introduce in detail how to convert JSON strings into objects. Syntax: let obj = JSON. parse(str,[reviver]) . str the JSON string to parse; reviver an optional function function(key,value) that will be called for each (key, value) pair, and can transform the value.



insert image description here



   use reviver, For example, when we want to convert the string '{"title":"Conference","date":"2017-11-30T12:00:00.000Z"}' into an object, an error will be reported. The reason is that the date attribute is converted to a string, not a Date object.



insert image description here



   This requires the use of the reviver function to convert date to a Date object:



insert image description here



   receiver can also be used with nested objects



insert image description here

Guess you like

Origin blog.csdn.net/weixin_48591974/article/details/129792650