javascript - 为什么javascript数组项自动删除

我有一个带有自动完成功能的文本框。当您开始在文本框中输入国家/地区名称时，下拉菜单将通过匹配字符自动消失。所选国家/地区名称将自动显示到下一个div，并从可用列表中删除。委托您可以从所选列表中删除国家/地区，这将再次在下拉列表中返回国家/地区名称。
让我从技术上讲一点。

我使用了两个数组变量availableAllTags和availableTags，它们分配相同的值。在整个程序中，我没有在任何地方更改availableAllTags值。但是令人惊讶的是，我每次从下拉列表中选择一个国家时都会从availableTags（perfect）和availableAllTags（surprising）中删除。
但是我需要在我的程序中全部使用固定的availableAllTags数组值。

http://jsfiddle.net/aminulsumon/w73yr/11/

  var availableAllTags = availableTags; //original array which data not changed anywhere
  var selected_item_ids=new Array();
  var country;
  var i;
  $(function() {
    $( "#country_name" ).autocomplete({
      source: availableTags,
      autoFocus: true,
      select: function( event, ui ) {
           country=ui.item.value;  //$('#target').text( ui.item.value );
           $('#div_selected_country').html($('#div_selected_country').html()+"<span>"+country+
                " <a href='?delete="+country+"' class='del_country'>X</a></span>"+"\n ");
           //Add country id in selected_items array.
           alert(availableAllTags[0]);
           selected_item_ids.push(availableAllTags.indexOf(country));

           //Remove country name from availableTags array.
           i = availableAllTags.indexOf(country);
           availableTags.splice(i, 1);   //alert(availableTags[0]);
           if ( ui.item ){
              $(this).val('');
              return false;
           }
      }
    });
  });

  $(document).on('click','a.del_country', function(e) {
    e.preventDefault();/* prevent browser opening href url*/

    //Select country name and delete from availableTags array
    var href_val = $(this).attr('href');
    var item_name = href_val.split('delete=')[1];    //alert(item_name);
    selected_item_ids.splice(selected_item_ids.indexOf(availableAllTags.indexOf(item_name)), 1);

    /* remove parent span*/
    $(this).parent().remove();
    return false;
  });

  $(document).on('click','#show_selected_item_ids', function(e) {
    var all_ids;
    all_ids="";
    $.each(selected_item_ids, function(index,value) {
     all_ids = all_ids+ selected_item_ids[index]+ ",";
    });
    all_ids = all_ids.substring(0,all_ids.length - 1); // remove last ";" added
    $("#div_selected_ids").html("ids: "+all_ids);
  });

  $(document).on('click','#btnSelectAll', function(e) {
    selected_item_ids = [];
    $('#div_selected_country').html("");
    $.each(availableTags, function(index,value) {
      selected_item_ids.push(availableAllTags.indexOf(value));
      $('#div_selected_country').html($('#div_selected_country').html()+"<span>"+value+
        " <a href='?delete="+country+"' class='del_country'>X</a></span>"+"\n ");
    });
  });

  $(document).on('click','#btnRemoveAll', function(e) {
    /*$.each(selected_item_ids, function(index,value) {
      availableTags.push(availableAllTags.indexOf(value));
      selected_item_ids.splice(selected_item_ids.indexOf(availableAllTags.indexOf(value)), 1);
    });*/
    selected_item_ids = [];
    availableTags = availableAllTags;
    $('#div_selected_country').html("");
    $('#div_selected_ids').html("");
  });
});

最佳答案

实际上在javascript中，var x = y;表示将y的引用分配给x。因此，要分配值，您必须使用var x = y.slice（）;