如何用reduce等方法将JS数组转换为React SectionList所需分组结构？

问题描述 #

从API获取到如下人员数组：

const people = [
  { name: 'Alex joe', age: 28 ,date:'2022-08-22'},
  { name: 'Alice', age: 21 ,date:'2022-08-18'},
  { name: 'Anki', age: 25 ,date:'2022-08-22'},
  { name: 'Max', age: 20 ,date:'2022-08-18'},
  { name: 'Jane', age: 20 ,date:'2022-08-20'},
  { name: 'John schinger', age: 17 ,date:'2022-08-22'},
  { name: 'Alice', age: 21 ,date:'2022-08-20'},
  { name: 'Max', age: 20 ,date:'2022-08-20'},
  { name: 'Jane', age: 20 ,date:'2022-08-22'},
];

需要将其按日期分组排序，转换为React SectionList所需的结构：

const output = [
  {title:'2022-08-18', data:[
    { name: 'Alice', age: 21 ,date:'2022-08-18'},
    { name: 'Max', age: 20 ,date:'2022-08-18'}
  ]},
  {title:'2022-08-20', data:[
    { name: 'Jane', age: 20 ,date:'2022-08-20'},
    { name: 'Alice', age: 21 ,date:'2022-08-20'},
    { name: 'Max', age: 20 ,date:'2022-08-20'}
  ]},
  {title:'2022-08-22', data:[
    { name: 'Jane', age: 20 ,date:'2022-08-22'},
    { name: 'Anki', age: 25 ,date:'2022-08-22'},
    { name: 'Alex joe', age: 28 ,date:'2022-08-22'},
    { name: 'John schinger', age: 17 ,date:'2022-08-22'},
  ]}
];

解决方案 #

通过reduce完成分组，结合排序处理即可得到目标结构，代码如下：

// 1. 按日期分组
const groupedByDate = people.reduce((acc, person) => {
  const date = person.date;
  if (!acc[date]) {
    acc[date] = [];
  }
  acc[date].push(person);
  return acc;
}, {});

// 2. 转换为SectionList结构并按日期排序，同时处理组内元素排序
const sortedSections = Object.entries(groupedByDate)
  // 按日期升序排序分组
  .sort(([dateA], [dateB]) => new Date(dateA) - new Date(dateB))
  .map(([title, data]) => {
    // 组内按姓名字母顺序排序，可根据需求修改排序规则
    const sortedData = data.sort((a, b) => a.name.localeCompare(b.name));
    return { title, data: sortedData };
  });

console.log(sortedSections);

代码说明 #

• 分组逻辑：reduce遍历数组，以日期为键存储对应人员数组，完成初步分组。
• 日期排序：Object.entries将分组对象转为[日期, 人员数组]格式，通过日期对象的差值实现升序排序。
• 组内排序：使用localeCompare按姓名字母顺序排序，若需按年龄或其他规则调整，修改sort的比较函数即可。

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