javascript - 当对象本身存储在 JavaScript 中的数组索引中时，如何打印该对象的每个单独属性？

Question

我是编程新手，并尝试从头开始创建一个博客，不仅可以提高我的编码技能，而且该博客将记录我的学习过程。

我不想将每个新帖子硬编码到index.html页面，而是想创建一种具有两个输入字段的管理页面，其中type =“text” ，一个为帖子标题，另一个为帖子内容。我的提交按钮将从这些字段中获取用户输入，并将它们存储在一个对象中，该对象是我的 makePost 构造函数，而每个对象又将存储在一个名为 posts 的数组中>。

然后我想遍历数组并打印出每个帖子的每个对象的单独属性...每个属性是 title、date、content。到目前为止，我能够创建一个具有这三个属性的对象并将其存储在数组的零索引 (array[0]) 中，但是当我使用 for 循环打印出该对象时迭代我的数组，它会打印整个对象...我想我需要访问 for 循环中的每个属性？

我还意识到在这个代码块中我正在打印到控制台，但我这样做只是为了确保某些功能正常工作。在代码的末尾，我发布了它在控制台中打印的内容。现在我只需要分解该对象中的每个属性并将它们打印在各自的 HTML 标签中。

在决定发帖之前，我已经搜索了好几天，但找不到任何特定于我尝试使用 JavaScript 执行的操作的内容。预先感谢您的帮助。

这是我到目前为止的代码:

document.getElementById('button').onclick = function() {
  var title = document.getElementById('title').value;
  var content = document.getElementById('content').value;
  var posts = [];
  var makePost = function(title, content) {
    return {
      title: title,
      date: Date(),
      content: content
    }
  }
  posts.unshift(makePost(title, content));
  for (var i = 0; i < posts.length; i++) {
    var myPost = posts[i];
    console.log(myPost);
  }
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
form {
  position: relative;
  top: 20px;
  left: 20px;
  margin-bottom: 50px;
}
h3 {
  margin: 10px;
}
#title {
  margin: 10px;
}
#date {
  margin: 10px;
}
#content {
  margin: 10px;
}

<h3>Type the content that you would like to show in the post section of the blog</h3>
<form class="form" action="index.html" method="post">
  Title:<input id="title" type="text" name="name" value="" placeholder="Type title here"><br />
  <!-- Date:<input id="date" type="text" name="name" value="" placeholder="Type date here"><br /> -->
  Content:<input id="content" type="text" name="name" value="" placeholder="Type content here">
  <input id="button" type="button" name="name" value="Submit">
</form>
<h2 id="displaytitle">This is the title of the post</h2>
<h2 id="displaydate">This is the date of the post</h2>
<h2 id="displaycontent">This is the content of the post</h2>

这是它打印到控制台的内容:

Object {title: "This is my title", date: "Fri Feb 19 2016 09:54:37 GMT-0800 (PST)", content: "This is my content"}

Answer 1

for (var i = 0; i < posts.length; i++) {
    var myPost = posts[i];
    for(var key in myPost) {
          console.log(myPost[key]);
     }
  }