如何在JavaScript中按日期对Firebase实时数据库的JSON数据排序？

步骤1：将Firebase返回的对象转换为数组 #

Firebase Realtime Database返回的是键值对结构的对象，无法直接用array.sort，得先转成数组。如果需要保留艺术品ID，用Object.entries()；只需要数据部分的话用Object.values()：

// 假设从Firebase获取的数据存在artworks对象中
const artworksArray = Object.entries(artworks).map(([id, data]) => ({
  id,
  ...data
}));

步骤2：解析日期为可排序的Date对象 #

你的日期格式是"12-12-1212"，先明确是日-月-年还是月-日-年，再转成Date对象才能正确排序：

// 处理"DD-MM-YYYY"格式的日期
function parseDate(dateStr) {
  const [day, month, year] = dateStr.split('-');
  // 注意JS中月份从0开始，要减1
  return new Date(year, month - 1, day);
}

// 如果是"MM-DD-YYYY"格式，调整拆分顺序
// const [month, day, year] = dateStr.split('-');

步骤3：按日期排序数组 #

现在可以用sort方法实现排序，按需选择正序或倒序：

// 按日期从新到旧排序（最新作品在前）
artworksArray.sort((a, b) => {
  const dateA = parseDate(a.artworkCompletionDate);
  const dateB = parseDate(b.artworkCompletionDate);
  return dateB - dateA;
});

// 按日期从旧到新排序（最早作品在前）
// artworksArray.sort((a, b) => parseDate(a.artworkCompletionDate) - parseDate(b.artworkCompletionDate));

步骤4：格式化日期用于页面展示 #

如果需要把原始日期转成更友好的显示格式，用Intl.DateTimeFormat实现：

// 转成中文日期格式，比如"2023年10月5日"
function formatDate(date) {
  return new Intl.DateTimeFormat('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  }).format(date);
}

// 给每个作品添加格式化后的日期字段
artworksArray.forEach(artwork => {
  artwork.formattedDate = formatDate(parseDate(artwork.artworkCompletionDate));
});

完整示例代码 #

// 模拟Firebase返回的数据
const artworks = {
  artwork_1: {
    artworkCompletionDate: "05-10-2023",
    artworkDescription: { shortDesc: "风景油画", longDesc: "描绘秋日山林" },
    artworkName: "秋山"
  },
  artwork_2: {
    artworkCompletionDate: "12-08-2022",
    artworkDescription: { shortDesc: "人物速写", longDesc: "街头行人肖像" },
    artworkName: "路人"
  }
};

// 转换为带ID的数组
const artworksArray = Object.entries(artworks).map(([id, data]) => ({ id, ...data }));

// 解析日期函数
function parseDate(dateStr) {
  const [day, month, year] = dateStr.split('-');
  return new Date(year, month - 1, day);
}

// 格式化日期函数
function formatDate(date) {
  return new Intl.DateTimeFormat('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  }).format(date);
}

// 排序并格式化
const sortedArtworks = artworksArray
  .sort((a, b) => parseDate(b.artworkCompletionDate) - parseDate(a.artworkCompletionDate))
  .map(artwork => ({
    ...artwork,
    formattedDate: formatDate(parseDate(artwork.artworkCompletionDate))
  }));

console.log(sortedArtworks);

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