Почему этот код 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 только числовой индекс. Другие индексы не перечислены и поэтому невидимы в вашей консоли.

Answer 2

  'Colors:' + selectedColors

Посредством объединения массива со строкой массив неявно преобразуется в строку.Это объединит все значения массива:

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

В вашем случае массив фактически пуст, он не содержит числовых ключей.