通過對象迭代 - 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

回答

相關問題