在这种情况下，使用 forEach 对 Firebase 进行了多少次读取？

Question

最近我开始将 firebase(RTDB) 用于 WEB(JS)，而且我对 JS 还是很陌生。 我想做一个包含国家/地区、特定日期和时间信息的小型测试/游乐场应用程序。 我在 Firebase 中有以下结构：

APP NAME
     {
      "01-01-2020": {
        "Austria": {
          "1:00": "INFO"
        },
        "Belgium": {
          "11:00": "info"
        },
        "Germany": {
          "2:00": "INFO"
        }
      }  

这个想法是当用户从日历中选择日期以循环日期并获取所有国家的小时和“信息”。 我设法使 i 使用以下代码：

const calendar = document.querySelector('.fres')

calendar.addEventListener("change", () => {
  const x = document.querySelector('.fres').valueAsDate;
  const result = "0" + x.getDate() + "-" + "0" + (x.getMonth() + 1) + "-" + x.getFullYear();
  database.ref(result).once('value').then((snapshot) => {
    if (snapshot.exists()) {
      let str = '<ul>'
      snapshot.forEach(data => {
        data.forEach(e => {
          str += '<li class="hey">' +
            `<img src="${data.key}.png">
          <span class="ct"> ${data.key}</span>
          <span> ${e.key}</span>
          <div class="tooltip"><img src="vector.png">
          <span class="tooltiptext"> ${e.val()}</span>` + '</li>';
          str += '</ul>'
          document.querySelector("#slideContainer").innerHTML = str;
          console.log(str);
        });
      });
    }
    else {
      document.querySelector("#slideContainer").innerHTML = "There is no info on this day!";
    }
  })
})

但我想我对这个 JS 代码有问题......为什么？ 当我制作它并检查 HTML 上的结果时，我从 Firebase 读取了大约 50 次，并产生了大量数据使用：526Kb 除以大约 50 次读取大约是 10kb，但我的整个数据库是 191B。 当我注意到我记录了“str”并通过对 3 个国家/地区的单个请求获得 3 个结果时，如下所示：

app.js:62 <ul><li class="hey"><img src="Austria.png">
          <span class="ct"> Austria</span>
          <span> 1:00-2:00</span>
          <div class="tooltip"><img src="vector.png">
          <span class="tooltiptext"> INFO</span></li></ul>
app.js:62 <ul><li class="hey"><img src="Austria.png">
          <span class="ct"> Austria</span>
          <span> 1:00-2:00</span>
          <div class="tooltip"><img src="vector.png">
          <span class="tooltiptext"> INFO</span></li></ul><li class="hey"><img src="Belgium.png">
          <span class="ct"> Belgium</span>
          <span> 11:00-12:00</span>
          <div class="tooltip"><img src="vector.png">
          <span class="tooltiptext"> info</span></li></ul>
app.js:62 <ul><li class="hey"><img src="Austria.png">
          <span class="ct"> Austria</span>
          <span> 1:00-2:00</span>
          <div class="tooltip"><img src="vector.png">
          <span class="tooltiptext"> INFO</span></li></ul><li class="hey"><img src="Belgium.png">
          <span class="ct"> Belgium</span>
          <span> 11:00-12:00</span>
          <div class="tooltip"><img src="vector.png">
          <span class="tooltiptext"> info</span></li></ul><li class="hey"><img src="Bulgaria.png">
          <span class="ct"> Bulgaria</span>
          <span> 1:00-2:00</span>
          <div class="tooltip"><img src="vector.png">
          <span class="tooltiptext"> INFO</span></li></ul>

我担心代码会在单个请求中进行大量读取，将来如果应用程序上有更多用户，这将是一个问题。

谢谢你，如果你读到这里，如果有人能给我建议或告诉我这是否正常，我会非常高兴。

谢谢！

Answer 1

您的 forEach 循环不会在此处产生任何额外费用。 所有读取成本都发生在这一行中：

  database.ref(result).once('value').then((snapshot) => {

从查询中获得快照后，它会在内存中包含该查询的全部结果。 你可以用它做任何你想做的事。

如果您想降低读取成本，您应该尝试减少读取数据，或者减少读取频率。