javascript - Vanilla JavaScript for-of 循​​环不会完成所有迭代

Question

我正在构建一个 SET！JavaScript 中的游戏。我创建了一个包含 81 张卡片的卡片组 (mainDeck)，并将十几个卡片 (cardsOnBoard) 拼接到一组对象中，以在游戏板上创建初始卡片。当我循环通过cardsOnBoard 将它们添加到板上时，循环只添加了12 张初始卡中的10 张。我没有看到它在哪里或为什么失败。我错过了什么？

var cardsOnBoard = {
  0: null,
  1: null,
  2: null,
  3: null,
  4: null,
  5: null,
  6: null,
  7: null,
  8: null,
  9: null,
  10: null,
  11: null,
  12: null,
  13: null,
  14: null,
  15: null,
  16: null,
  17: null
}

function createSetDeck() {
  const color = ["red", "green", "purple"]
  const shape = ["cylinder", "diamond", "squiggle"]
  const fill = ["outline", "solid", "filled"]
  const number = ["1", "2", "3"]

  for (var c = 0; c < color.length; c++) {
    for (var s = 0; s < shape.length; s++) {
      for (var f = 0; f < fill.length; f++) {
        for (var n = 0; n < number.length; n++) {
          var card =( {
          Color: color[c],
          Shape: shape[s],
          Fill: fill[f],
          Number: number[n]} )
          
          mainDeck.push(card)
        }      
      }
    }
  }
  return mainDeck
}
createSetDeck()
  
// SHUFFLE THE DECK WITH A FISHER-YATES SHUFFLE
function shuffle (inputArr) {
  var shuffledDeck = inputArr
  for (var i = inputArr.length - 1; i >= 0; i--) {
    var randomIndex = Math.floor(Math.random() * (i + 1))
    var randomItem = shuffledDeck[randomIndex]
    shuffledDeck[randomIndex] = shuffledDeck[i]
    shuffledDeck[i] = randomItem
  }
}
shuffle(mainDeck)

// DRAW A NUMBER OF CARDS FROM THE MAINDECK
function draw(num) {
  var drawn = mainDeck.splice(0, num)
  return drawn
}
// DRAW A DOZEN INITIAL CARDS
cardsOnBoard = new draw(12)

// CREATE THE GAMEBOARD OF 18 AVAILABLE CARD SLOTS
for (let i = 0; i < 18; i++) {
  div = document.createElement('div');
  div.id = i;
  div.classList.add('cardslot');
  div.addEventListener('click', function() 
  {
    selectedSlots.push(this.id);
  });
  document.body.appendChild(div);
}

function renderCardsOnBoard() {
  for (let [key] of Object.keys(cardsOnBoard)) {
    const shape = cardsOnBoard[key].Shape
    const color = cardsOnBoard[key].Color
    const fill = cardsOnBoard[key].Fill
    const number = cardsOnBoard[key].Number
    img = document.createElement('img')
    img.classList.add('cardImage')
    document.getElementById(key).appendChild(img);
    document.getElementById(key).querySelector('.cardImage').src = './img/' + shape + '-' + color + '-' + fill + '-' + number + '.png'
    console.log(img)
  }
}
renderCardsOnBoard()

最底层的函数（renderCardsOnBoard）不是用来自cardsOnBoard 的卡片填充卡片槽11 和12。