如何用for/forEach循环从对象数组填充class为name的HTML元素

我已经为这个问题困扰许久，希望通过JavaScript的for或forEach循环，从对象数组中提取fullName值，填充HTML中所有class为name的h2元素。尝试后虽成功填充元素，但所有元素仅显示数组最后一个对象的fullName。我了解可以使用dataset（data-id）属性实现，但好奇仅通过循环该如何解决，恳请帮助。

HTML代码 #

<div class="container">
      <section>
        <div class="notification">
          <h2 class="name" id="firstName"></h2>
          <p class="notif-text">reacted to your recent post My first tournament today!</p>
        </div>
      </section>
      <section>
        <div class="notification">
          <h2 class="name" id="secondName"></h2>
          <p class="notif-text">followed you</p>
        </div>
      </section>
      <section>
        <div class="notification">
          <h2 class="name"></h2>
          <p class="notif-text">has joined your group Chess Club</p>
        </div>
      </section>
</div>

JavaScript代码（原错误代码） #

const people = [
  {fullName: 'Mark Webber', notifText: 'reacted to your recent post My first tournament today!', time: '1m ago', message: ''},
  {fullName: 'Angela Grey', notifText: 'followed you', time: '5m ago', message: ''},
  {fullName: 'Jacob Thompson', notifText: 'has joined your group Chess Club', time: '1 day ago', message: ''},
  {fullName: 'Rizky Hasanuddin', notifText: 'sent you a private message', time: '5 days ago', message: `Hello, thanks for setting up the Chess Club. I have been a member for a few weeks now and
    I am already having lots of fun and improving my game.`},
  {fullName: 'Kimberly Smith', notifText: 'commented on your picture', time: '1 week ago', message: ''},
  {fullName: 'Nathan Peterson', notifText: 'reacted to your recent post 5 end-game strategies to increase your win rate', time: '2 weeks ago', message: ''},
  {fullName: 'Anna Kim', notifText: 'left the group Chess Club', time: '2 weeks ago', message: ''}
]

let names = document.querySelectorAll('.name')

for(let i = 0; i < people.length; i++ ) {  
  names.forEach(function(oneName){
      oneName.textContent = people[i].fullName
  })
}

当前代码逻辑是：外层循环遍历people数组的每一项，每次循环都把所有.name元素的文本内容全部替换成当前people[i].fullName。当循环执行到最后一次时，所有.name元素都会被设置为people数组最后一项的fullName，所以最终所有元素都显示同一个值。

核心思路是让第i个.name元素对应people数组中第i个对象的fullName，避免重复覆盖所有元素。以下是两种实现方式：

方法一：使用for循环按索引对应 #

const people = [
  {fullName: 'Mark Webber', notifText: 'reacted to your recent post My first tournament today!', time: '1m ago', message: ''},
  {fullName: 'Angela Grey', notifText: 'followed you', time: '5m ago', message: ''},
  {fullName: 'Jacob Thompson', notifText: 'has joined your group Chess Club', time: '1 day ago', message: ''},
  {fullName: 'Rizky Hasanuddin', notifText: 'sent you a private message', time: '5 days ago', message: `Hello, thanks for setting up the Chess Club. I have been a member for a few weeks now and I am already having lots of fun and improving my game.`},
  {fullName: 'Kimberly Smith', notifText: 'commented on your picture', time: '1 week ago', message: ''},
  {fullName: 'Nathan Peterson', notifText: 'reacted to your recent post 5 end-game strategies to increase your win rate', time: '2 weeks ago', message: ''},
  {fullName: 'Anna Kim', notifText: 'left the group Chess Club', time: '2 weeks ago', message: ''}
]

let names = document.querySelectorAll('.name')

// 按索引一一对应，循环次数以.name元素数量为准，避免越界
for(let i = 0; i < names.length; i++ ) {  
  names[i].textContent = people[i].fullName
}

方法二：使用forEach的索引参数 #

const people = [
  {fullName: 'Mark Webber', notifText: 'reacted to your recent post My first tournament today!', time: '1m ago', message: ''},
  {fullName: 'Angela Grey', notifText: 'followed you', time: '5m ago', message: ''},
  {fullName: 'Jacob Thompson', notifText: 'has joined your group Chess Club', time: '1 day ago', message: ''},
  {fullName: 'Rizky Hasanuddin', notifText: 'sent you a private message', time: '5 days ago', message: `Hello, thanks for setting up the Chess Club. I have been a member for a few weeks now and I am already having lots of fun and improving my game.`},
  {fullName: 'Kimberly Smith', notifText: 'commented on your picture', time: '1 week ago', message: ''},
  {fullName: 'Nathan Peterson', notifText: 'reacted to your recent post 5 end-game strategies to increase your win rate', time: '2 weeks ago', message: ''},
  {fullName: 'Anna Kim', notifText: 'left the group Chess Club', time: '2 weeks ago', message: ''}
]

let names = document.querySelectorAll('.name')

// 遍历.names元素，利用第二个参数index获取当前元素的索引
names.forEach(function(oneName, index){
  // 可选：添加判断避免越界（如果people数组长度小于.names数量）
  if (people[index]) {
    oneName.textContent = people[index].fullName
  }
})

补充说明：如果.name元素数量和people数组长度不一致，建议添加越界判断（如方法二中的if (people[index])），防止出现undefined报错。

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