如何将JavaScript中forEach遍历的输出值正确渲染到HTML页面

你当前写的代码虽然可以运行，但渲染逻辑的位置不合理：

• 把DOM写入操作放在了forEach的遍历回调里，每处理一个时区就会触发一次页面重绘，性能差，遍历项多的时候容易出现页面闪烁
• 每次遍历都重新生成new Date()实例，不同时区的时间基准可能出现毫秒级偏差
• 内容拼接时没有做排版分隔，可读性不好

HTML部分 #

<p id="output"></p>

JavaScript部分 #

setInterval(() => {
  // 统一获取当前时间作为所有时区的计算基准，避免时间偏差
  const currentTime = new Date();
  const timezoneList = ['Asia/Taipei', 'America/New_York'];
  let renderContent = '';

  // 遍历所有时区拼接展示内容
  timezoneList.forEach(tz => {
    const localTime = currentTime.toLocaleString('zh-CN', {
      timeZone: tz,
      hour12: false
    });
    renderContent += `<div><b>${tz}</b>：${localTime}</div>`;
  });

  // 所有内容拼接完成后，一次性写入DOM完成渲染
  document.getElementById('output').innerHTML = renderContent;
}, 1000);

• 核心修改点是把DOM赋值逻辑移到遍历结束后，等所有内容拼接完成再一次性渲染，这也是循环生成内容插入页面的通用正确写法
• toLocaleString的第一个参数可以按需替换，比如你原来用的ja-JP就会输出日式格式的时间，第二个参数里可以加配置项调整是否显示12小时制、是否显示秒数等
• 如果需要展示全量时区，可以自行查询JavaScript获取所有时区列表的实现方法，直接往timezoneList数组里追加对应时区标识即可

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