奇怪的數組鏡像問題

Question

我有兩個數組，它們都被來自發布請求的數據填充。

這樣做的目的是，當對「活」數組進行更改時，它們將與「原始」數組進行比較，以便可以發現更改。

這是帖子：

$('#dialogs').load('views/Products/managePicsDialog.php', function(){ 
     var imageArray = []; 
     var originalImageArray = []; 
     $('#managePicsDialog').modal(); 
     productId = 1; 
     $.post(ROOT+'products/fetch-thumbnails', 'pid='+productId, function(data){ 
      imageArray = originalImageArray = data; 
      nextPriority = imageArray.length+1; 
      renderImageList(imageArray); 
     }, 'json') 
... 

起初，我想這將是罰款，data被投入imageArray和originalImageArray。

縱觀我的代碼，originalImageArray根本沒有被觸及，只有imageArray被操縱和改變。

現在，當它涉及到比較陣列，似乎originalImageArray副本imageArray每個我不明白變化的原因：

function saveChanges(imageArray, originalImageArray) 
{ 
    $.each(originalImageArray, function(i, obj){ 
     $.each(obj, function(i2, v){ 
      if(imageArray[i][i2] != v) 
      { 
       alert('changed') // Never happens 
      } 
     }) 
    }) 
} 

如果我「提醒每個」兩個陣列中的值清楚地顯示覆制彼此，即使我的代碼中沒有指出originalImageArray = imageArray除了在我的$.post方法中只有在打開對話框時才被調用一次的地方。

任何人都可以爲我解決這個問題嗎？

---

數組的內容是對象。

---

以下是完整的代碼，以幫助澄清：

$('#productGrid').on('click', '#managePics', function(e){ // When managepics option is clicked 
    e.preventDefault(); // Don't go to the hyperlink... 
    closeMenu(); // Close the popup menu... 
    $('#dialogs').load('views/Products/managePicsDialog.php', function(){ 
     var imageArray = []; 
     var originalImageArray = []; 
     $('#managePicsDialog').modal(); 
     productId = 1; 
     $.post(ROOT+'products/fetch-thumbnails', 'pid='+productId, function(data){ 
      imageArray = data; 
      originalImageArray = data.slice(0); 
      nextPriority = imageArray.length+1; 
      renderImageList(imageArray); 
     }, 'json') 

     $('#fileUpload').fileupload({ 
      url: ROOT+'UploadHandler', 
      process: [ 
      { 
       maxFileSize: 2000000000 
      } 
      ], 
      progressInterval: 50, 
      add: function(e, data) 
      { 
       data.submit(); 
      }, 
      progressall: function (e, data) { 
       var progress = parseInt(data.loaded/data.total * 100, 10); 
       $('#progress .bar').css('width', progress + '%').html(progress+'%'); 
      }, 
      done: function(e, data) 
      { 
       n = $.parseJSON(data.result) 
       pushed = { 
        "id": "0", 
        "priority": nextPriority, 
        "thumb": n.files[0].thumbnail_url, 
        "deleted": 0 
       } 
       imageArray.push(pushed); 

       renderImageList(imageArray); 
      } 
     }); 
     $('#thumbnails').on('click', 'button.delete', function(e){ 
      $(this).closest('.span8').fadeOut('fast', function(){ 
       $(this).detach(); 
      }); 
      idx = $(this).closest('.span8').data('index'); 
      deleteImage(imageArray, idx) 
     }) 
     $('#managePicsDialog').on('click', '.move-down:not(.disabled)', function(){ 
      idx = $(this).closest('.span8').data('index'); 
      if(imageArray[idx+1]) 
      { 
       temp = imageArray[idx+1]; 
       imageArray[idx+1] = imageArray[idx]; 
      } else { 
       temp = imageArray[0]; 
       imageArray[0] = imageArray[idx]; 
      } 
      imageArray[idx] = temp; 
      renderImageList(imageArray) 
     }) 
     $('#managePicsDialog').on('click', '.move-up:not(.disabled)', function(){ 
      idx = $(this).closest('.span8').data('index'); 
      if(imageArray[idx-1]) 
      { 
       temp = imageArray[idx-1]; 
       imageArray[idx-1] = imageArray[idx]; 
      } else { 
       temp = imageArray[imageArray.length-1]; 
       imageArray[imageArray.length-1] = imageArray[idx]; 
      } 
      imageArray[idx] = temp; 
      renderImageList(imageArray) 
     }) 
     $('#cancelChanges').click(cancelChanges) 
     $('#saveChanges').click(function(){ 
      saveChanges(imageArray, originalImageArray) 
     }) 
    })// Close dialog 

}) 

function saveChanges(imageArray, originalImageArray) 
{ 
    // commitChanges(imageArray) 

    $.each(originalImageArray, function(i, obj){ 
     $.each(obj, function(i2, v){ 
      alert(i2+' => '+v) 
     }) 
    }) 
    $.each(imageArray, function(i, obj){ 
     $.each(obj, function(i2, v){ 
      alert(i2+' => '+v) 
     }) 
    }) 

    $.each(originalImageArray, function(i, obj){ 
     $.each(obj, function(i2, v){ 
      if(imageArray[i][i2] != v) 
      { 
       alert('changed') 
      } 
     }) 
    }) 
} 
function deleteImage(imageArray, index) 
{ 
    if(imageArray[index].id == 0) // If is a new image we just remove it from array. 
    { 
     imageArray.splice(index, 1); 
    } else { // If existing image we mark it for deletion. 
     imageArray[index].deleted = 1; 
    } 

    renderImageList(imageArray); 
} 

function renderImageList(imageArray) 
{ 
    var thumbHTML = ''; 
    $.each(imageArray, function(i, v){ 
     if(v.deleted == 0) 
     { 
      thumbHTML += '<div class="span8 well" data-index="'+i+'">'; 
      thumbHTML += '<div class="span2">'; 
      thumbHTML += '<img src="images/'+v.thumb+'" height="" width="" class="last-added">'; 
      thumbHTML += '</div>'; 
      thumbHTML += '<div class="span4">'; 
      thumbHTML += '</div>'; 
      thumbHTML += '<div class="span1">'; 
      thumbHTML += '<button class="btn btn-info btn-100 move-up">Move up</button>'; 
      thumbHTML += '<button class="btn btn-info btn-100 move-down">Move down</button>'; 
      thumbHTML += '<button class="btn btn-danger btn-100 delete">Remove</button>'; 
      thumbHTML += '</div>'; 
      thumbHTML += '</div>'; 
     } 
    }) 
    $('#thumbnails').html(thumbHTML); 
} 

Answer 1

你需要克隆它，使他們不共享相同的參考

imageArray = data; 
originalImageArray = data.slice(0);