通过对象迭代 - 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>

来源

2014-11-05 koffe14

那么，什么问题？ – MarsOne 2014-11-05 11:00:10

好了，你可以不喜欢这样。

我们扩展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>

来源

2014-11-05 11:10:08 CmajSmith

这实际上使很多感知和容易理解。谢谢！ – koffe14 2014-11-05 11:15:07

我编辑了上面的代码片段，所以现在所有'人'都存储在一个数组中。输出块然后通过循环遍历该数组进行填充。 – CmajSmith 2014-11-05 11:47:59

就使人物的数组，然后在数组迭代。尝试是这样的：

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.

来源

2014-11-05 11:01:50 Cerbrus

应该已经想通了一个..谢谢 – koffe14 2014-11-05 11:03:50

尽管你需要把'birthdate'函数放入你的对象，但你可以在我的答案 – 2014-11-05 11:08:34

-1

把birthdate功能到您person功能。然后把所有的人到一个数组并调用该函数为他们每个人的

for (var i= 0; i< people.length; i++){ 
    var output = document.getElementById("output"); 
    output.innerHTML = output.innerHTML + people[i].birthdate(); 
}

http://jsfiddle.net/v9katu8z/

来源

2014-11-05 11:06:17

张贴的小提琴中看到不要修改'innerHTML'在循环的每次迭代中。 – Cerbrus 2014-11-05 11:12:14

通过对象迭代 - Javascript

回答

相关问题