Question

我有一个html文件，看起来像：

...
<div class="colorbox" data-product="oldUpload" data-color="brown" style="background-color: #31261d" title="Brown"></div>
<div class="colorbox" data-product="oldUpload" data-color="cranberry" style="background-color: #6e0a25" title="Cranberry"></div>
...
<div class="colorbox" data-product="TSHIRT" data-color="brown" style="background-color: #31261d" title="Brown"></div>
<div class="colorbox" data-product="TSHIRT" data-color="cranberry" style="background-color: #6e0a25" title="Cranberry"></div>
...
<script src="profiles.js"></script>

以及以下JavaScript文件：

function getSelectedColors() {
  let colorboxes = document.getElementsByClassName('colorbox');
  let selectedColors = [];
  for (let colorbox of colorboxes) {
    if (colorbox.classList.contains('checked')) {
        selectedColors[colorbox.dataset.product] = (selectedColors[colorbox.dataset.product] || '') + colorbox.dataset.color + ',';
    }
  }
  console.log('Colors:' + selectedColors);
  console.log(selectedColors);
  return selectedColors;
}

如果我运行功能getSelectedColors（），则控制台中的输出为：

第1行：“颜色：”

第2行：“ [oldUpload：“棕色，蔓越莓，粉红色，紫色”，提示：“ cranberry，...]”

因此，函数中的代码似乎是异步的，因为“ selectedColors”在for循环之后直接是一个空数组，并且该函数还返回一个空数组。但是目前，我不明白为什么，因为我认为代码中没有异步的内容。

那为什么这个JS代码表现出异步性呢？

谢谢，克劳斯

Answer 1

更改 let selectedColors = [];至let selectedColors = {};

在JS spec数组中，只有数字索引。其他索引未枚举，因此在控制台中“不可见”。

Answer 2

  'Colors:' + selectedColors

通过将数组与字符串连接在一起，可以将数组隐式转换为字符串。这将连接数组的所有值：

 "" + [1, 2, 3] // "1,2,3"

在您的情况下，数组实际上是空的，它不包含数字键。

为什么此Javascript代码表现出异步性？

2 个答案: