控制台中的数组 output 与页面上显示的数组不同

Question

我正在从 firebase 获取数据，该数据的结构为 collection.subcollection.collection.document 格式。

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 )
} )()

分解

1. 使用 setTimeout 是因为用户的名称是从不同的 function 获取的，它在加载 dom 时加载，并且需要一段时间来填充存储名称的数组。

2. Db 中的日期以毫秒和字符串格式存储。

3. 然后将日期转换并推送到数组 (datesArr) 中，以便可以根据日期对其进行排序。

4. 数组排序后，日期显示在页面上，最接近的日期最先显示，后面的日期显示。

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

这是控制台中的 output，但它记录了 10 arrays，我不知道为什么会这样。

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

Answer 1

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

Answer 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);