通过对象迭代 - Javascript
我是决不是JavaScript的专家,并试图学习。通过对象迭代 - Javascript
我创建了一段简单的代码,添加了一个人物对象,并用一些格式不正确的字符串在HTML中显示它。因为我有两个人(p1和p2),我希望他们都加入div“输出”。这个想法是创建每个人物对象的列表并将这些属性放置在列表项中。
我的问题是 - 我如何通过迭代显示每个人的对象?
谢谢
<body>
<div id="output"></div>
<script>
function person (fname, lname, age, birth)
{
this.firstname = fname;
this.lastname = lname;
this.age = age;
this.birth = birth;
}
var p1 = new person("John", "Dhoe", 22, new Date("December 13, 1973 11:13:00").toLocaleDateString());
var p2 = new person("Mr", "Andersson", 56, new Date("October 14, 1968 11:13:00").toLocaleDateString());
p1.birthdate = function() {
return "<ul>" +
"<li>" + "<b>Name: </b>" + this.firstname + " " + this.lastname + "</li>" +
"<li>" + "<b>Age: </b>" + this.age + "</li>" +
"<li>"+ "<b>Birthdate: </b>" + this.birth + "</li>" +
"</ul>";
}
output.innerHTML = p1.birthdate();
</script>
</body>
好了,你可以不喜欢这样。
我们扩展person
与返回数据的html呈现方法。它可用于创建每个新的person
,因此p1
和p2
都可以使用它。 我们用p1.birthdate()
和p2.birthdate()
手动输出数据。但是如果我们需要很多persons
来处理,我们希望将persons
存储到某个数组中,然后遍历它。
var persons = [];
function person (fname, lname, age, birth) {
this.firstname = fname;
this.lastname = lname;
this.age = age;
this.birth = birth;
}
person.prototype.birthdate = function() {
var html = '';
html += "<ul>" +
"<li>" + "<b>Name: </b>" + this.firstname + " " + this.lastname + "</li>" +
"<li>" + "<b>Age: </b>" + this.age + "</li>" +
"<li>"+ "<b>Birthdate: </b>" + this.birth + "</li>" +
"</ul>";
return html;
}
persons.push(new person("John", "Dhoe", 22, new Date("December 13, 1973 11:13:00").toLocaleDateString()));
persons.push(new person("Mr", "Andersson", 56, new Date("October 14, 1968 11:13:00").toLocaleDateString()));
var output = document.getElementById('output');
for (var i = 0; i < persons.length; i++) {
output.innerHTML += persons[i].birthdate();
}
<div id="output"></div>
就使人物的数组,然后在数组迭代。尝试是这样的:
var persons = [
new person("John", "Dhoe", 22, new Date("December 13, 1973 11:13:00").toLocaleDateString()),
new person("Mr", "Andersson", 56, new Date("October 14, 1968 11:13:00").toLocaleDateString())
]; // An array of persons...
var html = '';
for(var i = 0; i < persons.length; i++){ // Iterate over all persons
html += persons[i].birthdate(); // And add the HTML for each person to `html`
}
output.innerHTML = html; // Finally, add the persons html to the output.
应该已经想通了一个..谢谢 – koffe14 2014-11-05 11:03:50
尽管你需要把'birthdate'函数放入你的对象,但你可以在我的答案 – 2014-11-05 11:08:34
把birthdate
功能到您person
功能。然后把所有的人到一个数组并调用该函数为他们每个人的
for (var i= 0; i< people.length; i++){
var output = document.getElementById("output");
output.innerHTML = output.innerHTML + people[i].birthdate();
}
张贴的小提琴中看到不要修改'innerHTML'在循环的每次迭代中。 – Cerbrus 2014-11-05 11:12:14
那么,什么问题? – MarsOne 2014-11-05 11:00:10