處理 Web 上的資料列表

取得資料庫參考

要從資料庫讀取或寫入數據,您需要一個firebase.database.Reference實例:

Web modular API

import { getDatabase } from "firebase/database";

const database = getDatabase();

Web namespaced API

var database = firebase.database();

閱讀和寫作列表

追加到數據列表

使用push()方法將資料追加到多用戶應用程式中的清單中。每次將新子項新增至指定的 Firebase 參考時push()方法都會產生一個唯一的金鑰。透過為清單中的每個新元素使用這些自動產生的鍵,多個客戶端可以同時將子元素新增至相同位置,而不會發生寫入衝突。 push()產生的唯一鍵是基於時間戳,因此清單項目會自動按時間順序排序。

您可以使用push()方法傳回的新資料的參考來取得子項自動產生的鍵的值或為子項設定資料。 push()所引用的.key屬性包含自動產生的金鑰。

您可以使用這些自動產生的鍵來簡化資料結構的扁平化。有關更多信息,請參閱資料扇出範例

例如, push()可用於將新貼文新增至社交應用程式中的貼文清單:

Web modular API

import { getDatabase, ref, push, set } from "firebase/database";

// Create a new post reference with an auto-generated id
const db = getDatabase();
const postListRef = ref(db, 'posts');
const newPostRef = push(postListRef);
set(newPostRef, {
    // ...
});

Web namespaced API

// Create a new post reference with an auto-generated id
var postListRef = firebase.database().ref('posts');
var newPostRef = postListRef.push();
newPostRef.set({
    // ...
});

監聽子事件

子事件是為了回應節點子節點發生的特定操作而觸發的,這些操作例如透過push()方法添加新子節點或透過update()方法更新子節點。

事件典型用法
child_added檢索項目清單或偵聽項目清單的新增內容。對於每個現有子項,此事件都會觸發一次,然後每次將新子項新增至指定路徑時都會再次觸發。偵聽器會收到包含新子項目資料的快照。
child_changed監聽清單中項目的變更。每當修改子節點時都會觸發此事件。這包括對子節點的後代的任何修改。傳遞給事件偵聽器的快照包含子層級的更新資料。
child_removed偵聽從清單中刪除的項目。當直接子項目被刪除時,會觸發此事件。傳遞給回調區塊的快照包含已刪除子項目的資料。
child_moved偵聽有序清單中項目順序的變更。 child_moved事件總是跟隨導致商品順序變更的child_changed事件(基於目前的排序方式)。

這些中的每一個都可以用於偵聽資料庫中特定節點的變更。例如,社交部落格應用程式可能會同時使用這些方法來監視貼文評論中的活動,如下所示:

Web modular API

import { getDatabase, ref, onChildAdded, onChildChanged, onChildRemoved } from "firebase/database";

const db = getDatabase();
const commentsRef = ref(db, 'post-comments/' + postId);
onChildAdded(commentsRef, (data) => {
  addCommentElement(postElement, data.key, data.val().text, data.val().author);
});

onChildChanged(commentsRef, (data) => {
  setCommentValues(postElement, data.key, data.val().text, data.val().author);
});

onChildRemoved(commentsRef, (data) => {
  deleteComment(postElement, data.key);
});

Web namespaced API

var commentsRef = firebase.database().ref('post-comments/' + postId);
commentsRef.on('child_added', (data) => {
  addCommentElement(postElement, data.key, data.val().text, data.val().author);
});

commentsRef.on('child_changed', (data) => {
  setCommentValues(postElement, data.key, data.val().text, data.val().author);
});

commentsRef.on('child_removed', (data) => {
  deleteComment(postElement, data.key);
});

監聽值事件

雖然偵聽子事件是讀取資料清單的建議方法,但在某些情況下偵聽清單引用上的值事件很有用。

value觀察器附加到資料清單會將整個資料清單作為單一快照傳回,然後您可以循環存取各個子項目。

即使查詢只有一個符合項,快照仍然是一個清單;它只包含一個項目。要存取該項目,您需要循環結果:

Web modular API

import { getDatabase, ref, onValue } from "firebase/database";

const db = getDatabase();
const dbRef = ref(db, '/a/b/c');

onValue(dbRef, (snapshot) => {
  snapshot.forEach((childSnapshot) => {
    const childKey = childSnapshot.key;
    const childData = childSnapshot.val();
    // ...
  });
}, {
  onlyOnce: true
});

Web namespaced API

ref.once('value', (snapshot) => {
  snapshot.forEach((childSnapshot) => {
    var childKey = childSnapshot.key;
    var childData = childSnapshot.val();
    // ...
  });
});

當您想要在單一操作中取得清單的所有子項目而不是偵聽其他子項目新增事件時,此模式非常有用。

排序和過濾數據

您可以使用即時資料庫Query類別來擷取按鍵、按值或按子值排序的資料。您也可以將排序結果過濾為特定數量的結果或一系列鍵或值。

對資料進行排序

若要擷取排序的數據,請先指定排序方法之一來確定結果的排序方式:

方法用法
orderByChild()依指定子鍵或巢狀子路徑的值對結果進行排序。
orderByKey()按子鍵對結果進行排序。
orderByValue()依子值對結果進行排序。

您一次只能使用一種排序方式。在同一查詢中多次呼叫 order-by 方法會引發錯誤。

以下範例示範如何擷取按星數排序的使用者熱門貼文清單:

Web modular API

import { getDatabase, ref, query, orderByChild } from "firebase/database";
import { getAuth } from "firebase/auth";

const db = getDatabase();
const auth = getAuth();

