如何在JavaScript中控制台输出对象数据？解决卡牌rank属性获取报错问题

• 修正随机选卡逻辑，避免未定义变量
  你错误使用未定义的rank变量访问数组元素，这是导致问题的关键之一。应该通过生成随机索引来从arrClubs数组中选取卡牌对象，确保selectedCard被正确赋值：

  // 生成合法的随机数组索引
  const randomIndex = Math.floor(Math.random() * arrClubs.length);
  // 选中对应的卡牌对象
  const selectedCard = arrClubs[randomIndex];
  

• 正确获取rank属性并做有效性校验
  拿到有效的selectedCard后，直接通过.操作符访问rank属性即可。建议先做校验，避免后续DOM操作报错：

  if (selectedCard) {
    console.log('当前卡牌rank值:', selectedCard.rank);
    // 这里执行你的DOM操作，比如更新页面显示
    // document.getElementById('cardRank').textContent = selectedCard.rank;
  } else {
    console.error('未获取到有效的卡牌对象');
  }
  

• 确认arrClubs的数组结构正确性
  确保arrClubs中的每一项都是包含rank属性的对象，比如：

  const arrClubs = [
    { rank: 'A', suit: 'Clubs' },
    { rank: '2', suit: 'Clubs' },
    { rank: 'K', suit: 'Clubs' }
    // ...其他卡牌对象
  ];
  

  如果数组元素本身没有rank属性，访问时必然会得到undefined，得先排查数据结构是否符合预期。

内容的提问来源于stack exchange，提问作者Alexis