Sao chép giá trị của một biến vào một biến khác

Tôi có một biến có đối tượng JSON làm giá trị của nó. Tôi trực tiếp gán biến này cho một số biến khác để chúng có cùng giá trị. Đây là cách nó hoạt động:

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

Điều này hoạt động và cả hai đều có giá trị như nhau. Tôi sử dụng mousemovetrình xử lý sự kiện để cập nhật bứng dụng của mình. Khi nhấp vào nút, tôi muốn hoàn nguyên bvề giá trị ban đầu, nghĩa là giá trị được lưu trữ trong a.

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

Sau đó, nếu tôi sử dụng cùng một mousemovetrình xử lý sự kiện, nó sẽ cập nhật cả hai avà bkhi trước đó nó chỉ cập nhật bnhư mong đợi.

Tôi bối rối về vấn đề này! Có gì sai ở đây?

Điều quan trọng là phải hiểu =toán tử trong JavaScript làm và không làm gì.

Nhà =điều hành không tạo một bản sao của dữ liệu.

Các =nhà điều hành tạo ra một mới tham khảo đến cùng một dữ liệu.

Sau khi bạn chạy mã gốc của mình:

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

avà bbây giờ là hai tên khác nhau cho cùng một đối tượng .

Bất kỳ thay đổi nào bạn thực hiện đối với nội dung của đối tượng này sẽ được nhìn thấy giống hệt nhau cho dù bạn tham chiếu nó thông qua abiến hay bbiến. Chúng là cùng một đối tượng.

Vì vậy, khi bạn cố gắng "hoàn nguyên" bvề ađối tượng ban đầu bằng mã này:

b = a;

Mã thực sự không làm gì cả , bởi vì avà bhoàn toàn giống nhau. Mã giống như khi bạn viết:

b = b;

mà rõ ràng sẽ không làm gì cả.

Tại sao mã mới của bạn hoạt động?

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

Ở đây bạn đang tạo một đối tượng hoàn toàn mới với {...}đối tượng theo nghĩa đen. Đối tượng mới này không giống với đối tượng cũ của bạn. Vì vậy, bây giờ bạn đang đặt blàm tham chiếu đến đối tượng mới này, đối tượng này sẽ thực hiện những gì bạn muốn.

Để xử lý bất kỳ đối tượng tùy ý nào, bạn có thể sử dụng một hàm sao chép đối tượng, chẳng hạn như hàm được liệt kê trong câu trả lời của Armand hoặc vì bạn đang sử dụng jQuery chỉ cần sử dụng $.extend()hàm . Hàm này sẽ tạo bản sao nông hoặc bản sao sâu của một đối tượng. (Đừng nhầm lẫn điều này với $().clone()phương pháp sao chép các phần tử DOM, không phải các đối tượng.)

Đối với một bản sao cạn:

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

Hoặc một bản sao sâu:

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

Sự khác biệt giữa bản sao cạn và bản sao sâu là gì? Một bản sao cạn tương tự như mã của bạn tạo một đối tượng mới với một đối tượng theo nghĩa đen. Nó tạo ra một đối tượng cấp cao nhất mới chứa các tham chiếu đến các thuộc tính giống như đối tượng ban đầu.

Nếu đối tượng của bạn chỉ chứa các kiểu nguyên thủy như số và chuỗi, thì bản sao sâu và bản sao nông sẽ làm chính xác điều tương tự. Nhưng nếu đối tượng của bạn chứa các đối tượng hoặc mảng khác được lồng vào bên trong nó, thì một bản sao cạn sẽ không sao chép các đối tượng lồng nhau đó, nó chỉ tạo ra các tham chiếu đến chúng. Vì vậy, bạn có thể gặp vấn đề tương tự với các đối tượng lồng nhau mà bạn gặp phải với đối tượng cấp cao nhất của mình. Ví dụ, cho đối tượng này:

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

Nếu bạn tạo một bản sao cạn của đối tượng đó, thì thuộc xtính của đối tượng mới của bạn là cùng một xđối tượng từ bản gốc:

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

Bây giờ các đối tượng của bạn sẽ giống như sau:

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

Bạn có thể tránh điều này bằng một bản sao sâu. Bản sao sâu tái diễn vào mọi đối tượng và mảng lồng nhau (và Ngày tháng trong mã của Armand) để tạo bản sao của các đối tượng đó giống như cách nó tạo bản sao của đối tượng cấp cao nhất. Vì vậy, thay đổi copy.x.ysẽ không ảnh hưởng obj.x.y.

Câu trả lời ngắn gọn: Nếu nghi ngờ, bạn có thể muốn có một bản sao sâu.

Tôi thấy việc sử dụng JSON hoạt động nhưng hãy xem các tham chiếu vòng tròn của chúng tôi

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

câu hỏi đã được giải quyết từ khá lâu, nhưng để tham khảo trong tương lai, một giải pháp khả thi là

b = a.slice(0);

Hãy cẩn thận, điều này chỉ hoạt động chính xác nếu a là một mảng số và chuỗi không lồng nhau

newVariable = originalVariable.valueOf();

cho các đối tượng bạn có thể sử dụng, b = Object.assign({},a);

Lý do cho điều này là đơn giản. JavaScript sử dụng các b = atham chiếu , vì vậy khi bạn chỉ định, bạn đang gán một tham chiếu cho bdo đó khi cập nhật, abạn cũng đang cập nhậtb

Tôi đã tìm thấy điều này trên stackoverflow và sẽ giúp ngăn chặn những điều như thế này trong tương lai bằng cách chỉ cần gọi phương thức này nếu bạn muốn tạo bản sao sâu của một đối tượng.

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

Tôi không hiểu tại sao câu trả lời lại phức tạp như vậy. Trong Javascript, các nguyên thủy (chuỗi, số, v.v.) được chuyển theo giá trị và được sao chép. Các đối tượng, bao gồm cả mảng, được truyền bằng tham chiếu. Trong mọi trường hợp, việc gán giá trị mới hoặc tham chiếu đối tượng cho 'a' sẽ không thay đổi 'b'. Nhưng thay đổi nội dung của 'a' sẽ thay đổi nội dung của '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'

Dán bất kỳ dòng nào ở trên (từng dòng một) vào nút hoặc bất kỳ bảng điều khiển javascript nào của trình duyệt. Sau đó, nhập bất kỳ biến nào và bảng điều khiển sẽ hiển thị giá trị của biến đó.

Đối với các chuỗi hoặc giá trị đầu vào, bạn chỉ cần sử dụng điều này:

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

Hầu hết các câu trả lời ở đây là sử dụng các phương pháp có sẵn hoặc sử dụng thư viện / khuôn khổ. Phương pháp đơn giản này sẽ hoạt động tốt:

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 }

Tôi đã tự giải quyết nó trong thời điểm hiện tại. Giá trị gốc chỉ có 2 thuộc tính con. Tôi đã cải cách một đối tượng mới với các thuộc tính từ ađó và sau đó gán nó cho b. Bây giờ trình xử lý sự kiện của tôi chỉ cập nhật bvà bản gốc của tôi avẫn như cũ.

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

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

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

Điều này hoạt động tốt. Tôi đã không thay đổi một dòng nào ở bất kỳ đâu trong mã của mình ngoại trừ phần trên và nó hoạt động theo cách tôi muốn. Vì vậy, hãy tin tôi, không có gì khác đang cập nhật a.

Một giải pháp cho AngularJS :

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