Copier la valeur d'une variable dans une autre

Question

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

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

Cela fonctionne et les deux ont la même valeur. J'utilise un mousemove gestionnaire d'événement pour mettre à jour b dans toute mon application. Lors d'un clic sur un bouton, je veux revenir en arrière. b à la valeur originale, 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 mousemove le gestionnaire d'événement, il met à jour les deux a y b alors qu'auparavant il ne mettait à jour que b comme prévu.

Je suis perplexe face à ce problème ! Quel est le problème ?

Answer 1

Je ne comprends pas pourquoi les réponses sont si complexes. En Javascript, les primitives (chaînes de caractères, nombres, etc.) sont transmises par valeur, et copiées. Les objets, y compris les tableaux, sont transmis par référence. Dans tous les cas, l'affectation d'une nouvelle valeur ou référence d'objet à 'a' ne modifiera pas 'b'. Mais si l'on modifie le contenu de 'a', le contenu de 'b' sera modifié.

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 la console de node ou de n'importe quel navigateur javascript. Ensuite, tapez n'importe quelle variable et la console affichera sa valeur.

Answer 2

La plupart des réponses fournies ici font appel à des méthodes intégrées ou à des bibliothèques/frames. 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 }

Answer 3

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

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

Answer 4

Une solution pour AngularJS :

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

Answer 5

Je l'ai résolu moi-même pour l'instant. La valeur originale n'a que 2 sous-propriétés. J'ai reformé un nouvel objet avec les propriétés de a et l'a ensuite assigné à b . Maintenant, mon gestionnaire d'événements ne met à jour que b et mon original a reste comme il est.

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 bien. Je n'ai pas modifié une seule ligne de mon code, à l'exception de ce qui précède, et cela fonctionne exactement comme je le voulais. Donc, croyez-moi, rien d'autre n'a été mis à jour a .