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

Question

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

所以，我创建了一个只有三个对象的数组作为开始，并创建了一个函数，该函数将通过单击一个按钮来调用。该函数创建 2 个变量 - 一个用于存储从 Math.random() 和数组长度相乘收到的随机数，由 Math.floor() 四舍五入。

第二个变量存储从数组中删除的一项（每次都是随机的），并且应该返回它。

这个想法是每次当用户点击按钮来获得一张唯一的卡片，而不是能够再次获得同一张卡片。 它可以工作，但不完全正确 - 有时，单击按钮后，用户什么也得不到，控制台中的消息是“Uncaught TypeError: Cannot read property 'background' of undefined”。

欢迎任何建议。谢谢。

这是我的代码：

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";                                                         

}

Answer 1

来自Mozilla Javascript Reference Array.prototype.splice() 返回的内容：

包含已删除元素的数组。如果只有一个元素 删除，返回一个元素的数组。如果没有元素 删除后，返回一个空数组。

这意味着你必须取pickRandomCard的第一个元素（[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";