JavaScript合并Firebase Realtime Database返回的两个对象以支持forEach遍历

你之前的两种方案报错的核心原因：

• Firebase Realtime Database返回的DataSnapshot实例不是原生JavaScript数组，本身没有数组的concat方法，直接调用会抛出不存在方法的错误
• Object.assign合并后得到的是普通JS对象，没有实现forEach迭代方法，因此调用时会报错

方案1：合并为标准数组后遍历 #

先分别提取两个快照的子节点存入数组，再进行遍历：

const mergedItems = []
// 遍历第一个快照的所有子项
snapshot1.forEach(childSnap => {
  mergedItems.push(childSnap)
  // Firebase快照forEach规则：返回false才会继续遍历全部子项
  return false
})
// 遍历第二个快照的所有子项
snapshot2.forEach(childSnap => {
  mergedItems.push(childSnap)
  return false
})

// mergedItems为标准数组，可直接调用forEach
mergedItems.forEach(item => {
  // 业务逻辑，可正常调用item.val()、item.key等快照原生方法
  console.log(item.key, item.val())
})

方案2：封装模拟原生快照的合并对象 #

如果你需要保持和原生DataSnapshot完全一致的调用习惯，不需要显式转数组，可以直接封装合并对象：

const mergedSnapshot = {
  forEach(callback) {
    // 遍历第一个快照全部子项
    snapshot1.forEach(child => {
      callback(child)
      return false
    })
    // 遍历第二个快照全部子项
    snapshot2.forEach(child => {
      callback(child)
      return false
    })
  },
  // 可选扩展：实现val方法返回合并后的所有数据
  val() {
    return [...snapshot1.val(), ...snapshot2.val()]
  }
}

// 调用方式和原生快照完全一致
mergedSnapshot.forEach(childSnap => {
  // 业务逻辑处理
})

内容的提问来源于stack exchange，提问作者Michael2322