如何用JavaScript ES6高效筛选转换嵌套结构集合？

问题背景 #

你有一个嵌套结构的对象数组，需要完成以下操作：

1. 筛选出父对象中body数组里存在今日日期的项
2. 将匹配的body子对象与父对象的非body属性合并（题目明确无属性冲突）
3. 跳过body中没有今日匹配项的父对象
4. 方案需要高效处理大规模数据

输入示例：

var originalObj = [
  { // Object 1
    body: [
      { prop1: 2, prop2: 17, date: '2020-08-30' }
    ],
    slug: 'Bay'
  },
  { // Object 2
    body: [
      { prop1: 2, prop2: 1, date: '2020-08-29' }
    ],
    slug: 'Mino'
  }
];

预期输出：

var result = [
  {
    prop1: 2, prop2: 17, date: '2020-08-30',
    slug: 'Bay'
  }
];

高效解决方案 #

这里推荐使用reduce完成一次遍历（避免多次遍历数组的性能损耗），结合find快速定位body中的匹配项（因为每个body最多一个今日匹配，find找到即停止遍历，比filter更高效）：

// 第一步：生成今日的YYYY-MM-DD格式字符串
const today = new Date().toISOString().split('T')[0];

// 第二步：一次遍历完成筛选与转换
const filteredResult = originalObj.reduce((acc, parentItem) => {
  // 在body中快速查找今日匹配项
  const matchedBodyItem = parentItem.body.find(item => item.date === today);
  
  // 如果找到匹配项，合并父对象属性（排除body）与匹配的子对象
  if (matchedBodyItem) {
    // 解构父对象，移除body属性
    const { body, ...parentProps } = parentItem;
    // 合并属性并加入结果数组
    acc.push({ ...parentProps, ...matchedBodyItem });
  }
  
  return acc;
}, []);

方案细节说明 #

1. 性能优化：
   • reduce只遍历原数组一次，相比filter+map的两次遍历更适合大数据量场景
   • find在body数组中找到第一个匹配项后立即停止遍历，避免不必要的循环
2. 属性合并：
   • 利用ES6解构赋值移除父对象的body属性，再通过扩展运算符...合并父对象剩余属性与匹配的子对象
   • 因为题目明确无属性冲突，所以直接合并不会覆盖值
3. 日期格式兼容性：
   • new Date().toISOString().split('T')[0]生成标准的YYYY-MM-DD格式，与示例中的日期格式完全匹配
   • 如果你的数据日期涉及时区差异，可以调整日期生成逻辑（比如使用getFullYear()/getMonth()/getDate()手动拼接，注意月份是0基的）

内容的提问来源于stack exchange，提问作者D. B.