javascript - 显示对象数组在浏览器中不起作用

Question

我想创建一个对象数组并在满足特定条件时显示特定的属性列表。

当我将它打印到控制台或使用 document.write 时，以下代码会执行我想要的操作。

var people = [{ 
    firstName: 'John',
    lastName: 'Doe',
    age: 23,
    },{ 
    firstName: 'Jane',
    lastName: 'Doe',
    age: 53,
    }]

    for(i = 0; i < people.length; i++){
        if(people[i].age < 65){
            document.write(people[i].firstName + ' ' + 
            people[i].lastName + ' has printed to document. <br>');             
        }
    }

但是当我使用 document.getElementById 在浏览器中运行代码时，只显示最后一项。

for(i = 0; i < people.length; i++){
    if(people[i].age < 65){
        result = 'Only ' + people[i].firstName + ' ' + 
            people[i].lastName + ' is printed to document. Why?';               
    }
}
document.getElementById('names').innerHTML = result;

有人可以向我解释为什么所有项目都使用 document.write 出现吗？使用 document.getElementById 时只显示最后一项？

Answer 1

问题出在这一行:

result = 'Only ' + people[i].firstName + ' ' + 
        people[i].lastName + ' is printed to document. Why?';

因为您要将消息字符串分配给 result 变量。由于您处于 循环 中，result 变量将只保存最后一个值。

您必须将消息concat 到result 变量。

for(i = 0; i < people.length; i++){
    if(people[i].age < 65){
        result += 'Only ' + people[i].firstName + ' ' + 
            people[i].lastName + ' is printed to document. Why?';               
    }
}

此外，您可以使用字符串模板来格式化消息。

result += `Only ${people[i].firstName} ${people[i].lastName} is printed to document. Why?`;