使用javascript列出for循环中的所有项目

Question

我正在寻找一种方法来列出以下循环中的每个firstname。目前它循环遍历每个名​​字，最后是杰克，只显示它。我希望它显示所有这些像：约翰，简，乔

var person = [{firstName:"John"}, {firstName:"Jane"}, {firstName:"Jack"}]; 

for (var i = 0; i < person.length; i++) { 
document.getElementById("demo").innerHTML = person[i].firstName; 
} 

任何人都可以建议我将如何做到这一点？

Answer 1

的问题是，你要覆盖innerHTML值，而不是你需要使用“+”到你的价值附加到innerHTML属性：

var person = [{firstName:"John"}, {firstName:"Jane"}, {firstName:"Jack"}]; 
var demo = document.getElementById("demo"); 

for (var i = 0, len = person.length; i < len; i++) { 
    demo.innerHTML += person[i].firstName + ' '; 
} 

看看这个codepen。我添加了一些修改，使代码更高性能。

Answer 2

请看看下面的代码：

var person = [{firstName:"John"}, {firstName:"Jane"}, {firstName:"Jack"}], 
html = ""; 

for (var i = 0; i < person.length; i++) { 
html += person[i].firstName; 
} 

document.getElementById("demo").innerHTML = html; 

由于你没有使用“+ =”用的innerHTML每次覆盖。我喜欢事先创建一个字符串，并将其设置为无。然后你可以添加一切，只需要调用一次innerHTML。

希望这会有所帮助！

Answer 3

还有一种方法使用更functional风格

"use strict"; 
 

 
var people = [{firstName:"John"}, {firstName:"Jane"}, {firstName:"Jack"}]; 
 

 
var node = document.getElementById('demo'); 
 

 
node.innerHTML = people.map(function(person){ 
 
    return person.firstName; 
 
}).join(', ');

#demo { 
 
    padding: 1em; 
 
    background-color: #def; 
 
    border: 1px solid gray 
 
}

<div id="demo"></div>

做