为什么我的数组在字典值的另一个数组中？答案

【问题标题】：Why my array is inside another array in a dictionary value?为什么我的数组在字典值的另一个数组中？
【发布时间】：2019-05-13 11:22:33
【问题描述】：

我在理解字典中选定数组的返回时有点麻烦。希望你能给我一个解释。顺便说一句，语言是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"]

【问题讨论】：

@trincot 它仍然很奇怪 - 如果未定义 key1，我预计会出错。或者如果是，那么我不希望它返回Array(1)。我认为 OP 在这里缺少一些信息。
key1 的值是多少？不确定dictionary[key1] 如何返回[["element10",element11"]]？这不是minimal reproducible example
dictionary 是否有类似这样的吸气剂：Object.defineProperty(dictionary, <key1's value here>, { get() { return [this["key1"]] } })
您可能在回调中使用了错误的this。不记得太多 jquery 但尝试使用 $(".select-filters").each(..).
等等，is this it?您的 HTML 中有多重选择吗？

标签： javascript jquery arrays dictionary

【解决方案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，您可以在 ES5 中使用 Function#apply 在 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" />

【讨论】：

感谢@vlaz 的解释。似乎多项选择是我在数组中的数组的解释。关于控制台日志的输出很奇怪。但至少现在我明白了。
@Blafarus 数据在控制台中的显示方式可能会有所不同。无论在堆栈 sn-ps 中使用什么，特别是显示的数据格式与浏览器显示的格式略有不同。无论如何，console.log 会给你一些东西来代表你的数据——如果你有[[1, 2], [4, 5, 6]]，控制台向你显示或将其更改为[Array(2), Array(3)]是有效的——两者都是它们所代表的内容是正确的。所以，是的，如果控制台显示的内容正确，但与不同视图显示的内容不同，控制台可能会有点烦人。

【解决方案2】：

你需要像这样使用字符串作为键：

var dictionary = {"key1" : ["element10","element11"], "key2":["element20","element21"]};
console.log(dictionary["key1"]); //returns ["element10",element11"]
console.log(dictionary["key1"][0]); //returns the correct value "element10"

【讨论】：

【解决方案3】：

“key1”是一个变量吗？它不是字符串。

var dictionary = {"key1" : ["element10","element11"], "key2":["element20","element21"]};
console.log(dictionary["key1"]);

【讨论】：

【解决方案4】：

您正在使用括号表示法。您需要在[] 中编写一个表达式。所以key1里面[]会引用名为`key1的变量。

你应该使用字符串"key1"

var dictionary = {"key1" : ["element10","element11"], "key2":["element20","element21"]};
console.log(dictionary['key1'][0]);

当属性名称已知时，最好使用点表示法。

var dictionary = {"key1" : ["element10","element11"], "key2":["element20","element21"]};
console.log(dictionary.key1[0]);

【讨论】：