javascript - 在 for 循环内的数组上使用 .extend 时出现问题

Question

我有一组复选框，根据选择的项目，将显示不同的上传字段。为了实现这一点，我想动态创建一个数组，其中包含我想要获取的所有类(不重复)。

我创建了一个包含详细信息的对象:

var uploadReq = {
    a: [".document-2"],
    b: [".document-1", ".document-3"],
    c: [".document-1"],
    d: [".document-2", ".document-3"],
    e: [],
    f: [".document-3"]
};

在此示例中，如果有人选择类别 A 和类别 B，我们最终应该得到一个类似于 [".document-2", ".document-1", ".document-3"] 的数组(顺序并不重要)。

我有一个像这样的事件监听器:

$("#client-cat").change(function() {
    var arr = $("#client-cat input");
    var classes = [];

    for(i=0; i<arr.length; i++) {
        if(arr[i].checked) {
            var value = arr[i].value;
            var arr2 = uploadReq[value];
            $.extend(classes, arr2);
        }
    };

    console.log(classes);
})

HTML:

<form>
    <div class="segment">
        <label for="client-cat">Client category:</label>
        <div id="client-cat">
            <div>
                <input type="checkbox" tabindex="0" name="client-cat" value="a">
                <label>Category A</label>
            </div>

            <div>
                <input type="checkbox" tabindex="0" name="client-cat" value="b">
                <label>Category B</label>
            </div>

            <div>
                <input type="checkbox" tabindex="0" name="client-cat" value="c">
                <label>Category C</label>
            </div>

            <div>
                <input type="checkbox" tabindex="0" name="client-cat" value="d">
                <label>Category D</label>
            </div>

            <div>
                <input type="checkbox" tabindex="0" name="client-cat" value="e">
                <label>Category E</label>
            </div>

            <div>
                <input type="checkbox" tabindex="0" name="client-cat" value="f">
                <label>Category F</label>
            </div>
        </div>
    </div>

    <div class="segment">
        <div class="document-1">
            <label for="document-1">Upload a copy of Document 1:</label>
            <input type="file" id="document-1" name="1" accept=".pdf">
        </div>

        <div class="document-2">
            <label for="document-2">Upload a copy of Document 2:</label>
            <input type="file" id="document-2" name="2" accept=".pdf">
        </div>

        <div class="document-3">
            <label for="document-3">Upload a copy of Document 3:</label>
            <input type="file" id="document-3" name="3" accept=".pdf">
        </div>
    </div>

</form>

但是，当我在选中类别 A 和类别 B 的情况下运行代码时，我只得到 [".document-1", ".document-3"]。

我相信发生的情况是，每次 for 循环重新启动时，它都会恢复为 classes 的原始值，而不是从循环末尾获取值并重新启动它。

研究/尝试修复:

• 已查看 this thread其中讨论了使用 $.extend 来解决类似的问题(例如，组合两个数组而不捕获重复项)

• 通过尝试代码来测试是否存在范围问题:

  $("#client-cat").change(function() {
      var arr = $("#client-cat input");
      var classes = [];
  
      for(i=0; i<arr.length; i++) {
          if(arr[i].checked) {
              classes.push("bob");
          }
      }
  
      console.log(classes);
  })
  

  但是上面记录了一个包含与复选框数量一样多的 "bob" 的数组，所以我认为这不是 class 范围的问题。

• 考虑了组合数据的其他方法。示例: push 有效，但我最终得到的是数组内的数组，这不是我想要的。示例:map 可以做到这一点，但不会清除重复项。

JSFiddle here.

Answer 1

$.extend 不是附加数组的正确方法。它通过在第二个(或后续)对象中添加第一个对象中没有的属性来合并对象。但是当您使用数组时，两个数组都有 0 属性，因此第二个数组的第一个元素不会添加到第一个数组中。

追加数组的函数是concat。它不会就地修改数组，您需要重新分配给变量。

$("#client-cat").change(function() {
    var arr = $("#client-cat input:checked");
    var classes = [];

    arr.each(function() {
        classes = classes.concat(uploadReq[this.value]);
    });

    console.log(classes);
})