Question

我有一个对象数组。对象中包含2个属性：“ quote”和“ author”。我有一个容器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

.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 2

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

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

Answer 3

我对您现有的代码进行了最少的修改，因为我认为这对您的学习很有帮助。

说明

allQuotes尚未初始化（已分配值）。我给它分配了一个空数组。

.map返回一个数组，其项将是.map的回调函数（我们作为.map的参数传递的函数）的返回值。调用回调函数的次数与数组（array.length）上的项的次数相同。

我已经做到了，因此quotesList（{quote: ..., author: ...}）的每一项都被添加到allQuotes数组中。

最后，在next_quote中，您可以看到如何使用allQuotes进入allQuotes[counter]数组的项目-返回{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();

使用Javascript遍历对象数组并一次仅显示对象属性

3 个答案: