Copiar el valor de una variable en otra

Tengo una variable que tiene un objeto JSON como valor. Asigno directamente esta variable a alguna otra variable para que compartan el mismo valor. Así es como funciona:

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

Esto funciona y ambos tienen el mismo valor. Utilizo un mousemovecontrolador de eventos para actualizar bmi aplicación. Al hacer clic en un botón, quiero volver bal valor original, es decir, el valor almacenado en a.

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

Después de esto, si uso el mismo mousemovecontrolador de eventos, actualiza ambos ay b, cuando antes, se actualizaba solo bcomo se esperaba.

¡Estoy perplejo por este problema! ¿Que esta mal aquí?

Es importante comprender qué =hace y qué no hace el operador en JavaScript.

El =operador no realiza una copia de los datos.

El =operador crea una nueva referencia a los mismos datos.

Después de ejecutar su código original:

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

ay bahora son dos nombres diferentes para el mismo objeto .

Cualquier cambio que realice en el contenido de este objeto se verá de manera idéntica ya sea que haga referencia a él a través de la avariable o la bvariable. Son el mismo objeto.

Entonces, cuando más tarde intente "volver" bal aobjeto original con este código:

b = a;

El código en realidad no hace nada en absoluto , porque ay bson exactamente lo mismo. El código es el mismo que si hubiera escrito:

b = b;

que obviamente no hará nada.

¿Por qué funciona tu nuevo código?

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

Aquí está creando un objeto nuevo con el {...}objeto literal. Este nuevo objeto no es el mismo que su antiguo objeto. Así que ahora estás configurandob como referencia a este nuevo objeto, que hace lo que quiere.

Para manejar cualquier objeto arbitrario, puede usar una función de clonación de objetos como la que se enumera en la respuesta de Armand, o como está usando jQuery, simplemente use la $.extend()función . Esta función hará una copia superficial o una copia profunda de un objeto. (No confunda esto con el $().clone()método que es para copiar elementos DOM, no objetos).

Para una copia superficial:

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

O una copia profunda:

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

¿Cuál es la diferencia entre una copia superficial y una profunda? Una copia superficial es similar a su código que crea un nuevo objeto con un objeto literal. Crea un nuevo objeto de nivel superior que contiene referencias a las mismas propiedades que el objeto original.

Si su objeto contiene solo tipos primitivos como números y cadenas, una copia profunda y una copia superficial harán exactamente lo mismo. Pero si su objeto contiene otros objetos o matrices anidadas dentro de él, entonces una copia superficial no copia esos objetos anidados, simplemente crea referencias a ellos. Entonces, podría tener el mismo problema con los objetos anidados que tenía con su objeto de nivel superior. Por ejemplo, dado este objeto:

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

Si hace una copia superficial de ese objeto, entonces la xpropiedad de su nuevo objeto es el mismo xobjeto del original:

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

Ahora sus objetos se verán así:

// 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
    }
};

Puede evitar esto con una copia profunda. La copia profunda se repite en cada objeto y matriz anidados (y Fecha en el código de Armand) para hacer copias de esos objetos de la misma manera que hizo una copia del objeto de nivel superior. Así que cambiar copy.x.yno afectaría obj.x.y.

Respuesta corta: en caso de duda, probablemente desee una copia detallada.

Encontré que usar JSON funciona, pero observe nuestras referencias circulares

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

la pregunta ya está resuelta desde hace bastante tiempo, pero para referencia futura una posible solución es

b = a.slice(0);

Tenga cuidado, esto funciona correctamente solo si a es una matriz no anidada de números y cadenas

newVariable = originalVariable.valueOf();

para los objetos que puedes usar, b = Object.assign({},a);

La razón de esto es simple. JavaScript usa referencias, por lo que cuando asigna b = a, está asignando una referencia a, por lo btanto, al actualizar a, también está actualizandob

Encontré esto en stackoverflow y ayudaré a prevenir cosas como esta en el futuro simplemente llamando a este método si desea hacer una copia profunda de un objeto.

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.");
}

No entiendo por qué las respuestas son tan complejas. En Javascript, las primitivas (cadenas, números, etc.) se pasan por valor y se copian. Los objetos, incluidas las matrices, se pasan por referencia. En cualquier caso, la asignación de un nuevo valor o referencia de objeto a 'a' no cambiará 'b'. Pero cambiar el contenido de 'a' cambiará el contenido 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'

Pegue cualquiera de las líneas anteriores (una a la vez) en el nodo o en cualquier consola javascript del navegador. Luego escriba cualquier variable y la consola mostrará su valor.

Para cadenas o valores de entrada, simplemente puede usar esto:

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

La mayoría de las respuestas aquí usan métodos integrados o bibliotecas / marcos. Este método simple debería funcionar bien:

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 }

Lo resolví yo mismo por el momento. El valor original tiene solo 2 subpropiedades. Reformé un nuevo objeto con las propiedades de ay luego se lo asigné b. Ahora mi controlador de eventos solo se actualiza b, y mi original apermanece como 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 };
});

Esto funciona bien. No he cambiado una sola línea en ningún lugar de mi código, excepto lo anterior, y funciona exactamente como quería. Entonces, créame, nada más se estaba actualizando a.

Una solución para AngularJS :

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