将创建的带有类的对象推送到数组中答案

【问题标题】：push created object with class into array将创建的带有类的对象推送到数组中
【发布时间】：2021-10-22 17:58:25
【问题描述】：

我的代码遇到了这个问题。我想将创建的对象推送到一个数组中，然后显示它们。问题是新创建的对象覆盖了旧的对象，我仍然有将对象推入数组的问题。

我的目标是创建输入并获取它们的值，并通过类创建对象，然后将它们推入数组、循环并在屏幕上显示。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-   scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" id="title" />
    <input type="text" id="author" />
    <input type="number" id="pages" />
    <h1>title :</h1>
    <h2>Author :</h2>
    <h3>Pages :</h3>
    <button>Submit</button>

    <script src="app.js"></script>
  </body>
</html>





const title = document.querySelector("#title");
const author = document.querySelector("#author");
const pages = document.querySelector("#pages");
const submit = document.querySelector("button");
const h1 = document.querySelector("h1");
const h2 = document.querySelector("h2");
const h3 = document.querySelector("h3");

let myLibrary = [];

let Book = class {
  constructor(title, author, pages) {
    this.title = title;
    this.author = author;
    this.pages = pages;
    this.words = [];
  }
};

submit.addEventListener("click", () => {
  if (title.value === "" || author.value === "" || pages.value === "") {
    return;
  }

  if (title.value && author.value && pages.value) {
    myLibrary.push(new Book(title.value, author.value, pages.value));
  }
  title.value = "";
  author.value = "";
  pages.value = "";
  myLibrary.forEach((e) => {
    h1.innerHTML = e.title;
    h2.innerHTML = e.author;
    h3.innerHTML = e.pages;
  });
  console.log(myLibrary);
});

【问题讨论】：

所以这行代码连续运行多次：h1.innerHTML = e.title;。基本上第二个会覆盖第一个等等。e:myLibrary.forEach((e)是什么？
其实不是因为h1/h2/h3和e.title/e.author/e.pages不同..
在.forEach() 中添加console.log(e)（或使用调试器单步执行您的脚本），您将看到问题。
它们彼此相邻出现，好像一切正常，但是当我按下提交时，最新的会覆盖旧的，而不是卡在它旁边..

标签： javascript arrays class object

【解决方案1】：

您将每本书的信息插入相同的元素（h1，h2，h3）

我建议你为每本书创建一个容器和新的 h1,h2,h3：

//你可以省略forEach，所以下面的元素只为最后添加的书创建，而不是所有的书。

// 或者您可以清空主图书列表容器（此处为正文），然后每次执行 forEach 并为所有图书创建以下元素（性能不佳）

  submit.addEventListener("click", () => {
    if (title.value === "" || author.value === "" || pages.value === 
 "") {
  return;
}

 if (title.value && author.value && pages.value) {
 myLibrary.push(new Book(title.value, author.value, pages.value));
 }


let container=document.createElement("div")
let titleDisplayer=document.createElement("h1")
let authorDisplayer=document.createElement("h2")
let pagesDisplayer=document.createElement("h3")

   titleDisplayer.innerHTML = title.value;
   authorDisplayer.innerHTML = author.value;
   pagesDisplayer.innerHTML = pages.value;

container.append(titleDisplayer,authorDisplayer,pagesDisplayer)
document.body.append(container)
 
     title.value = "";
     author.value = "";
     pages.value = "";

console.log(myLibrary);

});

【讨论】：

感谢erfan的回答，只是想知道为什么结果会被渲染两次。例如我创建了第一个对象并显示它，然后当我创建另一个对象来显示它时，将显示如下结果，第一个重复两次，第二个重复，为什么重复值？
这是因为每次您创建一本新书时，都会为所有现有书籍创建新容器。我省略了 forEach，它现在可以工作了。另一种解决方案是保留 forEach，但每次在 forEach 之前清空 document.body。

【解决方案2】：

所以我在这里为数组中的每本书创建列表项。我有一个空字符串，我将所有书籍添加到其中并最终覆盖<ul>。

const book = document.forms.book;
const books = document.getElementById('books');

let myLibrary = [];

const Book = class {
  constructor(title, author, pages) {
    this.title = title;
    this.author = author;
    this.pages = pages;
    this.words = [];
  }
};

book.addEventListener("submit", e => {
  e.preventDefault();
  myLibrary.push(new Book(e.target.title.value, e.target.author.value, e.target.pages.value));
  e.target.reset();
  let str = '';
  myLibrary.forEach(book => {
    str += `<li>${book.title}, ${book.author}, ${book.pages}</li>`;
  });
  books.innerHTML = str;
});

<form name="book">
  <lable>Title: <input name="title" type="text" required></lable>
  <lable>Author: <input name="author" type="text" required></lable>
  <lable>Pages: <input name="pages" type="text" required></lable>
  <button>Save</button>
</form>

<ul id="books"></ul>

【讨论】：

非常感谢先生。只是需要一些帮助，为什么将对象推入数组，结果呈现如下：第一个对象-（第一个-第二个对象）-（第一个-第二个-第三个），这让我很困惑？
@Joey 有不同的方法，但是这个相当简单。您可以将其拆分为更多功能。就像一个渲染所有书籍的函数。因此，如果您有书籍列表，则很容易呈现它们。
非常感谢