为什么这个Javascript代码是异步的？

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：“棕色，蔓越莓，粉红色，紫色，t恤：”蔓越莓，.“

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

那么，为什么这个JS代码是异步的呢？

谢谢克劳斯

Answer 1

将let selectedColors = [];更改为let selectedColors = {};

在JS规范中，数组只有一个数字索引。其他索引没有枚举，因此在控制台中是“不可见的”。

Answer 2

  'Colors:' + selectedColors

通过将数组与字符串连接起来，数组将被隐式转换为字符串。它将加入数组的所有值：

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

在您的例子中，数组实际上是空的，它不包含数字键。