如何映射对象数组并按日期分组渲染演出信息（不使用Lodash）

给定演出信息数组：

const gigs = [
  {
    name: ' sat gig 1',
    date: 'Sat Dec 10 2022'
  },
  {
    name: ' sat gig 2',
    date: 'Sat Dec 10 2022'
  },
  {
    name: ' sun gig 1',
    date: 'Sun Dec 11 2022'
  },
  {
    name: ' sun gig 2',
    date: 'Sun Dec 11 2022'
  },  
]

期望输出格式：

Sat Dec 10 
sat gig 1
sat gig 2

Sun Dec 11
sun gig 1
sun gig 2

用户自行尝试了基于YYYY-MM-DD日期格式的分组代码，但逻辑存在问题，要求不使用Lodash工具库实现需求。

1. 修正分组逻辑 #

你当前的reduce代码错误地将整个演出对象作为分组键，正确的做法是以日期字符串作为分组标识，以下分两种场景处理：

场景1：原始日期为YYYY-MM-DD格式

先将日期转换为目标格式，再执行分组：

const gigs = [
  { name: ' sat gig 1', date: '2022-12-10' },
  { name: ' sat gig 2', date: '2022-12-10' },
  { name: ' sun gig 1', date: '2022-12-11' },
  { name: ' sun gig 2', date: '2022-12-11' },  
];

const groupedGigs = gigs.reduce((groups, gig) => {
  // 将YYYY-MM-DD转为Sat Dec 10 2022格式，再截取前11位得到Sat Dec 10
  const displayDate = new Date(gig.date).toString().slice(0, 11);
  
  // 初始化空数组（如果当前日期组不存在）
  if (!groups[displayDate]) {
    groups[displayDate] = [];
  }
  // 去除演出名称前后空格后加入对应分组
  groups[displayDate].push(gig.name.trim());
  
  return groups;
}, {});

场景2：原始日期已为Sat Dec 10 2022格式

直接截取日期字符串前11位作为分组键：

const groupedGigs = gigs.reduce((groups, gig) => {
  const displayDate = gig.date.slice(0, 11);
  if (!groups[displayDate]) {
    groups[displayDate] = [];
  }
  groups[displayDate].push(gig.name.trim());
  return groups;
}, {});

2. 渲染为目标格式 #

遍历分组后的对象，拼接成期望的字符串格式：

let output = '';
// 遍历每个日期组
Object.entries(groupedGigs).forEach(([date, gigNames]) => {
  output += `${date}\n`;
  output += gigNames.join('\n');
  output += '\n\n'; // 日期组之间空一行分隔
});

// 移除末尾多余的换行
output = output.trimEnd();

console.log(output);

执行后会输出：

Sat Dec 10
sat gig 1
sat gig 2

Sun Dec 11
sun gig 1
sun gig 2

关键说明 #

• 用reduce构建以日期为键、演出名称列表为值的对象，是原生JS实现分组的标准方式
• 截取日期字符串前11位，精准匹配你需要的显示格式
• 用trim()处理演出名称的空格，保证输出整洁
• 通过字符串拼接控制分组间的换行分隔，符合预期格式

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