const myUserId = auth.currentUser.uid;
const topUserPostsRef = query(ref(db, 'user-posts/' + myUserId), orderByChild('starCount'));

Web namespaced API

var myUserId = firebase.auth().currentUser.uid;
var topUserPostsRef = firebase.database().ref('user-posts/' + myUserId).orderByChild('starCount');

這定義了一個查詢,當與子偵聽器結合使用時,該查詢將根據使用者 ID 將用戶端與資料庫中路徑中的使用者貼文同步,並按每個貼文收到的星數排序。這種使用 ID 作為索引鍵的技術稱為資料扇出,您可以在建置資料庫中閱讀更多相關資訊。

orderByChild()方法的呼叫指定用於對結果進行排序的子鍵。在這種情況下,帖子按其各自的"starCount"子項目的值排序。如果您的資料如下所示,也可以按巢狀子項目對查詢進行排序:

"posts": {
  "ts-functions": {
    "metrics": {
      "views" : 1200000,
      "likes" : 251000,
      "shares": 1200,
    },
    "title" : "Why you should use TypeScript for writing Cloud Functions",
    "author": "Doug",
  },
  "android-arch-3": {
    "metrics": {
      "views" : 900000,
      "likes" : 117000,
      "shares": 144,
    },
    "title" : "Using Android Architecture Components with Firebase Realtime Database (Part 3)",
    "author": "Doug",
  }
},

在這種情況下,我們可以透過在orderByChild()呼叫中指定巢狀子項的相對路徑,按嵌套在metrics鍵下的值對清單元素進行排序。

Web modular API

import { getDatabase, ref, query, orderByChild } from "firebase/database";

const db = getDatabase();
const mostViewedPosts = query(ref(db, 'posts'), orderByChild('metrics/views'));

Web namespaced API

var mostViewedPosts = firebase.database().ref('posts').orderByChild('metrics/views');

有關其他資料類型如何排序的詳細信息,請參閱查詢資料如何排序

過濾數據

要過濾數據,您可以在建構查詢時將任何限製或範圍方法與排序方法結合。

方法用法
limitToFirst()設定從有序結果清單開頭傳回的最大項目數。
limitToLast()設定從有序結果清單末尾傳回的最大項目數。
startAt()傳回大於或等於指定鍵或值的項目,取決於所選的排序方法。
startAfter()根據所選的排序方法,傳回大於指定鍵或值的項目。
endAt()傳回小於或等於指定鍵或值的項目,取決於所選的排序方法。
endBefore()根據所選的排序方法,傳回小於指定鍵或值的項目。
equalTo()傳回等於指定鍵或值的項目,取決於所選的排序方法。

與排序方法不同,您可以組合多個限製或範圍函數。例如,您可以組合startAt()endAt()方法將結果限制為指定的值範圍。

限制結果數量

您可以使用limitToFirst()limitToLast()方法來設定給定事件要同步的子層級的最大數量。例如,如果您使用limitToFirst()將限制設為 100,則最初最多只會收到 100 個child_added事件。如果您的 Firebase 資料庫中儲存的項目少於 100 個,則每個項目都會觸​​發child_added事件。

當項目發生變更時,您會收到進入查詢的項目的child_added事件和退出查詢的項目的child_removed事件,以便總數保持在 100。

以下範例示範了範例部落格應用程式如何定義一個查詢來檢索所有使用者最近發表的 100 篇貼文的清單:

Web modular API

import { getDatabase, ref, query, limitToLast } from "firebase/database";

const db = getDatabase();
const recentPostsRef = query(ref(db, 'posts'), limitToLast(100));

Web namespaced API

var recentPostsRef = firebase.database().ref('posts').limitToLast(100);

此範例僅定義了一個查詢,要實際同步數據,它需要附加一個偵聽器

按鍵或值過濾

您可以使用startAt()startAfter()endAt()endBefore()equalTo()來選擇查詢的任意起始點、結束點和等價點。這對於對資料進行分頁或尋找具有特定值的子項目非常有用。

查詢資料如何排序

本節說明如何透過Query類別中的每個 order-by 方法對資料進行排序。

orderByChild

使用orderByChild()時,包含指定子鍵的資料會依下列方式排序:

  1. 指定子鍵的值為null子項排在第一位。
  2. 接下來是指定子鍵值為false的子項。如果多個子項的值為false ,則它們按鍵按字典順序排序。
  3. 接下來是指定子鍵值為true的子項。如果多個子項的值為true ,則它們按鍵按字典順序排序。
  4. 接下來是具有數值的子項,依升序排序。如果指定子節點的多個子節點具有相同的數值,則它們會按鍵排序。
  5. 字串位於數字之後,並依字典順序升序排序。如果指定子節點的多個子節點具有相同的值,則它們按鍵按字典順序排序。
  6. 物件排在最後,並依字典順序按鍵升序排序。

orderByKey

當使用orderByKey()對資料進行排序時,資料將按鍵升序傳回。

  1. 具有可解析為 32 位元整數的鍵的子項排在前面,按升序排序。
  2. 接下來是以字串值作為鍵的子項,依字典順序升序排列。

orderByValue

使用orderByValue()時,子項會依其值排序。排序標準與orderByChild()中的相同,只是使用節點的值而不是指定子鍵的值。

分離監聽器

透過呼叫 Firebase 資料庫引用上的off()方法來刪除回呼。

您可以透過將單一監聽器作為參數傳遞給off()來刪除它。在不帶參數的位置呼叫off()會刪除該位置的所有偵聽器。

在父監聽器上呼叫off()不會自動刪除在其子節點上註冊的監聽器;也必須在任何子偵聽器上呼叫off()以刪除回呼。

下一步