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);

奇怪的阵列镜像问题

1 个答案: