如何显示数组中所有对象的全部属性？现有代码无输出求解决

问题场景 #

我有一个由对象组成的words数组，想要显示所有对象的全部属性，示例仅展示两个对象，实际数量更多。示例数组代码如下：

const words = [
  {
    word:'interrogate',
    meaning:'Formally question'
  },
  {
    word:'tiresome',
    meaning:'fatiguing'
  }
];

我尝试了以下代码，但没有任何输出（result是用于展示结果的p标签id）：

for(var tn= 0; tn<words.length-1; tn++){
    document.getElementById("result").innerHTML=words[tn].meaning;
};

问题分析 #

1. 循环条件错误：tn<words.length-1会跳过最后一个元素，若数组元素较少（比如示例中的2个），循环执行次数不足，甚至会导致内容被覆盖后无法正常显示；正确的循环条件应为tn<words.length。
2. 内容被覆盖：每次循环用=赋值innerHTML，会直接替换掉之前的内容，最终只能看到最后一次循环的结果，应该用+=来追加内容。
3. 未展示全部属性：原代码只取了meaning属性，没有显示word属性，不符合“显示所有对象的全部属性”的需求。
4. DOM加载时机问题：如果脚本在DOM元素加载前执行，document.getElementById("result")会获取到null，自然无法输出内容。

修正后的代码 #

方案一：修复循环逻辑并追加内容

// 确保在DOM加载完成后执行代码
document.addEventListener('DOMContentLoaded', function() {
    const words = [
      {
        word:'interrogate',
        meaning:'Formally question'
      },
      {
        word:'tiresome',
        meaning:'fatiguing'
      }
    ];
    const resultEl = document.getElementById("result");
    // 先清空容器原有内容
    resultEl.innerHTML = '';
    // 遍历数组，追加所有对象的属性
    for(let tn = 0; tn < words.length; tn++){
        const currentWord = words[tn];
        resultEl.innerHTML += `<strong>${currentWord.word}</strong>: ${currentWord.meaning}<br>`;
    }
});

方案二：使用forEach简化代码

document.addEventListener('DOMContentLoaded', function() {
    const words = [
      {
        word:'interrogate',
        meaning:'Formally question'
      },
      {
        word:'tiresome',
        meaning:'fatiguing'
      }
    ];
    const resultEl = document.getElementById("result");
    resultEl.innerHTML = '';
    words.forEach(item => {
        resultEl.innerHTML += `<strong>${item.word}</strong>: ${item.meaning}<br>`;
    });
});

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