如何为MongoDB查询返回的消息添加序号（JavaScript循环实现）

从MongoDB查询获取到的用户数据如下：

{
  _id: new ObjectId("623rf3f22275f399f88bb"),
  first_name: 'Are',
  last_name: 'You',
  email: 'helping@stackoverflow.me',
  password: '$2a$10$BSmezAjYkqU.234t65sT1pPOhg5jxosYrFzwjqXM3On3v.b7p46K1WS',
  username: 'lcd1',
  Messages: [
    {
      msgcontent: 'The user whatever said: whatsup.'
    },
    {
      msgcontent: 'The user whatever said: whatsup.'
    },
    {
      msgcontent: 'The user whatever said: whatsup.'
    },
    {
      msgcontent: 'The user whatever said: whatsup.'
    },
    {
      msgcontent: 'The user whatever said: whatsup.'
    }
  ]
}

已成功在页面展示消息内容，但尝试为每条消息添加“消息1、消息2……”的序号时出现问题，当前代码如下：

<% if (messages) { %>

            <% if (messages != "") { %>
                <% for (const { msgcontent } of messages) { %>
                <li><%  for (nr = 1; nr < messages.length; nr++) { %><%= [nr] %><% }%>  <div class="displaymsg"><%= msgcontent %></div></li>
                <% } %>
        <% } else if (messages == "") { %>
                <div class="displayempty"><%= "You currently have no messages." %></div>
            <% } %>
        <% } %>

这段代码会在每条消息前显示所有序号，而非对应单个序号，请问该如何正确实现需求？

问题出在嵌套了不必要的循环：外层for...of已经在遍历每条消息，内层又加了一个循环遍历所有序号，导致每条消息都输出了所有序号。

只需保留外层循环并获取当前消息的索引，就能给每条消息分配对应序号，以下是两种可行的实现方式：

方式一：使用带索引的for循环 #

<% if (messages && messages.length > 0) { %>
    <% for (let i = 0; i < messages.length; i++) { %>
        <li>消息<%= i + 1 %>: <div class="displaymsg"><%= messages[i].msgcontent %></div></li>
    <% } %>
<% } else { %>
    <div class="displayempty">You currently have no messages.</div>
<% } %>

方式二：使用forEach遍历（推荐） #

<% if (messages && messages.length > 0) { %>
    <% messages.forEach((msg, index) => { %>
        <li>消息<%= index + 1 %>: <div class="displaymsg"><%= msg.msgcontent %></div></li>
    <% }) %>
<% } else { %>
    <div class="displayempty">You currently have no messages.</div>
<% } %>

说明： #

• 数组索引从0开始，通过index + 1即可得到从1开始的序号
• 合并判断逻辑：messages && messages.length > 0可同时处理messages为null/undefined或空数组的情况，比原代码更简洁

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