JavaScript object 解构的问题

Question

 let pppp = { name: "duanxiao", age: 1, job: { title: "~~~" } }; let ppppCopy = {}; ({ name: ppppCopy.name, age: ppppCopy.age, job: ppppCopy.job } = pppp); pppp.job.title = "Hacker"; console.log(pppp); console.log(ppppCopy);

The output values are the same.

Why modifying the value of one object, the other object will also be modified?

Whenever I modify the value of one object, the value of the other object is also modified.

Answer 1

In JS, and many other languages, you have data types that store by value, like Number and other primitive types. Some data types stored by reference, like Arrays, Object.

By destructing pppp you just passing the reference to the inner job object, and not duplicating it, so technically its the same job object in pppp and ppppCopy .

Here I added a manipulation to a primitive, and you can see that there is a difference.

 let pppp = { name: "duanxiao", age: 1, job: { title: "~~~" } }; let ppppCopy = {}; ({ name: ppppCopy.name, age: ppppCopy.age, job: ppppCopy.job } = pppp); pppp.job.title = "Hacker"; pppp.age = 123; console.log(pppp); console.log(ppppCopy);

Here is another good answer related

Answer 2

Because you pppp and ppppCopy holds the same reference of job property. Changing at one location will impact another. You can achieve your intended outcome with below code using ES6 spread operator,

let pppp = {
    name: "duanxiao",
    age: 1,
    job: {
        title: "~~~"
    }
};

const ppppCopy = {
  ...pppp,
  job: { ...pppp.job },
};

With this, updating pppp.job.title will not impact ppppCopy.job.title .

You can also use the traditional way like JSON.parse(JSON.stringify(pppp)) , but you need to be more cautious while using this approach as it strips down the function property

Answer 3

The only way is to use JSON.parse(JSON.stringify(pppp));

    name: "duanxiao",
    age: 1,
    job: {
        title: "~~~"
    }
};
let ppppCopy = JSON.parse(JSON.stringify(pppp));



pppp.job.title = "Hacker";

console.log(pppp);
console.log(ppppCopy);

Answer 4

Since objects are non-primitive data types javascript makes a reference of the original object when you make a copy using the assignment operator as you have done in your case. In order to avoid shallow copying you can use the spread operator ie let copy = {...original} or you can use the assign method ie let copy = Object.assign({}, original) but both of these fail when you have a nested object. In order to deep copy a nested object you need to do it as Edoardo pointed out above but that will fail too when there is a function in your object. Ravindra's method can also be used, but it will be a hassle when you have multiple nested objects.

The best way to do it in my opinion is to use lodash _.cloneDeep() method. You can read more about it here