控制台中的数组输出与页面上显示的数组不同答案

【问题标题】：array output in console and when displayed on page are different控制台中的数组输出与页面上显示的数组不同
【发布时间】：2023-02-01 23:24:27
【问题描述】：

我正在从以 collection.subcollection.collection.document 格式构建的 firebase 中获取数据。

let datesArr = [];
( () =>
{
  setTimeout( () =>
  {
    for ( let email of userEmail )
    {
      db.collection( `appointments/${ email }/details` ).onSnapshot( ( querySnapshot ) =>
      {
        querySnapshot.forEach( ( doc ) =>
        {
          let newDate = new Date (doc.data().dateInMills.at(-1) * 1000)

          datesArr.push( newDate  )
          datesArr.sort( ( a, b ) =>
          {
            return b - a
          })
          console.log( datesArr )
          scheduleTableRows.innerHTML += `<div><div class='flex flex-col'>${ datesArr.at(-1) }</div></div>`
        } )
      } )
    }
  }, 1000 )
} )()

分解

使用 setTimeout 是因为用户的名称是从加载 dom 时加载的不同函数中获取的，并且需要一段时间来填充存储名称的数组。
Db 中的日期以毫秒和字符串格式存储。
然后将日期转换并推送到数组 (datesArr) 中，以便可以根据日期对其进行排序。
数组排序后，日期显示在页面上，最接近的日期最先显示，后面的日期显示。

问题当我控制台记录 dateArr 时，它会根据需要以正确的顺序显示日期，但是当我在页面上显示数组的内容时，它不一样，屏幕截图 -

这是控制台中的输出，但它记录了 10 个数组，我不知道为什么会这样。

数组的内容在页面上是这样显示的

【问题讨论】：

标签： javascript arrays google-cloud-firestore

【解决方案1】：

它显示 10，但由于数组的共同规则，第一个为零并且在此过程中继续减少一个，因此最大值为 9。要改变这一点，您可以为每个添加一个的地方创建变量或循环。真诚的，我

【讨论】：

【解决方案2】：

您在循环内显示日期的方式将无法正常工作。您添加一个日期，对所有日期进行排序，然后将最近的日期添加到 HTML。如果您刚刚添加的日期不是最近的，您将只显示与上一次迭代相同的日期。

您应该将所有日期放入数组中，然后对其进行排序，然后显示所有日期。

let datesArr = [];
setTimeout(() => {
  let html = '';
  for (let email of userEmail) {
    db.collection(`appointments/${ email }/details`).onSnapshot((querySnapshot) => {
      datesArr = querySnapshot.map(doc => doc.data().dateInMills.at(-1) * 1000);
      datesArr.sort((a, b) => {
        return b - a
      });
      html += datesArr.map(item => `<div><div class='flex flex-col'>${item}</div></div>`).join('');
    });
  }
  scheduleTableRows.innerHTML += html;
}, 1000);

【讨论】：