JavaScript最佳实践：混合数据数组排序与活动时间线实现

核心思路 #

要实现排序，关键是先把不同类型记录的日期字段统一转换成可比较的Date对象，再利用JavaScript数组原生的sort方法按时间戳差值排序，这是性能和代码简洁性最优的方案。

步骤1：标准化活动数据（统一日期格式） #

首先需要把原始数组中不同类型的日期字段（Call_Start_Time、Due_Date等）统一提取并转换为Date对象，同时保留你需要的activityOwner、activityTitle等字段。

示例原始数据 #

const rawActivities = [
  { type: 'Calls', Call_Start_Time: '2024-05-15T14:30:00', activityOwner: 'Alice', activityTitle: 'Client Check-in', activityDesc: 'Discuss project progress' },
  { type: 'Tasks', Due_Date: '2024-05-12T09:00:00', activityOwner: 'Bob', activityTitle: 'Submit Report', activityDesc: 'Q2 performance report' },
  { type: 'Meetings', Meeting_Start_Time: '2024-05-18T10:00:00', activityOwner: 'Alice', activityTitle: 'Team Sync', activityDesc: 'Weekly alignment meeting' },
  { type: 'Tasks', Due_Date: '2024-05-10T16:00:00', activityOwner: 'Charlie', activityTitle: 'Fix Bug', activityDesc: 'Login module error' },
  { type: 'Calls', Call_Start_Time: '2024-05-16T11:00:00', activityOwner: 'Bob', activityTitle: 'Vendor Negotiation', activityDesc: 'Discuss pricing terms' }
];

标准化代码 #

// 辅助函数：处理无效日期，避免排序异常
const getValidDate = (dateStr) => {
  const date = new Date(dateStr);
  // 若日期无效，可根据业务需求设为当前时间或null
  return isNaN(date.getTime()) ? new Date() : date;
};

// 标准化所有活动，统一字段格式
const normalizedActivities = rawActivities.map(activity => {
  let activityDate;
  // 根据活动类型匹配对应的日期字段
  switch (activity.type) {
    case 'Calls':
      activityDate = getValidDate(activity.Call_Start_Time);
      break;
    case 'Meetings':
      activityDate = getValidDate(activity.Meeting_Start_Time);
      break;
    case 'Tasks':
      activityDate = getValidDate(activity.Due_Date);
      break;
    default:
      activityDate = new Date(); // 未知类型默认当前时间
  }

  return {
    activityOwner: activity.activityOwner,
    activityDate: activityDate,
    activityTitle: activity.activityTitle,
    activityDesc: activity.activityDesc,
    type: activity.type // 保留类型，方便后续展示
  };
});

步骤2：按activityDate排序 #

利用数组原生的sort方法，通过Date对象的时间戳差值排序（Date对象减运算会返回时间戳差值）。

升序排序（从旧到新） #

// 复制原数组避免修改源数据，保持数据不可变性
const sortedAsc = [...normalizedActivities].sort((a, b) => {
  return a.activityDate - b.activityDate;
});

降序排序（从新到旧） #

const sortedDesc = [...normalizedActivities].sort((a, b) => {
  return b.activityDate - a.activityDate;
});

关键注意事项 #

• 必须转换为Date对象：如果直接用字符串排序，可能会因为日期格式不一致（比如"MM/DD/YYYY"和"YYYY-MM-DD"）导致排序错误。Date对象的时间戳比较是最可靠的方式。
• 不修改原数组：使用扩展运算符[...normalizedActivities]创建数组副本后再排序，避免影响后续对原始标准化数据的使用。
• 处理无效日期：通过getValidDate函数捕获无效日期，防止Invalid Date导致排序逻辑混乱。

完整测试代码 #

把上面的代码整合起来，直接运行就能看到排序结果：

const rawActivities = [
  { type: 'Calls', Call_Start_Time: '2024-05-15T14:30:00', activityOwner: 'Alice', activityTitle: 'Client Check-in', activityDesc: 'Discuss project progress' },
  { type: 'Tasks', Due_Date: '2024-05-12T09:00:00', activityOwner: 'Bob', activityTitle: 'Submit Report', activityDesc: 'Q2 performance report' },
  { type: 'Meetings', Meeting_Start_Time: '2024-05-18T10:00:00', activityOwner: 'Alice', activityTitle: 'Team Sync', activityDesc: 'Weekly alignment meeting' },
  { type: 'Tasks', Due_Date: '2024-05-10T16:00:00', activityOwner: 'Charlie', activityTitle: 'Fix Bug', activityDesc: 'Login module error' },
  { type: 'Calls', Call_Start_Time: '2024-05-16T11:00:00', activityOwner: 'Bob', activityTitle: 'Vendor Negotiation', activityDesc: 'Discuss pricing terms' }
];

const getValidDate = (dateStr) => {
  const date = new Date(dateStr);
  return isNaN(date.getTime()) ? new Date() : date;
};

const normalizedActivities = rawActivities.map(activity => {
  let activityDate;
  switch (activity.type) {
    case 'Calls':
      activityDate = getValidDate(activity.Call_Start_Time);
      break;
    case 'Meetings':
      activityDate = getValidDate(activity.Meeting_Start_Time);
      break;
    case 'Tasks':
      activityDate = getValidDate(activity.Due_Date);
      break;
    default:
      activityDate = new Date();
  }

  return {
    activityOwner: activity.activityOwner,
    activityDate: activityDate,
    activityTitle: activity.activityTitle,
    activityDesc: activity.activityDesc,
    type: activity.type
  };
});

// 升序排序
const sortedAsc = [...normalizedActivities].sort((a, b) => a.activityDate - b.activityDate);
console.log("升序排序结果：", sortedAsc);

// 降序排序
const sortedDesc = [...normalizedActivities].sort((a, b) => b.activityDate - a.activityDate);
console.log("降序排序结果：", sortedDesc);

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