Question

我的JavaScript代码存在这个奇怪的问题我正在尝试创建动态加载选择框，而不会像React那样奢侈。

它会比较其他选择框的值，以便只能一次选择一个值。因此，如果已在一个选择框中设置了值，则无法再次选择该值。

为此，我使用原始值列表，将这些值克隆到新变量中并删除已选择的值，然后创建新列表。

虽然有很多循环，但效果很好。唯一的问题是，如果我从克隆变量中删除一个项目，原始文件也会更改。

即使我在原型对象中推送原始变量或使用const。

window.initial_abstract_list = ["Option one", "Option two", "Option three", "Option four", "Option five"];

// Set the option values
function reset_abstract_list() {
  var in_list = [];
  var new_list = window.initial_abstract_list;
  console.log(window.initial_abstract_list); ///  window.initial_abstract_list changes!!!

  // Get selected value of all select boxes
  $.each($('select.values-list'), function(index, value) {
    in_list.push($(value).val().toString())
  });

  // Remove already set values from list
  $.each($('select.values-list'), function(index, value) {
    $.each(in_list, function(index2, value2) {
      delete new_list[value2.toString()];
    });
  });

  // Generate new options for select boxes
  $.each($('select.values-list'), function(index, value) {
    var current_selected_key = $(value).val().toString();
    var current_selected_val = $('option:selected', value).text();
    $(value).empty();
    $(value).append($('<option></option>')
      .attr('value', current_selected_key)
      .text(current_selected_val));

    for (var index2 in new_list) {
      "use strict";
      $(value).append($('<option></option>')
        .attr('value', index2)
        .text(new_list[index2]));
    };
  });
}

// Alter content on change select boxes
jQuery(document).ready(function($) {
  $(document).on('click', 'button', function(e) {
    reset_abstract_list();
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="values-list">
  <option value="0">Option one</option>
  <option value="1">Option two</option>
  <option value="2">Option three</option>
  <option value="3">Option four</option>
</select>

<select class="values-list">
  <option value="0">Option one</option>
  <option value="1">Option two</option>
  <option value="2">Option three</option>
  <option value="3">Option four</option>
</select>

<select class="values-list">
  <option value="0">Option one</option>
  <option value="1">Option two</option>
  <option value="2">Option three</option>
  <option value="3">Option four</option>
</select>

<button>Ye olde button</button>

Answer 1

当您将new_list设置为默认列表时，它基本上创建了对原始列表的引用。您需要复制原始列表的值，以便它们不会耦合。

var new_list = window.initial_abstract_list.slice();

Answer 2

通过执行var new_list = window.initial_abstract_list;，您只能创建对原始数组的引用。对new_list所做的任何更改都将反映在初始数组中。

您要做的是创建初始数组的深层副本，以便获得具有相同值的不同变量。你可以这样做：

var new_list = jQuery.extend(true, {}, window.initial_abstract_list);

变量似乎是耦合的

2 个答案: