未捕获的类型错误：在遍历数组时无法读取未定义的属性

Question

我正在遍历一个数组 (cardArray) 并显示标题。如果卡片具有大于 0 的特殊属性，那么我还将该特殊类型的描述添加到另一个数组（特殊）中。

它要么根本不中断（并显示所有 9 张卡片），要么在循环结束之前在循环中的随机位置中断 Uncaught TypeError: Cannot read properties of undefined (reading 'desc') pointing to the first line (console .log("spe: "+i+" "+cardArray[i]['name'])+": "+specials[i]['desc'])

var checker=i=0; var title='';
$.each(cardArray, function(){

  var i=Math.floor((Math.random() * cardArray.length));
    console.log("each"+i+":"+cardArray[i]['name']+"  sp:"+parseInt(cardArray[i]['special']))
  if(checker<9){ // display 9 cards on my hand
    if(parseInt(cardArray[i]['special'])>0){ // is special, add description to title
      console.log("spe: "+i+" "+cardArray[i]['name'])+": "+specials[i]['desc']
      title=cardArray[i]['name']+": "+specials[i]['desc']
    }else{
      console.log("nonsp: "+i+" "+cardArray[i]['name'])
      title=cardArray[i]['name'];
    }

    var tCard = $('<div class="cardContainer" title="'+title+'" data-id="'+i+'">'+cardArray[i]['damage']+'</div>')
    tCard.attr('style','background: url("'+cardArray[i]['img']+'")')
    if(cardArray[i]['special']=='1'){ // is spy
      tCard.css('border','2px dashed ##660066', 'background: url("'+cardArray[i]['img']+'")')
    }else{
      tCard.attr('style','background: url("'+cardArray[i]['img']+'")')
    }
    title='';
    $("#area_myCards").append(tCard)
  }

  checker++;
  
});

const cardArray = [
  {
    name: 'footsoldier',
    img: 'images/card_footsoldier.png',
    type: 'Infantry',
    damage: '2',
    special: '0'
  },
  {
    name: 'assassin',
    img: 'images/card_assassin.png',
    type: 'Infantry',
    damage: '2',
    special: '1'
  },
  {
    name: 'strategist',
    img: 'images/card_strategist.png',
    type: 'Ranged',
    damage: '2',
    special: '2'
  },
  {
    name: 'barricade',
    img: 'images/card_barricade.png',
    type: 'Infantry',
    damage: '-1',
    special: '3'
  },
  {
    name: 'drummer',
    img: 'images/card_drummer.png',
    type: 'Infantry',
    damage: '1',
    special: '0'
  },
  {
    name: 'saboteur',
    img: 'images/card_saboteur.png',
    type: 'Siege',
    damage: '1',
    special: '3'
  },
]

const specials = [
  {
    name: 'footsoldier',
    desc: 'Men at Arms- gives +1 damage for Infantry on either side',
    type: 'Infantry'
  },
  {
    name: 'spy',
    desc: 'is placed on enemy board but gives two cards',
    type: 'Infantry'
  },
  {
    name: 'strategist',
    desc: 'gains +2 damage each turn before being placed',
    type: 'Infantry'
  },
  {
    name: 'barricade',
    desc: 'removes -1 damage from all enemy Infantry',
    type: 'Infantry'
  },
  {
    name: 'drummer',
    desc: 'morale boosts damage +1 for all Infantry',
    type: 'Infantry'
  },
]

我只是遗漏了一些明显的东西，还是完全错误地处理了这个问题？

Answer 1

与其这样做，不如创建一个卡片元素数组，然后随机播放。

示例：

const cardArray = [
  {
    name: "footsoldier",
    img: "images/card_footsoldier.png",
    type: "Infantry",
    damage: "2",
    special: "0",
  },
  {
    name: "assassin",
    img: "images/card_assassin.png",
    type: "Infantry",
    damage: "2",
    special: "1",
  },
  {
    name: "strategist",
    img: "images/card_strategist.png",
    type: "Ranged",
    damage: "2",
    special: "2",
  },
  {
    name: "barricade",
    img: "images/card_barricade.png",
    type: "Infantry",
    damage: "-1",
    special: "3",
  },
  {
    name: "drummer",
    img: "images/card_drummer.png",
    type: "Infantry",
    damage: "1",
    special: "0",
  },
  {
    name: "saboteur",
    img: "images/card_saboteur.png",
    type: "Siege",
    damage: "1",
    special: "3",
  },
];

const specials = [
  {
    name: "footsoldier",
    desc: "Men at Arms- gives +1 damage for Infantry on either side",
    type: "Infantry",
  },
  {
    name: "spy",
    desc: "is placed on enemy board but gives two cards",
    type: "Infantry",
  },
  {
    name: "strategist",
    desc: "gains +2 damage each turn before being placed",
    type: "Infantry",
  },
  {
    name: "barricade",
    desc: "removes -1 damage from all enemy Infantry",
    type: "Infantry",
  },
  {
    name: "drummer",
    desc: "morale boosts damage +1 for all Infantry",
    type: "Infantry",
  },
];
let cards = cardArray.map((item) => {
  // Create card here
  return JSON.stringify(item);
});
const shuffle = ([...arr]) => {
  let m = arr.length;
  while (m) {
    const i = Math.floor(Math.random() * m--);
    [arr[m], arr[i]] = [arr[i], arr[m]];
  }
  return arr;
};
console.log(shuffle(cards));

洗牌后，您可以添加到父级 Elem。

const shuffledCards = shuffle(cards);
shuffledCards.forEach(card => $("#area_myCards").append(card))