如何访问数组中随机对象的属性?

How to access the properties of a random object in an array?

我有一组对象。它们中的每一个都具有与其他相同的属性,但具有不同的值。我想访问此数组中随机对象的属性,但只是一次 - 所以当我随机获取该对象时,它不会再出现在数组中。

因此,我创建了仅包含三个对象的数组,并创建了一个函数,该函数将通过单击按钮来调用。该函数创建 2 个变量 - 一个用于存储从 Math.random() 与数组长度相乘得到的随机数,由 Math.floor() 舍入。

第二个变量存储从数组中删除的一项(每次都是随机的),并且应该 return 它。

这个想法是每次当用户点击按钮时获得一张独特的卡片,而不是能够再次获得同一张卡片。 它有效但不完全 - 有时,单击按钮后,用户什么也得不到,控制台中的消息是“Uncaught TypeError: Cannot read 属性 'background' 未定义”。

欢迎任何建议。谢谢

这是我的代码:

var TarotContainer = [];
TarotContainer[0] = {name: "The Fool", background: "url('theFool.jpg')"}
TarotContainer[1] = {name: "The Magician", background: "url('theMagician.jpg')"}
TarotContainer[2] = {name: "The High Priestess", background: "url('theHighPriestess.jpg')"}

function getRandomTaroCard(){
    var randomCard = Math.floor(Math.random() * TarotContainer.length); 
    var pickedRandomCard = TarotContainer.splice(randomCard, 1);
    document.getElementById('card').style.backgroundImage = pickedRandomCard[randomCard].background;
    document.getElementById('card').style.backgroundRepeat = "no-repeat";                                                         

}

来自 Mozilla Javascript Reference 什么 Array.prototype.splice() returns:

an array containing the deleted elements. If only one element is removed, an array of one element is returned. If no elements are removed, an empty array is returned.

这意味着您必须取 pickedRandomCard 的第一个元素 ([0])。

像这样:

var TarotContainer = [];
TarotContainer[0] = {name: "The Fool", background: "url('theFool.jpg')"}
TarotContainer[1] = {name: "The Magician", background: "url('theMagician.jpg')"}
TarotContainer[2] = {name: "The High Priestess", background: "url('theHighPriestess.jpg')"}

function getRandomTaroCard(){
    var randomCard = Math.floor(Math.random() * TarotContainer.length); 
    var pickedRandomCard = TarotContainer.splice(randomCard, 1);
    document.getElementById('card').style.backgroundImage = pickedRandomCard[0].background;
    document.getElementById('card').style.backgroundRepeat = "no-repeat";