為什么此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：“棕色，蔓越莓，粉紅色，紫色”，TSHIRT：“蔓越莓，...]”

如此看來，函數中的代碼是異步的，因為“ selectedColors”是在for循環之后直接是一個空數組，並且該函數還返回了一個空數組。 但是目前，我不明白為什么，因為我認為代碼中沒有異步的東西。

那么，為什么這個JS代碼表現出異步性呢？

謝謝，克勞斯

Answer 1

改變let selectedColors = []; let selectedColors = {};

在JS spec數組中只有數字索引。 其他索引未枚舉，因此在控制台中“不可見”。

Answer 2

  'Colors:' + selectedColors

通過將數組與字符串連接，該數組將隱式轉換為字符串。 這將加入數組的所有值：

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

在您的情況下，數組實際上是空的，它不包含數字鍵。