javascript - 调用 forEach 内部的函数

Question

//书籍数组

const books = [{
  title: 'The subtle art of not giving a fuck',
  author: 'Mark Manson'
},{
  title: 'Everything is fucked',
  author: 'Mark Manson'
},{
  title: 'Seriousness takes the joyfulness of life',
  author: 'Karan Siddannavar'
}]

const getBooks = book => {
  document.querySelector('.book-list').innerHTML = `<li>${book.title}</li>
<li>${book.author}</li>`
}

books.forEach(book => {
  getBooks(book);
})

<div class="book-list"></div>

每次使用新对象更新 book 变量时，我都会调用 getBooks 方法。但是，该函数仅被调用一次。换句话说，即使每次 forEach 循环遍历数组时都会调用该函数，也只会显示一本书的详细信息。为什么会出现这种情况？

Answer 1

在每次调用函数时，您要替换 innerHTML(以前的内容与当前内容)，您必须使用 += 而不是 = 保留之前的 HTML。

不过，我建议您使用 Element.insertAdjacentHTML()而不是 innerHTML:

const books = [{
  title: 'The subtle art of not giving a fuck',
  author: 'Mark Manson'
},{
  title: 'Everything is fucked',
  author: 'Mark Manson'
},{
  title: 'Seriousness takes the joyfulness of life',
  author: 'Karan Siddannavar'
}]

const getBooks = book => {
  document.querySelector('.book-list').insertAdjacentHTML('beforeend', `<li>${book.title}</li>
<li>${book.author}</li>`)
}

books.forEach(book => {
  getBooks(book);
})

<div class="book-list"></div>