Detailed explanation of jQuery's copy object

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery.min.js"></script>
    <script>
        $(function() {
            //1, normal copy, shallow copy by default var targetObj = {};
            var obj = {
                id: 1,
                name: "andy"
            };
            $.extend(targetObj, obj); //Copy syntax, copy the attributes and attribute values in obj to targetObj an empty object console.log(targetObj); //The output result is the content of the obj object //2. If there are attributes and attribute values in the copied object var targett = {
                id: 0,
                gshg: 55
            };
            var objrr = {
                id: 1,
                name: "andy"
            };
            $.extend(targett, objrr);
            console.log(targett); // If the properties in the copy object targett are the same as the properties in the copied object objrr, the property values in objrr will overwrite the property values in targett // If the properties in the copy object targett are different from the properties in the copied object objrr, they will not be overwritten, and the properties in the copied object objrr will only come later // 3. Shallow copy when there are objects in the copy object var taytuj = {
                id: 0,
                msg: {
                    sex: 'male'
                }
            };
            var return = {
                id: 1,
                name: "andy",
                msg: {
                    age: 18
                }
            };
            $.extend(true, taytuj, rete);
            console.log(taytuj);
            // Execution process:
            //1. Both objects are in the memory stack, and the msg: {age: 18} object in the rete object is placed in the memory heap. In the shallow copy, the msg: {age: 18} in the rete object will overwrite the msg: {sex: 'male'} of the taytu object, and the attribute value will become a hexadecimal pointing to the msg: {age: 18} object in the memory heap. At this time, the msg of the two objects in the stack space have the same hexadecimal address pointing to the msg: {age: 18} in the memory heap, so if the shallow copy is completed, as long as one of the msg attribute values in the two objects changes, the attribute value of the other msg will also change together. //Shallow copy:
            //1. If the attribute names are the same, the copied object will overwrite the copy object, and the order will always be the last one to come first. //2. If the attribute names are different, they will be merged. //Deep copy:
            //1. If the attribute names are the same, the attributes and attribute values of the copied object will overwrite the attributes and attribute values of the copy object, and the sorting is always from the later to the higher. //2. If the attribute names are different, they will be merged. //3. If the copied object and the object inside the copied object have the same object name but different attribute names, they will be merged instead of overwritten.
        })
    </script>
</head>
<body>
</body>
</html>

Summarize

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!

You may also be interested in:

jQuery uses $.extend(true,object1, object2); to implement deep copy object method analysis
jQuery deep copy Json object simple example
Copying and splitting the value of table data in jQuery
jQuery's $.extend shallow copy and deep copy

<<: Web data storage: Cookie, UserData, SessionStorage, WebSqlDatabase

>>: Solve MySQL startup error: ERROR 2003 (HY000): Can't connect to MySQL server on 'localhost' (10061)