คัดลอกค่าของตัวแปรไปเป็นค่าอื่น

ฉันมีตัวแปรที่มีออบเจ็กต์ JSON เป็นค่าของมัน ฉันกำหนดตัวแปรนี้ให้กับตัวแปรอื่นโดยตรงเพื่อให้พวกเขาใช้ค่าเดียวกัน นี่คือวิธีการทำงาน:

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

สิ่งนี้ใช้ได้ผลและทั้งสองอย่างมีค่าเท่ากัน ฉันใช้mousemoveตัวจัดการเหตุการณ์เพื่ออัปเดตbผ่านแอปของฉัน เกี่ยวกับการคลิกปุ่มผมต้องการที่จะกลับไปเป็นค่าเดิมที่มีความหมายค่าที่เก็บไว้ในba

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

หลังจากนี้หากฉันใช้mousemoveตัวจัดการเหตุการณ์เดียวกันมันจะอัปเดตทั้งสองอย่างaและbเมื่อก่อนหน้านี้จะอัปเดตbตามที่คาดไว้เท่านั้น

ฉันนิ่งงันกับปัญหานี้! มีอะไรผิดปกติที่นี่?

สิ่งสำคัญคือต้องเข้าใจว่าตัว=ดำเนินการใน JavaScript ทำและไม่ทำอะไร

=ผู้ประกอบการไม่ได้ทำให้สำเนาของข้อมูล

ตัว=ดำเนินการสร้างการอ้างอิงใหม่ไปยังข้อมูลเดียวกัน

หลังจากที่คุณเรียกใช้รหัสเดิมของคุณ:

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

aและbตอนนี้สองชื่อแตกต่างกันสำหรับวัตถุเดียวกัน

การเปลี่ยนแปลงใด ๆ ที่คุณทำกับเนื้อหาของวัตถุนี้จะเห็นเหมือนกันไม่ว่าคุณจะอ้างอิงผ่านaตัวแปรหรือbตัวแปร เป็นวัตถุเดียวกัน

ดังนั้นเมื่อคุณพยายาม "เปลี่ยนกลับ" bเป็นaวัตถุดั้งเดิมในภายหลังด้วยรหัสนี้:

b = a;

รหัสไม่ได้ทำอะไรเลยเพราะaและbเป็นสิ่งเดียวกัน รหัสจะเหมือนกับที่คุณเขียน:

b = b;

ซึ่งเห็นได้ชัดว่าจะไม่ทำอะไรเลย

เหตุใดรหัสใหม่ของคุณจึงใช้งานได้

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

ที่นี่คุณกำลังสร้างออบเจ็กต์ใหม่เอี่ยมด้วย{...}อ็อบเจกต์ลิเทอรัล วัตถุใหม่นี้ไม่เหมือนกับวัตถุเก่าของคุณ ตอนนี้คุณกำลังตั้งค่าbให้อ้างอิงถึงวัตถุใหม่นี้ซึ่งจะทำสิ่งที่คุณต้องการ

เพื่อจัดการกับวัตถุใด ๆ โดยพลคุณสามารถใช้ฟังก์ชั่นการโคลนวัตถุดังกล่าวเป็นหนึ่งที่ระบุไว้ในคำตอบของอาร์มันด์หรือตั้งแต่คุณใช้ jQuery เพียงแค่ใช้ฟังก์ชั่น$.extend() ฟังก์ชันนี้จะสร้างสำเนาตื้นหรือสำเนาลึกของวัตถุ (อย่าสับสนกับ$().clone()วิธีนี้สำหรับการคัดลอกองค์ประกอบ DOM ไม่ใช่วัตถุ)

สำหรับสำเนาตื้น:

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

หรือสำเนาลึก:

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

สำเนาตื้นกับสำเนาลึกต่างกันอย่างไร สำเนาตื้นจะคล้ายกับรหัสของคุณที่สร้างวัตถุใหม่ด้วยตัวอักษรของวัตถุ สร้างอ็อบเจ็กต์ระดับบนสุดใหม่ที่มีการอ้างอิงถึงคุณสมบัติเดียวกันกับอ็อบเจ็กต์ดั้งเดิม

หากออบเจ็กต์ของคุณมีเฉพาะประเภทดั้งเดิมเช่นตัวเลขและสตริงสำเนาลึกและสำเนาตื้นจะทำสิ่งเดียวกันทุกประการ แต่ถ้าวัตถุของคุณมีวัตถุหรืออาร์เรย์อื่น ๆ ที่ซ้อนอยู่ภายในสำเนาตื้น ๆ จะไม่คัดลอกวัตถุที่ซ้อนกันเหล่านั้นเพียงสร้างการอ้างอิงถึงวัตถุเหล่านั้น ดังนั้นคุณอาจมีปัญหาเดียวกันกับวัตถุซ้อนที่คุณมีกับวัตถุระดับบนสุดของคุณ ตัวอย่างเช่นให้วัตถุนี้:

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

