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

标签 javascript jquery arrays dictionary

我在理解字典中选定数组的返回时遇到了一些困难。希望您能给我一个解释。顺便说一句,该语言是 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"]

最佳答案

如果您的 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" />

关于javascript - 为什么我的数组位于字典值中的另一个数组内?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56111297/

相关文章:

javascript - 如何对不同的路线使用相同的通行证策略?

javascript - 读取嵌套文件夹中的 json 文件

javascript - Canvas.toDataURL 不适用于移动 Safari iOS?

javascript - 如何在组件内制作组件?

javascript - 循环遍历 div

jquery - Bootstrap 模态异常行为

php - 需要 PHP 代码来从数据库中选择大于 5 但不大于 15 的数字(意味着所有大于 5 的数字,不包括 15)?

jQuery 自动淡入下一个 html 元素然后循环重新启动

c - 我不明白这个程序是做什么的,它是一个递归程序

c++ - 无法通过 ZMQ 发送 capnp 消息