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

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