ReactJS：按日期排序键名与结构不同的数组

嘿，这个场景我之前做项目的时候也碰到过！数组里的元素日期字段藏的地方不一样，直接用sort()肯定搞不定，核心就是先给每个元素统一提取出正确的日期值，再用这个值来做排序依据就行。

核心思路 #

先写一个辅助函数，专门用来从每个元素里挖日期：

• 如果元素有infos属性，就取infos.new_creation
• 否则就取creation
  然后在sort()方法里，用这个辅助函数拿到两个元素的日期，转成可比较的Date对象，直接比较时间戳就行。

完整代码示例 #

// 模拟你的原始数组（日期可以是字符串或Date对象）
const data = [
  { value: "false", creation: "2024-01-05T00:00:00" },
  { value: "false", creation: new Date("2024-01-01") },
  { value: "false", infos: { new_creation: "2024-01-03" } },
  { value: "false", infos: { new_creation: new Date("2024-01-07") } }
];

// 辅助函数：统一提取日期
const getSortDate = (item) => {
  // 优先取infos里的new_creation，没有的话取creation
  const dateStr = item.infos?.new_creation || item.creation;
  // 转成Date对象，确保能正确比较
  return new Date(dateStr);
};

// 执行排序：这里是升序（旧日期在前），要降序就把dateA和dateB反过来
const sortedData = [...data].sort((a, b) => {
  const dateA = getSortDate(a);
  const dateB = getSortDate(b);
  return dateA - dateB;
});

console.log(sortedData);

关键细节说明 #

1. 避免修改原数组：用[...data]先浅拷贝一份原数组，再执行sort()，这样原数组不会被改动，比直接用data.sort()更安全。
2. 日期兼容性：不管你的日期是字符串还是Date对象，new Date()都能正确解析大部分标准格式（比如ISO格式），如果是自定义格式可能需要额外处理，但一般业务场景都够用。
3. 兜底处理：如果怕有的元素没有日期字段，可以在辅助函数里加个兜底，比如：

   const getSortDate = (item) => {
     const dateStr = item.infos?.new_creation || item.creation || new Date(0);
     return new Date(dateStr);
   };
   

   这样没有日期的元素会被排到最前面（因为new Date(0)是1970年的初始时间）。

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