Copier la valeur d'une variable dans une autre

J'ai une variable qui a un objet JSON comme valeur. J'attribue directement cette variable à une autre variable afin qu'elles partagent la même valeur. Voilà comment cela fonctionne:

var a = $('#some_hidden_var').val(),
    b = a;

Cela fonctionne et les deux ont la même valeur. J'utilise un mousemovegestionnaire d'événements pour mettre à jour bmon application. Lors d'un clic sur un bouton, je souhaite revenir bà la valeur d'origine, c'est-à-dire à la valeur stockée dans a.

$('#revert').on('click', function(e){
    b = a;
});

Après cela, si j'utilise le même mousemovegestionnaire d'événements, il met à jour les deux aet b, auparavant, il ne se mettait à jour que bcomme prévu.

Je suis perplexe sur ce problème! Quel est le problème ici?

Il est important de comprendre ce que =fait et ne fait pas l' opérateur JavaScript.

L' =opérateur ne fait pas de copie des données.

L' =opérateur crée une nouvelle référence aux mêmes données.

Après avoir exécuté votre code d'origine:

var a = $('#some_hidden_var').val(),
    b = a;

aet bsont maintenant deux noms différents pour le même objet .

Toute modification que vous apportez au contenu de cet objet sera vue de la même manière que vous le référeniez via la avariable ou la bvariable. Ce sont le même objet.

Ainsi, lorsque vous essayez plus tard de "revenir" bà l' aobjet d' origine avec ce code:

b = a;

Le code ne fait rien du tout , car aet bsont exactement la même chose. Le code est le même que si vous aviez écrit:

b = b;

qui évidemment ne fera rien.

Pourquoi votre nouveau code fonctionne-t-il?

b = { key1: a.key1, key2: a.key2 };

Ici, vous créez un tout nouvel objet avec le {...}littéral objet. Ce nouvel objet n'est pas le même que votre ancien objet. Vous définissez donc maintenant bcomme référence ce nouvel objet, qui fait ce que vous voulez.

Pour gérer n'importe quel objet arbitraire, vous pouvez utiliser une fonction de clonage d'objet telle que celle répertoriée dans la réponse d'Armand, ou puisque vous utilisez jQuery, utilisez simplement la $.extend()fonction . Cette fonction fera une copie superficielle ou une copie profonde d'un objet. (Ne confondez pas cela avec la $().clone()méthode qui consiste à copier des éléments DOM, pas des objets.)

Pour une copie superficielle:

b = $.extend( {}, a );

Ou une copie complète:

b = $.extend( true, {}, a );

Quelle est la différence entre une copie superficielle et une copie profonde? Une copie superficielle est similaire à votre code qui crée un nouvel objet avec un littéral d'objet. Il crée un nouvel objet de niveau supérieur contenant des références aux mêmes propriétés que l'objet d'origine.

Si votre objet ne contient que des types primitifs tels que des nombres et des chaînes, une copie profonde et une copie superficielle feront exactement la même chose. Mais si votre objet contient d'autres objets ou tableaux imbriqués à l'intérieur, alors une copie superficielle ne copie pas ces objets imbriqués, elle crée simplement des références à eux. Vous pourriez donc avoir le même problème avec les objets imbriqués que vous aviez avec votre objet de niveau supérieur. Par exemple, étant donné cet objet:

var obj = {
    w: 123,
    x: {
        y: 456,
        z: 789
    }
};

Si vous faites une copie superficielle de cet objet, alors la xpropriété de votre nouvel objet est le même xobjet que l'original:

var copy = $.extend( {}, obj );
copy.w = 321;
copy.x.y = 654;

Maintenant, vos objets ressembleront à ceci:

// copy looks as expected
var copy = {
    w: 321,
    x: {
        y: 654,
        z: 789
    }
};

// But changing copy.x.y also changed obj.x.y!
var obj = {
    w: 123,  // changing copy.w didn't affect obj.w
    x: {
        y: 654,  // changing copy.x.y also changed obj.x.y
        z: 789
    }
};

