javascript - 为什么这段 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() ，控制台中的输出为:

Line 1: "Colors: "

Line 2: "[oldUpload: "brown,cranberry,pink,purple,", TSHIRT: "cranberry,...]"

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

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

谢谢，克劳斯

Answer 1

改变let selectedColors = []; 到 let selectedColors = {};

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