หากคุณทำสำเนาวัตถุนั้นแบบตื้นxคุณสมบัติของวัตถุใหม่ของคุณจะเป็นxวัตถุเดียวกันจากต้นฉบับ:

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

ตอนนี้วัตถุของคุณจะมีลักษณะดังนี้:

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

คุณสามารถหลีกเลี่ยงสิ่งนี้ได้ด้วยสำเนาลึก สำเนาแบบลึกจะวนซ้ำในทุกออบเจ็กต์และอาร์เรย์ที่ซ้อนกัน (และวันที่ในรหัสของ Armand) เพื่อทำสำเนาของวัตถุเหล่านั้นในลักษณะเดียวกับที่ทำสำเนาของวัตถุระดับบนสุด ดังนั้นการเปลี่ยนแปลงcopy.x.yจะไม่ส่งผลกระทบobj.x.yจะไม่ส่งผลกระทบต่อ

คำตอบสั้น ๆ : หากมีข้อสงสัยคุณอาจต้องการสำเนาแบบละเอียด

ฉันพบว่าการใช้ JSON ได้ผล แต่ดูการอ้างอิงแบบวงกลม

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

คำถามได้รับการแก้ไขแล้วเนื่องจากค่อนข้างนาน แต่สำหรับการอ้างอิงในอนาคตวิธีแก้ปัญหาที่เป็นไปได้คือ

b = a.slice(0);

โปรดระวังสิ่งนี้จะทำงานได้อย่างถูกต้องก็ต่อเมื่อ a เป็นอาร์เรย์ของตัวเลขและสตริงที่ไม่ซ้อนกัน

newVariable = originalVariable.valueOf();

สำหรับวัตถุที่คุณสามารถใช้ได้ b = Object.assign({},a);

เหตุผลนี้เป็นเรื่องง่าย JavaScript ใช้b = aการอ้างอิงดังนั้นเมื่อคุณกำหนดคุณกำลังกำหนดการอ้างอิงbเมื่อทำการอัปเดตaคุณกำลังอัปเดตด้วยb

ฉันพบสิ่งนี้ใน stackoverflow และจะช่วยป้องกันสิ่งนี้ในอนาคตโดยเพียงแค่เรียกใช้เมธอดนี้หากคุณต้องการทำสำเนาลึกของวัตถุ

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

ฉันไม่เข้าใจว่าทำไมคำตอบจึงซับซ้อนนัก ใน Javascript primitives (สตริงตัวเลข ฯลฯ ) จะถูกส่งผ่านด้วยค่าและคัดลอก ออบเจ็กต์รวมถึงอาร์เรย์จะถูกส่งผ่านโดยการอ้างอิง ไม่ว่าในกรณีใดการกำหนดค่าใหม่หรือการอ้างอิงวัตถุเป็น "a" จะไม่เปลี่ยนแปลง "b" แต่การเปลี่ยนเนื้อหาของ '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'

วางบรรทัดด้านบน (ทีละบรรทัด) ในโหนดหรือคอนโซลจาวาสคริปต์ของเบราว์เซอร์ จากนั้นพิมพ์ตัวแปรใด ๆ และคอนโซลจะแสดงค่า

สำหรับสตริงหรือค่าอินพุตคุณสามารถใช้สิ่งนี้:

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

คำตอบส่วนใหญ่ที่นี่ใช้วิธีการในตัวหรือใช้ไลบรารี / เฟรมเวิร์ก วิธีง่ายๆนี้น่าจะใช้ได้ดี:

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 }

ฉันแก้ไขมันด้วยตัวเองในขณะนี้ ค่าเดิมมีเพียง 2 คุณสมบัติย่อย ผมปฏิรูปวัตถุใหม่ที่มีคุณสมบัติจากนั้นได้รับมอบหมายให้มันa bตอนนี้ตัวจัดการเหตุการณ์ของฉันอัปเดตเท่านั้นbและต้นฉบับของฉันaยังคงเหมือนเดิม

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

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

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

ใช้งานได้ดี ฉันไม่ได้เปลี่ยนบรรทัดเดียวในโค้ดของฉันยกเว้นด้านบนและมันทำงานตามที่ฉันต้องการ ดังนั้นเชื่อฉันไม่มีอะไรอัปเดตaอีก

โซลูชันสำหรับAngularJS :

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