浏览器中对象数组无法正常显示？JavaScript条件渲染问题求助

嘿，我看你这段代码已经能实现筛选年龄小于65岁的用户并展示姓名的功能了，不过我可以给你几个更实用的优化方向——毕竟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>');
  }
}

这段代码会遍历people数组，把年龄小于65的用户全名输出到页面上，用document.write确实能看到效果，但它有个大坑：如果在页面加载完成后执行，会直接清空整个页面的内容，这显然不是我们想要的。

更优雅的页面展示方案 #

推荐用DOM操作来添加内容，不会破坏原有页面结构：

1. 先在HTML里准备一个用来存放结果的容器：

<div id="result-container"></div>

2. 然后用现代JS语法来实现筛选和渲染：

// 用const声明常量，避免意外修改
const people = [
  { firstName: 'John', lastName: 'Doe', age: 23 },
  { firstName: 'Jane', lastName: 'Doe', age: 53 }
];

// 获取页面上的容器元素
const resultContainer = document.getElementById('result-container');

// 先筛选出符合条件的用户，逻辑更清晰
const eligiblePeople = people.filter(person => person.age < 65);

// 遍历筛选后的数组，逐个添加到页面
eligiblePeople.forEach(person => {
  // 创建一个p标签来存放单条结果
  const resultItem = document.createElement('p');
  // 用模板字符串拼接文本，比加号更易读
  resultItem.textContent = `${person.firstName} ${person.lastName} has printed to document.`;
  // 把元素添加到容器里
  resultContainer.appendChild(resultItem);
});

为什么这样更好？ #

• 用filter和forEach替代传统for循环，代码更简洁易读
• 用DOM元素创建的方式添加内容，不会覆盖原有页面
• 模板字符串（`${xxx}`）让文本拼接更直观，不容易出错
• 用const/let替代var，避免变量提升带来的潜在问题

如果只是想在控制台查看结果，直接把输出改成console.log就行：

people.forEach(person => {
  if (person.age < 65) {
    console.log(`${person.firstName} ${person.lastName} has printed to console.`);
  }
});

内容的提问来源于stack exchange，提问作者Don199