Skopiuj wartość zmiennej do innej

Mam zmienną, której wartością jest obiekt JSON. Bezpośrednio przypisuję tę zmienną do innej zmiennej, aby miały tę samą wartość. Tak to działa:

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

To działa i oba mają tę samą wartość. Używam programu mousemoveobsługi zdarzeń do aktualizacji bza pośrednictwem mojej aplikacji. Po kliknięciu przycisku chcę przywrócić bpierwotną wartość, czyli wartość przechowywaną w a.

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

Następnie, jeśli używam tego samego programu mousemoveobsługi zdarzeń, aktualizuje on oba, aa bwcześniej aktualizował tylko bzgodnie z oczekiwaniami.

Jestem zaskoczony tym problemem! Co tu jest nie tak?

Ważne jest, aby zrozumieć, co robi =operator w JavaScript, a czego nie.

=Operator nie robi kopii danych.

=Operator tworzy nowe odniesienie do samego danych.

Po uruchomieniu oryginalnego kodu:

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

ai bsą teraz dwiema różnymi nazwami dla tego samego obiektu .

Wszelkie zmiany wprowadzone w zawartości tego obiektu będą widoczne identycznie, niezależnie od tego, czy odwołujesz się do niego za pośrednictwem azmiennej, czy bzmiennej. To ten sam obiekt.

Tak więc, gdy później spróbujesz „przywrócić” boryginalny aobiekt za pomocą tego kodu:

b = a;

Kod właściwie nic nie robi , ponieważ ai bsą dokładnie tym samym. Kod jest taki sam, jak gdybyś napisał:

b = b;

co oczywiście nic nie da.

Dlaczego twój nowy kod działa?

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

Tutaj tworzysz zupełnie nowy obiekt z {...}literałem obiektu. Ten nowy obiekt nie jest tym samym, co stary obiekt. Więc teraz ustawiasz bjako odniesienie do tego nowego obiektu, który robi to, co chcesz.

Aby obsłużyć dowolny obiekt, możesz użyć funkcji klonowania obiektu, takiej jak ta wymieniona w odpowiedzi Armanda, lub ponieważ używasz jQuery, po prostu użyj tej $.extend()funkcji . Ta funkcja utworzy płytką kopię lub głęboką kopię obiektu. (Nie myl tego z $().clone()metodą kopiowania elementów DOM, a nie obiektów).

W przypadku płytkiej kopii:

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

Lub głęboka kopia:

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

Jaka jest różnica między płytką kopią a głęboką kopią? Płytka kopia jest podobna do kodu, który tworzy nowy obiekt z literałem obiektu. Tworzy nowy obiekt najwyższego poziomu zawierający odniesienia do tych samych właściwości, co oryginalny obiekt.

Jeśli twój obiekt zawiera tylko prymitywne typy, takie jak liczby i łańcuchy, głęboka kopia i płytka kopia zrobią dokładnie to samo. Ale jeśli twój obiekt zawiera inne obiekty lub tablice zagnieżdżone w nim, to płytka kopia nie kopiuje tych zagnieżdżonych obiektów, a jedynie tworzy do nich odniesienia. Więc możesz mieć ten sam problem z zagnieżdżonymi obiektami, który miałeś z obiektem najwyższego poziomu. Na przykład biorąc pod uwagę ten obiekt:

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

Jeśli zrobisz płytką kopię tego obiektu, wówczas xwłaściwość nowego obiektu będzie taka sama xjak oryginalnego:

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

Teraz twoje obiekty będą wyglądać tak:

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

Możesz tego uniknąć dzięki głębokiej kopii. Głęboka kopia powtarza się do każdego zagnieżdżonego obiektu i tablicy (oraz daty w kodzie Armanda), aby utworzyć kopie tych obiektów w ten sam sposób, w jaki utworzyła kopię obiektu najwyższego poziomu. Więc zmiana copy.x.ynie wpłynie obj.x.y.

Krótka odpowiedź: w razie wątpliwości prawdopodobnie potrzebujesz głębokiej kopii.

Odkryłem, że używanie JSON działa, ale uważaj na nasze odwołania cykliczne

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

pytanie zostało już rozwiązane od dłuższego czasu, ale w przyszłości możliwe jest rozwiązanie

b = a.slice(0);

Uważaj, to działa poprawnie tylko wtedy, gdy a jest niezagnieżdżoną tablicą liczb i ciągów

newVariable = originalVariable.valueOf();

dla przedmiotów, których możesz użyć, b = Object.assign({},a);

Powód jest prosty. JavaScript używa referencji, więc kiedy przypisujesz b = a, przypisujesz odwołanie, bwięc podczas aktualizacji arównież aktualizujeszb

Znalazłem to na stackoverflow i pomogę zapobiec takim sytuacjom w przyszłości, po prostu wywołując tę ​​metodę, jeśli chcesz wykonać głęboką kopię obiektu.

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

Nie rozumiem, dlaczego odpowiedzi są tak złożone. W Javascript prymitywy (łańcuchy, liczby itp.) Są przekazywane przez wartość i kopiowane. Obiekty, w tym tablice, są przekazywane przez odwołanie. W każdym razie przypisanie nowej wartości lub odniesienia do obiektu do „a” nie zmieni „b”. Ale zmiana zawartości „a” zmieni zawartość „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'

Wklej dowolną z powyższych linii (pojedynczo) do węzła lub dowolnej konsoli javascript przeglądarki. Następnie wpisz dowolną zmienną, a konsola pokaże jej wartość.

W przypadku ciągów lub wartości wejściowych możesz po prostu użyć tego:

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

Większość odpowiedzi tutaj wykorzystuje wbudowane metody lub biblioteki / frameworki. Ta prosta metoda powinna działać dobrze:

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 }

Na razie sam to rozwiązałem. Oryginalna wartość ma tylko 2 właściwości podrzędne. Zreformowałem nowy obiekt z właściwościami od, aa następnie przypisałem go do b. Teraz mój program obsługi zdarzeń aktualizuje się tylko b, a mój oryginał apozostaje taki, jaki jest.

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

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

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

To działa dobrze. Nie zmieniłem ani jednej linii w moim kodzie poza powyższym i działa tak, jak chciałem. Więc zaufaj mi, nic innego się nie aktualizowało a.

Rozwiązanie dla AngularJS :

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