Выдвижение пар ключ-значение к объекту в Javascript

Question

У меня есть семь флажков, когда один из них отмечен или снят, я хочу добавить sh текущих флажков в объект checkedCheckboxes. Когда я console.log пара ключ / значение внутри оператора if, я получаю правильный вывод, однако, когда я console.log() checkedCheckboxes после назначения обновленных значений, я получаю это (объект в нижней части log):

Так что я думаю, что с этой строкой должно быть что-то не так: checkedCheckboxes = {...key, ...colourCheckbox[key]};.

Если кто-нибудь может сказать мне что, это было бы огромной помощью.

Полный код:

  // store checkbox values in an object;
  const colourCheckbox = {
    whiteBox: $('#white'),
    blueBox: $('#blue'),
    blackBox: $('#black'),
    redBox: $('#red'),
    greenBox: $('#green'),
    colourlessBox: $('#colourless'),
    multicolouredBox: $('#multicoloured')
  };

  // initialise object to store which checkboxes are checked
  let checkedCheckboxes = {};

  // store checked boxes in 'checkedBoxes'
  $('.colour-checkbox').change(() => {
    checkedCheckboxes.length = 0;
    for (const key in colourCheckbox) {
      if ($(colourCheckbox[key]).is(':checked')) {
        checkedCheckboxes = {...key, ...colourCheckbox[key]};
        console.log(key, colourCheckbox[key])
      }
    }
    console.log(checkedCheckboxes)
  });

Answer 1

Вам не нужно использовать оператор распространения, если вы делаете это так. Попробуйте изменить свой код на этот

// store checkbox values in an object;
      const colourCheckbox = {
        whiteBox: $('#white'),
        blueBox: $('#blue'),
        blackBox: $('#black'),
        redBox: $('#red'),
        greenBox: $('#green'),
        colourlessBox: $('#colourless'),
        multicolouredBox: $('#multicoloured')
      };

      // initialise object to store which checkboxes are checked
      let checkedCheckboxes = {};

      // store checked boxes in 'checkedBoxes'
      $('.colour-checkbox').change(() => {
        checkedCheckboxes.length = 0;
        for (const key in colourCheckbox) {
          if ($(colourCheckbox[key]).is(':checked')) {
            checkedCheckboxes[key] = colourCheckbox[key];
            console.log(key, colourCheckbox[key])
          }
        }
        console.log(checkedCheckboxes)
      });