Question

假设您有一个具有某些属性的Javascript对象，以随机显示带有文本和标题背景的页面，您将如何在其内部循环以使其每次仅在对象上显示一项？

const list = {
            b1:{
                author: 'Mozart',
                title: 'lacrimosa',
                text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
                imageURL: 'url(./assets/img/image.jpg)'
            },
            b2:{
                author: 'Choppin',
                title: 'Waltz in A minor',
                text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
                imageURL: 'url(./assets/img/image.jpg)'
            },
            b3:{
                author: 'Bach',
                title: 'Ave Maria',
                text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
                imageURL: 'url(./assets/img/image.jpg)'
            },
        }





return(
            <div className="background" style={{background: 'url(./assets/img/image.jpg)'}}>
                <div className="caption">
                    <blockquote>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        <p> artist - <cite>Song</cite></p>
                    </blockquote>
                </div>
            </div>
        )

我尝试了Math.random（）方法，但是没有用

Answer 1

我最好建议（为了防止对象命名而不是b1，b2等的可能变化）使用Object.keys（）方法：

var listKeys = Object.keys(list);
var randomIndex = Math.floor(Math.random() * listKeys.length);
var randomObject = list[listKeys[randomIndex]];

Answer 2

您可以从这样的对象中获得随机物品

const randomItem = list['b' + Math.floor(Math.random() * 2)]

Answer 3

将对象转换为Array，以便可以使用Math.random()或创建键列表，选择一个键并使用它来访问对象。

转换为Array

const arrList = Object.keys(list).map(k => list[k]);
const item = arrList[Math.round(Math.random() * arrList.length - 1)];

使用键列表

const keys = ['b1', 'b2', 'b3'];
const item = list[keys[Math.round(Math.random() * keys.length - 1)]];

Answer 4

const randomItem = function (obj) {
  var keys = Object.keys(obj)
  return obj[keys[ keys.length * Math.random() << 0]];
};

Answer 5

在David的答案中使用Math.random（）是错误的：您可能会得到键[-1]！正确的方法是使用Math.floor（Math.random（）* length）。此外，我将根据需要使用Object.keys（）方法，请参见this doc。这是一个可行的解决方案：

const list = {
  b1: {
    author: 'Mozart',
    title: 'lacrimosa',
    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
    imageURL: 'url(./assets/img/image.jpg)'
  },
  b2: {
    author: 'Chopin',
    title: 'Waltz in A minor',
    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
    imageURL: 'url(./assets/img/image.jpg)'
  },
  b3: {
    author: 'Bach',
    title: 'Ave Maria',
    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
    imageURL: 'url(./assets/img/image.jpg)'
  },
};

const keys = Object.keys(list);
const randomIndex = keys[Math.floor(Math.random() * keys.length)];
const item = list[randomIndex];
console.log(item.author);

在您的特定示例中，Object.getOwnPropertyNames()方法也将起作用。

Answer 6

您可以使用3条简单的代码行来完成此操作。

//find the length of your object
const length = Object.keys(list).length

//generate a random number that's between 0 and the length of your object
const random_number = Math.floor((Math.random() * length) + 0);

//get your random item from the object
const random_item = list[Object.keys(list)[random_number]]


console.log(random_item)

键可以是完全动态的（b1，b2，b3可以命名为任何东西-例如：b1，g4，aaa）

遍历对象并在javascript中获取随机项

6 个答案: