用于循环的香草JavaScript不'；无法完成所有迭代

我正在制作一套！用JavaScript编写的游戏。我已经创建了一个由81张牌组成的牌组（主牌组），并将十几张牌（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()

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
}
函数createSetDeck（）{
常量颜色=[“红色”、“绿色”、“紫色”]
常量形状=[“圆柱体”、“菱形”、“蠕动”]
常量填充=[“轮廓”、“实体”、“填充”]
常量编号=[“1”、“2”、“3”]
对于（var c=0；c=0；i--）{
var randomIndex=Math.floor（Math.random（）*（i+1））
var randomItem=shuffledDeck[randomIndex]
shuffledDeck[randomIndex]=shuffledDeck[i]
shuffledDeck[i]=随机项
}
}
洗牌（主甲板）
//从主牌堆中抽出若干张牌
函数绘制（num）{
绘制的var=主甲板。拼接（0，数量）
回款
}
//抽一打开头的牌
cardsOnBoard=新绘图（12）
//创建包含18个可用卡槽的游戏板
for（设i=0；i<18；i++）{
div=document.createElement（'div'）；
div.id=i；
div.classList.add（'cardslot'）；
div.addEventListener（'click'，function（）
{
selectedSlots.push（此.id）；
});
文件.正文.附件（div）；
}
函数renderCardsOnBoard（）{
for（让对象的[key]键（cardsOnBoard））{
const shape=cardsOnBoard[key]。形状
const color=cardsOnBoard[key]。颜色
常数fill=cardsOnBoard[key]。填充
const number=cardsOnBoard[key]。编号
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'
控制台日志（img）
}
}
renderCardsOnBoard（）

最底层的功能（renderCardsOnBoard）没有用cardsOnBoard中的卡填充卡槽11和12

---

非常奇怪。你能用jsfiddle（）复制它吗？这将大大有助于调试。需要明确的是，唯一的问题是将卡片呈现为

img

，对吗？其余部分是否按预期工作？在我看来，

查询选择器

出于某种原因不起作用。尝试使用

（让Object.keys的键（cardsOnBoard））

而不是

（让Object.keys的键（cardsOnBoard））

查询选择器似乎是罪魁祸首，但我不确定原因@丹林奇，是的，成功了！谢谢我还没有想到为什么会这样，但是…原因是[key]解构分配给它的字符串，并将第一个字符放入变量key中。这意味着，如果object.keys（cardsOnBoard）的当前值为“0”，则为“0”；如果为“1”，则为“1”；如果为“10”，则为“1”。您正在绘制0-11，语法意味着项目1、10和11都有key='1'，这意味着项目10和11覆盖了项目1。我想，很奇怪。你能用jsfiddle（）复制它吗？这将大大有助于调试。需要明确的是，唯一的问题是将卡片呈现为

img

，对吗？其余部分是否按预期工作？在我看来，

查询选择器

出于某种原因不起作用。尝试使用

（让Object.keys的键（cardsOnBoard））

而不是

（让Object.keys的键（cardsOnBoard））

查询选择器似乎是罪魁祸首，但我不确定原因@丹林奇，是的，成功了！谢谢我还没有想到为什么会这样，但是…原因是[key]解构分配给它的字符串，并将第一个字符放入变量key中。这意味着，如果object.keys（cardsOnBoard）的当前值为“0”，则为“0”；如果为“1”，则为“1”；如果为“10”，则为“1”。您正在绘制0-11，语法意味着项目1、10和11都有key='1'，这意味着项目10和11覆盖了项目1。我想。