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

标签 javascript arrays reactjs loops object

<分区>

假设您有一个具有某些属性的 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() 方法，但它不起作用

最佳答案

我最好建议(为了防止对象命名可能发生变化而不是 b1、b2 等)使用 Object.keys() 方法:

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

关于javascript - 遍历对象并在javascript中获取随机项目，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53334851/

上一篇：javascript - 如何在javascript验证之前 trim 非必填字段

下一篇：javascript - jquery 没有以 HTML 形式定义

相关文章：

javascript - 如何将函数的结果放入 html 表单元素中

python - 从 Numpy 矩阵构造 Python 集

java - 使用 Java 将字符串输入数组的随机位置

php - 将 PHP 数组插入 MYSQL

javascript - React Redux 追加组件

javascript - 我如何格式化这样的数字 xxxx-xx-xxxx

javascript - 延迟添加类

javascript - 将 d3.csv 响应分配给全局变量

javascript - 了解 3d 变换检测代码 modenizer

javascript - 通过使用工具栏粘贴链接进行超文本处理