循环访问对象数组，并使用Javascript在HTML中一次仅显示对象属性

Question

我有一个对象数组。对象中有 2 个属性："引用"和"作者"。我有一个容器div，我希望引号以每 2 秒的间隔一次显示一个。现在它一次显示一个字母，而不是一次显示一个字母(引用+作者)。如何让它一次显示一个(引用 + 作者)？

"use strict";
/*Read JSON quotes file*/
let mainContainer = document.querySelector('.quotes');

let quotesList = [
{
"quote": "Whether you think you can or you think you can’t, you’re right.",
"author": "—Mother Teresa",
},
{
"quote": "Act as if what you do makes a difference. It does.",
"author": "—William James",
},
{
"quote": "What you get by achieving your goals is not as important as what you become by achieving your goals.",
"author": "—Zig Ziglar",
},
];
var counter = 0;
let allQuotes;
quotesList.map(quote => {
allQuotes = `${quote.quote} ${quote.author}`;
})
function next_quote() {
mainContainer.innerHTML =  allQuotes[counter %  allQuotes.length];
counter += 1;
}
setInterval(next_quote, 2000);

.HTML：

<div class="quotes">Place quote here</div>

Answer 1

我已经对你现有的代码进行了最低限度的修改，因为我认为这对你的学习很有帮助。

<小时 />

说明

allQuotes尚未初始化(分配值)。我给它分配了一个空数组。

.map返回一个数组，其项将是.map的回调函数(我们作为参数传递给.map的函数)的返回值。调用回调函数的次数与数组上的项一样多 (array.length)。

我已经做到了，所以每个quotesList({quote: ..., author: ...})的项目都被添加到allQuotes数组中。

最后，在next_quote中，您可以看到我们如何使用allQuotes[counter]步入allQuotes数组的项目 - 返回{quote: ..., name: ...}.然后，您可以看到我们如何进一步使用.quote或.author来检索这些属性的值。

一旦计数器与报价数相同，它将重置为零。

法典

let quotesList = [
{
"quote": "Whether you think you can or you think you can’t, you’re right.",
"author": "—Mother Teresa",
},
{
"quote": "Act as if what you do makes a difference. It does.",
"author": "—William James",
},
{
"quote": "What you get by achieving your goals is not as important as what you become by achieving your goals.",
"author": "—Zig Ziglar",
},
];
var counter = 0;
let allQuotes = [];
quotesList.map((item, index, array) => {
allQuotes[index] = item;
})
function next_quote() {
console.log(allQuotes[counter].quote + 'n' + allQuotes[counter].author);
counter += 1;
if (counter === allQuotes.length) {
counter = 0;
} 
}
function start() {
console.log(allQuotes[counter].quote + 'n' + allQuotes[counter].author);
counter += 1;
setInterval(next_quote, 2000);
}
start();

---

重构为一个函数 - 如果需要，很乐意解释

let quotesList = [
{
"quote": "Whether you think you can or you think you can’t, you’re right.",
"author": "—Mother Teresa",
},
{
"quote": "Act as if what you do makes a difference. It does.",
"author": "—William James",
},
{
"quote": "What you get by achieving your goals is not as important as what you become by achieving your goals.",
"author": "—Zig Ziglar",
},
];
function start() {
let quoteCounter = 0;
function currentQuote() {
console.log(quotesList[quoteCounter].quote + 'n' + quotesList[quoteCounter].author);
}
for (; ; quoteCounter++) {
if (quoteCounter === 0) {
currentQuote();
continue;
}
setInterval(function() {
currentQuote();
quoteCounter++;
quoteCounter === quotesList.length ? quoteCounter = 0 : null
}, 2000);
break;
}
}
start();

Answer 2

.map返回一个数组，你可以按如下方式修复它：

"use strict";
/*Read JSON quotes file*/
let mainContainer = document.querySelector('.quotes');

let quotesList = [
{
"quote": "Whether you think you can or you think you can’t, you’re right.",
"author": "—Mother Teresa",
},
{
"quote": "Act as if what you do makes a difference. It does.",
"author": "—William James",
},
{
"quote": "What you get by achieving your goals is not as important as what you become by achieving your goals.",
"author": "—Zig Ziglar",
},
];
var counter = 0;
let allQuotes;
allQuotes = quotesList.map(quote => {
return `${quote.quote} ${quote.author}`;
})
function next_quote() {
mainContainer.innerHTML =  allQuotes[counter %  allQuotes.length];
counter += 1;
}
setInterval(next_quote, 2000);

<div class="quotes">Place quote here</div>

Answer 3

下面是一个基于您的代码的简化工作示例，不需要映射引号列表：

let quotesList = [
{
"quote": "Whether you think you can or you think you can’t, you’re right.",
"author": "—Mother Teresa",
},
{
"quote": "Act as if what you do makes a difference. It does.",
"author": "—William James",
},
{
"quote": "What you get by achieving your goals is not as important as what you become by achieving your goals.",
"author": "—Zig Ziglar",
},
];
let index = 0;
setInterval(() => {
document.body.innerHTML = `${quotesList[index].quote} ${quotesList[index].author}`;
index += 1;
if (index === quotesList.length) {
index = 0;
}
}, 2000);