Copie o valor de uma variável para outra

Eu tenho uma variável que tem um objeto JSON como valor. Eu atribuo essa variável diretamente a alguma outra variável para que elas compartilhem o mesmo valor. É assim que funciona:

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

Isso funciona e ambos têm o mesmo valor. Eu uso um mousemovemanipulador de eventos para atualizar bmeu aplicativo. Com um clique de botão, desejo reverter bpara o valor original, ou seja, o valor armazenado em a.

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

Depois disso, se eu usar o mesmo mousemovemanipulador de eventos, ele atualiza ambos ae b, quando antes, ele estava atualizando apenas bconforme o esperado.

Estou perplexo com esse problema! O que há de errado aqui?

É importante entender o que o =operador em JavaScript faz e o que não faz.

O =operador não faz uma cópia dos dados.

O =operador cria uma nova referência para os mesmos dados.

Depois de executar seu código original:

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

ae bagora são dois nomes diferentes para o mesmo objeto .

Qualquer alteração que você fizer no conteúdo deste objeto será vista de forma idêntica, quer você faça referência a ela por meio da avariável ou dob variável. Eles são o mesmo objeto.

Então, quando você tentar "reverter" mais tarde bpara o aobjeto original com este código:

b = a;

O código realmente não faz nada , porque ae bsão exatamente a mesma coisa. O código é o mesmo que se você tivesse escrito:

b = b;

que obviamente não fará nada.

Por que seu novo código funciona?

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

Aqui você está criando um novo objeto com o {...}literal de objeto. Este novo objeto não é igual ao antigo. Portanto, agora você está definindo bcomo referência este novo objeto, que faz o que você deseja.

Para lidar com qualquer objeto arbitrário, você pode usar uma função de clonagem de objeto como a listada na resposta de Armand ou, já que está usando jQuery, apenas use a $.extend()função . Esta função fará uma cópia superficial ou profunda de um objeto. (Não confunda isso com o $().clone()método que é para copiar elementos DOM, não objetos.)

Para uma cópia superficial:

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

Ou uma cópia profunda:

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

Qual é a diferença entre uma cópia superficial e uma cópia profunda? Uma cópia superficial é semelhante ao seu código que cria um novo objeto com um literal de objeto. Ele cria um novo objeto de nível superior contendo referências às mesmas propriedades do objeto original.

Se o seu objeto contém apenas tipos primitivos, como números e strings, uma cópia profunda e uma cópia superficial farão exatamente a mesma coisa. Mas se o seu objeto contém outros objetos ou matrizes aninhados dentro dele, então uma cópia superficial não copia esses objetos aninhados, apenas cria referências a eles. Portanto, você pode ter o mesmo problema com objetos aninhados que teve com seu objeto de nível superior. Por exemplo, dado este objeto:

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

Se você fizer uma cópia superficial desse objeto, a xpropriedade do seu novo objeto será o mesmo xobjeto do original:

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

Agora seus objetos ficarão assim:

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

Você pode evitar isso com uma cópia profunda. A cópia profunda recorre em cada objeto e matriz aninhados (e Data no código de Armand) para fazer cópias desses objetos da mesma forma que fez uma cópia do objeto de nível superior. Portanto, a mudança copy.x.ynão afetariaobj.x.y .

Resposta curta: em caso de dúvida, você provavelmente deseja uma cópia profunda.

Descobri que usar JSON funciona, mas observe nosso para referências circulares

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

a questão já está resolvida há muito tempo, mas para referência futura uma possível solução é

b = a.slice(0);

Tenha cuidado, isso funciona corretamente apenas se a for uma matriz não aninhada de números e strings

newVariable = originalVariable.valueOf();

para objetos que você pode usar, b = Object.assign({},a);

A razão para isso é simples. JavaScript usa referências, então, quando você atribui b = auma referência b, avocê também está atualizandob

Eu encontrei isso no stackoverflow e ajudarei a evitar coisas como essa no futuro apenas chamando esse método se você quiser fazer uma cópia profunda de um 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.");
}

Não entendo por que as respostas são tão complexas. Em Javascript, primitivos (strings, números, etc) são passados ​​por valor e copiados. Objetos, incluindo matrizes, são passados ​​por referência. Em qualquer caso, a atribuição de um novo valor ou referência de objeto a 'a' não mudará 'b'. Mas alterar o conteúdo de 'a' mudará o conteúdo 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'

Cole qualquer uma das linhas acima (uma de cada vez) no nó ou em qualquer console javascript do navegador. Em seguida, digite qualquer variável e o console mostrará seu valor.

Para strings ou valores de entrada, você pode simplesmente usar isto:

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

A maioria das respostas aqui está usando métodos integrados ou usando bibliotecas / estruturas. Este método simples deve funcionar bem:

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 }

Eu mesmo resolvi por enquanto. O valor original tem apenas 2 subpropriedades. Reformulei um novo objeto com as propriedades de ae atribuí a ele b. Agora, meu manipulador de eventos é atualizado apenas be o 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 };
});

Isso funciona bem. Eu não mudei uma única linha em qualquer lugar do meu código, exceto a acima, e funciona exatamente como eu queria. Então, acredite em mim, nada mais estava atualizando a.

Uma solução para AngularJS :

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