将对象作为参数传递给js中的静态函数

Question

我正在尝试将新对象作为静态函数中的参数传递，但是得到了意外的结果。这是我的代码。但我想显示标题名称，作者名称和isbn的表行。因此，帮助解决此问题。

    let bookTitle = document.querySelector("#title").value;
    let bookAuthor = document.querySelector("#author").value;
    let bookIsbn = document.querySelector("#isbn").value;

    class Book {
      constructor(title, author, isbn) {
        this.title = title;
        this.author = author;
        this.isbn = isbn;
      }
    }

    const makeNewBook = new Book(bookTitle, bookAuthor, bookIsbn);

    class MakeUi {
      static addTable(makeNewBook) {
        document.querySelector("#book-list").innerHTML = `<tr> 
                <td>  ${title} </td>
                <td>  ${author} </td>
                <td>  ${isbn} </td>
                <td>  <button class="btn btn-sm btn-danger"> X </button> </td>
           </tr>`;
      }
    }

    MakeUi.addTable(); 

这是我得到的结果。

Answer 1

您需要破坏您的addTable(makeNewBook)：

const makeNewBook =新书（bookTitle，bookAuthor，bookIsbn）;

class MakeUi {
  static addTable({title, author, isbn}) {
    document.querySelector("#book-list").innerHTML = `<tr> 
            <td>  ${title} </td>
            <td>  ${author} </td>
            <td>  ${isbn} </td>
            <td>  <button class="btn btn-sm btn-danger"> X </button> </td>
       </tr>`;
  }
}

然后，将您的const makeNewBook传递到MakeUi中：

MakeUi.addTable(makeNewBook);

或：正确访问属性，如以下代码：

class MakeUi {
      static addTable() {
        document.querySelector("#book-list").innerHTML = `<tr> 
                <td>  ${makeNewBook.title} </td>
                <td>  ${makeNewBook.author} </td>
                <td>  ${makeNewBook.isbn} </td>
                <td>  <button class="btn btn-sm btn-danger"> X </button> </td>
           </tr>`;
      }
    }

甚至更好

const {title, author, isbn} = new Book(bookTitle, bookAuthor, bookIsbn);
class MakeUi {
      static addTable() {
        document.querySelector("#book-list").innerHTML = `<tr> 
                <td>  ${title} </td>
                <td>  ${author} </td>
                <td>  ${isbn} </td>
                <td>  <button class="btn btn-sm btn-danger"> X </button> </td>
           </tr>`;
      }
    }

    MakeUi.addTable(); 

Answer 2

您需要首先从对象获取值：

class MakeUi {
  static addTable(makeNewBook) {
    const { title, author, isbn } = makeNewBook; // Get the values from the object
    document.querySelector("#book-list").innerHTML = `<tr> 
                <td>  ${title} </td>
                <td>  ${author} </td>
                <td>  ${isbn} </td>
                <td>  <button class="btn btn-sm btn-danger"> X </button> </td>
           </tr>`;
  }
}

MakeUi.addTable(makeNewBook);