javascript - 为什么我的数组位于字典值中的另一个数组内？

Question

我在理解字典中选定数组的返回时遇到了一些困难。希望您能给我一个解释。顺便说一句，该语言是 javascript。

我创建了一个字典，其中一些数组作为值。当使用正确的键选择值时，我的输出是一个包含数组值的数组。我期望直接获得我的数组值。

编辑:字典的创建似乎是问题所在。假设两个字典是相同的。这是日志的屏幕截图: chromelog

var dictionary1 = {"key1" : ["element10","element11"], "key2":["element20","element21"]};

$.each($(".select-filters"),function(i,v) { //select all filters 
        if (dic_results[$(this).attr("name")] == null) { // if the list don't exist create it
            dic_results[$(this).attr("name")] = []
        }
        dic_results[$(this).attr("name")].push($(this).val()); //push the value inside the array
    });

console.log(dictionary["key1"]); //return the correct value ["element10",element11"]

console.log(dic_results["key1"]);//return [Array(1)] expecting ["element10",element11"]
console.log(dic_results["key1"][0]);//return ["element10",element11"]

Answer 1

如果您的 HTML 中有一个多选元素，那么您会得到这个，因为 $(this.val()) 将返回所有选定选项的数组:

var dic_results = {};
$.each($(".select-filters"), function(i, v) { //select all filters 
  if (dic_results[$(this).attr("name")] == null) { // if the list don't exist create it
    dic_results[$(this).attr("name")] = []
  }
  dic_results[$(this).attr("name")].push($(this).val()); //push the value inside the array
});

console.log(dic_results["key1"]); //return [Array(1)] expecting ["element10",element11"]
console.log(dic_results["key1"][0]); //return ["element10",element11"]

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="select-filters" name="key1" multiple>
  <option value="element10" selected>10</option>
  <option value="element11" selected>11</option>
  <option value="element12">12</option>
</select>

由于您不需要数组中的数组，因此可以使用 spread syntax ... 将结果的每个元素简单地添加到数组中:

var dic_results = {};
$.each($(".select-filters"), function(i, v) {
  if (dic_results[$(this).attr("name")] == null) {
    dic_results[$(this).attr("name")] = []
  }
  dic_results[$(this).attr("name")].push(...$(this).val());
});

console.log(dic_results["key1"]); //returns ["element10",element11"]
console.log(dic_results["key1"][0]); //returns "element10"

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="select-filters" name="key1" multiple>
  <option value="element10" selected>10</option>
  <option value="element11" selected>11</option>
  <option value="element12">12</option>
</select>

或者，如果您不想使用 ES6，可以使用 Function#apply 在 ES5 中执行相同的操作。在Array#push上:

var dic_results = {};
$.each($(".select-filters"), function(i, v) {
  if (dic_results[$(this).attr("name")] == null) {
    dic_results[$(this).attr("name")] = []
  }
  //make a local variable for convenience because we have to repeat it
  var arr = dic_results[$(this).attr("name")];
  arr.push.apply(arr, $(this).val());
});

console.log(dic_results["key1"]); //returns ["element10",element11"]
console.log(dic_results["key1"][0]); //returns "element10"

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="select-filters" name="key1" multiple>
  <option value="element10" selected>10</option>
  <option value="element11" selected>11</option>
  <option value="element12">12</option>
</select>

但是，如果您混合使用多项选择和其他表单元素，则可能会遇到问题，因为单个项目将被视为整个数组，对于字符串，这意味着您将得到一个包含每个单独字符的数组:

var dic_results = {};
$.each($(".select-filters"), function(i, v) {
  if (dic_results[$(this).attr("name")] == null) {
    dic_results[$(this).attr("name")] = []
  }
  dic_results[$(this).attr("name")].push(...$(this).val());
});

console.log(dic_results); 
console.log(dic_results["key1"]); //returns ["element10", "element11"]
console.log(dic_results["key2"]); //returns ["e", "l", "e", "m", "e", "n", "t", "2", "0"]

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select class="select-filters" name="key1" multiple>
  <option value="element10" selected>10</option>
  <option value="element11" selected>11</option>
  <option value="element12">12</option>
</select>

<input type="text" class="select-filters" name="key2" value="element20" />

所以，如果你想处理这两种情况，你可以使用 Array#concat() - 如果给定一个项目，它将创建一个包含该项目的新数组，如果给定一个数组，它将把它连接到当前数组。这在 ES6 和 ES5 中都有效:

var dic_results = {};
$.each($(".select-filters"), function(i, v) {
  if (dic_results[$(this).attr("name")] == null) {
    dic_results[$(this).attr("name")] = []
  }
  
  dic_results[$(this).attr("name")] = dic_results[$(this).attr("name")]
    .concat($(this).val());
});

console.log(dic_results); 
console.log(dic_results["key1"]); //returns ["element10", "element11"]
console.log(dic_results["key2"]); //returns ["element20"]

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select class="select-filters" name="key1" multiple>
  <option value="element10" selected>10</option>
  <option value="element11" selected>11</option>
  <option value="element12">12</option>
</select>

<input type="text" class="select-filters" name="key2" value="element20" />

这有点冗长，但您可以使用局部变量来缩短重复:

var dic_results = {};
$.each($(".select-filters"), function(i, v) {
  var key = $(this).attr("name");
  if (dic_results[key] == null) {
    dic_results[key] = []
  }
  
  dic_results[key] = dic_results[key]
    .concat($(this).val());
});

console.log(dic_results); 
console.log(dic_results["key1"]); //returns ["element10", "element11"]
console.log(dic_results["key2"]); //returns ["element20"]

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select class="select-filters" name="key1" multiple>
  <option value="element10" selected>10</option>
  <option value="element11" selected>11</option>
  <option value="element12">12</option>
</select>

<input type="text" class="select-filters" name="key2" value="element20" />