遍历数组并使用 splice() 更新父数组？

Question

当用户单击按钮时，我会抓取availableTags 数组，并将其存储在新的var tagsToWorkWith 中。然后我遍历tagsToWorkWith 并在每一行上运行moveTag()，以便移动availableTags 中的每个标签。

在moveTag() 内部，我使用splice() 从availableTags 中删除该行。但是，由于某种原因，这会从 tagsToWorkWith 中删除该行，这导致我的 for() 函数仅在每隔一行上运行 moveTag()。

为什么 splice() 会从 tagsToWorkWith 中删除行？ 我明确将 tagsToWorkWith 设置为等于原始 availableTags 以避免此问题，但这似乎不起作用.

下面的代码在http://jsfiddle.net/EdnxH/运行时出现错误

var availableTags = [{"label":"Label A","value":"1"},{"label":"Label B","value":"2"}, {"label":"Label C","value":"3"}];

$(document).on('click', '#clickButton', function () {
    var tagsToWorkWith = availableTags;                         
    for(var countera=0; countera< tagsToWorkWith.length; countera++) {
        alert(tagsToWorkWith[countera].label);
        moveTag(tagsToWorkWith[countera].label, tagsToWorkWith[countera].value);
        //This should match the first alert label, since we haven't increased the counter yet. But, for some reason, moveTag()'s splice() removes the row from tagsToWorkWith.
        alert(tagsToWorkWith[countera].label);
    }   
});

function moveTag(itemToMove, itemToMoveValue) {
   var selectedTagArrayIndex = -1;    
   for(var counter=0; counter< availableTags.length; counter++) {
       if (availableTags[counter].value == itemToMoveValue) {
           selectedTagArrayIndex = counter;
       }
   } 
   if (selectedTagArrayIndex > -1)  {
       availableTags.splice(selectedTagArrayIndex, 1);
   }
}

Answer 1

数组是对象，当您在变量之间分配引用时，对象不会“深度复制”。因此，您的两个变量都引用了完全相同的对象。

因此：

var a = ["hello", "world"];
var b = a;
a[2] = "again";
alert(b[2]); // "again" because "a" and "b" are the same object

如果要复制数组，可以使用：

var b = a.slice(0);