La modification d'une copie d'un objet JavaScript entraîne la modification de l'objet d'origine

Question

Je copie objA dans objB

const objA = { prop: 1 },
const objB = objA ;
objB.prop = 2;
console.log(objA.prop); // enregistre 2 au lieu de 1

Les tableaux ont également le même problème

const arrA = [1, 2, 3],
const arrB = arrA;
arrB.push(4);
console.log(arrA.length); // `arrA` a 4 éléments au lieu de 3.

Answer 1

Pour résumer, juste pour clarifier, il existe quatre façons de copier un objet JS.

1. Copie normale. Lorsque vous modifiez les propriétés de l'objet d'origine, les propriétés de l'objet copié changent également (et vice versa).

const a = { x: 0}
const b = a;
b.x = 1; // also updates a.x

2. Copie superficielle. Les propriétés de niveau supérieur des objets originaux et copiés seront uniques. Toutefois, les propriétés imbriquées seront partagées entre les deux objets. Utilisez l'opérateur de spread ...{} 或 Object.assign().

const a = { x: 0, y: { z: 0 } };
const b = {...a}; // or const b = Object.assign({}, a);

b.x = 1; // doesn't update a.x
b.y.z = 1; // also updates a.y.z

3. Copie approfondie. Toutes les propriétés sont uniques aux objets d'origine et copiés, même les propriétés imbriquées. Pour une copie complète, sérialisez l'objet en JSON et analysez-le à nouveau dans un objet JS.

const a = { x: 0, y: { z: 0 } };
const b = JSON.parse(JSON.stringify(a)); 

b.y.z = 1; // doesn't update a.y.z

4. Copie complète complète. En utilisant la technique ci-dessus, les valeurs de propriété non valides (telles que les fonctions) dans JSON sont ignorées. Si vous avez besoin de copier en profondeur et de conserver les propriétés imbriquées contenant des fonctions, vous souhaiterez peut-être consulter une bibliothèque d'utilitaires comme lodash .

import { cloneDeep } from "lodash"; 
const a = { x: 0, y: { z: (a, b) => a + b } };
const b = cloneDeep(a);

console.log(b.y.z(1, 2)); // returns 3

5. Utilisez Object.create()确实创建了一个新对象。这些属性在对象之间共享（更改其中一个也会更改另一个）。与普通副本的区别在于，属性被添加到新对象的原型 __proto__ ci-dessous. Cela peut également être utilisé comme une copie superficielle lorsque vous jamais modifiez l'objet d'origine, mais je vous recommande d'utiliser l'une des méthodes ci-dessus, sauf si vous avez spécifiquement besoin de ce comportement.

Answer 2

De toute évidence, vous avez un malentendu sur ce que fait la déclaration var tempMyObj = myObj;.

En JavaScript, les objets sont passés et alloués par référence (plus précisément, la valeur de la référence), donc tempMyObj 和 myObj sont toutes des références au même objet.

Voici une illustration simplifiée pour vous aider à visualiser ce qui se passe

// [Object1]<--------- myObj

var tempMyObj = myObj;

// [Object1]<--------- myObj
//         ^ 
//         |
//         ----------- tempMyObj

Comme vous pouvez le voir après le devoir, les deux références pointent vers le même objet.

Si vous devez modifier l'un mais pas l'autre, vous devez créer une copie.

// [Object1]<--------- myObj

const tempMyObj = Object.assign({}, myObj);

// [Object1]<--------- myObj
// [Object2]<--------- tempMyObj

Ancienne réponse :

Voici quelques autres façons de créer des copies d'objets

Puisque vous utilisez déjà jQuery :

var newObject = jQuery.extend(true, {}, myObj);

Utilisez du JavaScript simple

function clone(obj) {
    if (null == obj || "object" != typeof obj) return obj;
    var copy = obj.constructor();
    for (var attr in obj) {
        if (obj.hasOwnProperty(attr)) copy[attr] = obj[attr];
    }
    return copy;
}

var newObject = clone(myObj);

Voir ici et ici