Js object change

let appState = {
    title: {
        text: "React.js ",
        color: "red",
    },
    content: {
        text: "React.js ",
        color: "blue"
    }
}
const oldState = appState
console.log(appState)
appState.title.text = "React.js ";
console.log(oldState !== appState) //false
console.log(oldState != appState) //false

updated the contents of the object, the comparison of the two objects is still the same, such as the printed result, I do not know how to understand?

Jan.25,2022

const oldState = appState;
when assigning a value to a variable, the parser must determine whether the value is primitive type value or reference type .
is accessed by value for basic types, that is, it is assigned and passed by copying with the value.
reference types are accessed by reference, that is, values are assigned and passed through reference replication. When you manipulate an object, you actually manipulate a reference to the object in , not the actual object.
so when you change appState, oldState also changes. The comparison of
objects is different from the primitive type value. Even if two objects are exactly the same, such as two identical arrays, they are not equal. Two variables are equal only if they point to the same object.


difference between shallow and deep copies
const oldState = {.appstate}
console.log (appState)
appState.title.text ='"React.js Book";
console.log (oldState! = = appState) / / false
console.log (oldState! = appState) / / false


is not really a comparison of two objects, but a comparison of references
ECMAScirpt has five basic types (number,string,boolean,null,undefined) and one reference type (object)
if you

var obj1 = {},obj2 = {};  obj1 == obj2 false
 var n = 1, m = n; n PP ; n2m1

basic type assignment creates a new value on the variable, m is a copy of n
. When a variable assigns a value of a reference type to another variable, unlike the basic type, this worthy copy is a pointer to an object stored in heap memory, and both oldState and appState point to the same memory address
reference type takes up more space. So the
is often misused as a copy with a pointer and a variable, but after this "copy", the original value will be affected, so the shallow copy traverses with for in, and the deep copy for in + recursive copy deep

.

this is a problem of reference type and basic type. If you want the result to be different, it is recommended to write a deep copy

.
//p
//cc[],c{}{}
function deepCopy(p,c){
var c = c || {};
for(var i in p){
if(typeof p[i] === "object"){
c[i] = (p[i].constructor === Array)?[]:{};
deepCopy(p[i],c[i])
}else{
c[i] = p[i]
 }
}
return c;
}
Menu