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

e0bqpujr 于 2023-02-02 发布在 Java

关注(0)|答案(2)|浏览(250)

我正在从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，是因为用户名是从另一个函数获取的，该函数在加载dom时加载，并且需要一段时间来填充存储用户名的数组。

Db中的日期以毫秒和字符串格式存储。
1.然后转换日期并将其推入数组（datesArr），以便可以根据日期对数组进行排序。
1.数组排序后，日期将显示在页面上，最接近的日期显示在最前面，后面的日期显示在最前面。

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

这是控制台中的输出，但它记录了10个阵列，我不知道为什么会发生这种情况。

这就是数组内容在页面上的显示方式

JavaScript

来源：https://stackoverflow.com/questions/75311726/array-output-in-console-and-when-displayed-on-page-are-different

2条答案

按热度按时间

qojgxg4l1#

它显示的是10，但最大值是9，因为数组的一般规则是第一个是零，在这个过程中继续减一。要改变这一点，你可以为每个变量创建一个变量或循环，在那里它们加一。

赞(0）回复(0）举报 2023-02-02

kq0g1dla2#

在循环中显示日期的方式将无法正常工作。您添加一个日期，对所有日期进行排序，然后将最近的日期添加到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);

赞(0）回复(0）举报 2023-02-02

我来回答

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

2条答案

相关问题

热门标签

最新问答