Vous pouvez éviter cela avec une copie complète. La copie profonde est récursée dans chaque objet et tableau imbriqués (et Date dans le code d'Armand) pour faire des copies de ces objets de la même manière qu'elle a fait une copie de l'objet de niveau supérieur. Donc changer copy.x.yn'affecterait pas obj.x.y.

Réponse courte: en cas de doute, vous voulez probablement une copie complète.

J'ai trouvé que l'utilisation de JSON fonctionne mais surveillez nos références circulaires

var newInstance = JSON.parse(JSON.stringify(firstInstance));

la question est déjà résolue depuis assez longtemps, mais pour référence future une solution possible est

b = a.slice(0);

Attention, cela ne fonctionne correctement que si a est un tableau non imbriqué de nombres et de chaînes

newVariable = originalVariable.valueOf();

pour les objets que vous pouvez utiliser, b = Object.assign({},a);

La raison en est simple. JavaScript utilise des références, donc lorsque vous affectez, b = avous attribuez une référence à bainsi lors de la mise à jour, avous mettez également à jourb

J'ai trouvé cela sur stackoverflow et je vais aider à éviter des choses comme celle-ci à l'avenir en appelant simplement cette méthode si vous souhaitez faire une copie complète d'un objet.

function clone(obj) {
    // Handle the 3 simple types, and null or undefined
    if (null == obj || "object" != typeof obj) return obj;

    // Handle Date
    if (obj instanceof Date) {
        var copy = new Date();
        copy.setTime(obj.getTime());
        return copy;
    }

    // Handle Array
    if (obj instanceof Array) {
        var copy = [];
        for (var i = 0, len = obj.length; i < len; i++) {
            copy[i] = clone(obj[i]);
        }
        return copy;
    }

    // Handle Object
    if (obj instanceof Object) {
        var copy = {};
        for (var attr in obj) {
            if (obj.hasOwnProperty(attr)) copy[attr] = clone(obj[attr]);
        }
        return copy;
    }

    throw new Error("Unable to copy obj! Its type isn't supported.");
}

Je ne comprends pas pourquoi les réponses sont si complexes. En Javascript, les primitives (chaînes, nombres, etc.) sont passées par valeur et copiées. Les objets, y compris les tableaux, sont passés par référence. Dans tous les cas, l'attribution d'une nouvelle valeur ou référence d'objet à «a» ne changera pas «b». Mais changer le contenu de «a» changera le contenu de «b».

var a = 'a'; var b = a; a = 'c'; // b === 'a'

var a = {a:'a'}; var b = a; a = {c:'c'}; // b === {a:'a'} and a = {c:'c'}

var a = {a:'a'}; var b = a; a.a = 'c'; // b.a === 'c' and a.a === 'c'

Collez l'une des lignes ci-dessus (une à la fois) dans le nœud ou dans n'importe quelle console javascript du navigateur. Tapez ensuite n'importe quelle variable et la console affichera sa valeur.

Pour les chaînes ou les valeurs d'entrée, vous pouvez simplement utiliser ceci:

var a = $('#some_hidden_var').val(),
b = a.substr(0);

La plupart des réponses ici utilisent des méthodes intégrées ou des bibliothèques / frameworks. Cette méthode simple devrait fonctionner correctement:

function copy(x) {
    return JSON.parse( JSON.stringify(x) );
}

// Usage
var a = 'some';
var b = copy(a);
a += 'thing';

console.log(b); // "some"

var c = { x: 1 };
var d = copy(c);
c.x = 2;

console.log(d); // { x: 1 }

Je l'ai résolu moi-même pour le moment. La valeur d'origine n'a que 2 sous-propriétés. J'ai reformé un nouvel objet avec les propriétés de a, puis je l'ai attribué b. Désormais, mon gestionnaire d'événements est mis à jour uniquement bet mon original areste tel quel.

var a = { key1: 'value1', key2: 'value2' },
    b = a;

$('#revert').on('click', function(e){
    //FAIL!
    b = a;

    //WIN
    b = { key1: a.key1, key2: a.key2 };
});

Cela fonctionne très bien. Je n'ai changé aucune ligne n'importe où dans mon code à l'exception de ce qui précède, et cela fonctionne exactement comme je le voulais. Alors, croyez-moi, rien d'autre n'a été mis à jour a.

Une solution pour AngularJS :

$scope.targetObject = angular.copy($scope.sourceObject)