如何遍历嵌套JSON对象生成指定结构的BreakTimes数组？

给定如下TypeScript接口和工作排班数据，需要将其中的休息时间提取为指定结构的数组。作为JS/TS新手，对嵌套对象的遍历方式存在困惑，求最优实现方案并解释代码逻辑。

原数据定义 #

export interface BreakTimes {
  start?: string;
  end?: string;
}

export interface WorkingPlanDays {
  start?: string;
  end?: string;
  breaks?: BreakTimes[];
}

export interface WorkingPlan {
  [day: string]: WorkingPlanDays;
}

const WORKING_PLAN_DATA: WorkingPlan = {
  "monday": null,
  "tuesday": {
    "start": "09:00",
    "end": "17:30",
    "breaks": [
      {
        "start": "12:00",
        "end": "12:30"
      },
      {
        "start": "13:30",
        "end": "13:50"
      }
    ]
  },
  "wednesday": {
    "start": "09:00",
    "end": "17:30",
    "breaks": [
      {
        "start": "12:00",
        "end": "12:30"
      },
      {
        "start": "13:30",
        "end": "13:50"
      }
    ]
  },
  "thursday": {
    "start": "09:00",
    "end": "17:30",
    "breaks": [
      {
        "start": "12:00",
        "end": "12:30"
      },
      {
        "start": "13:30",
        "end": "13:50"
      }
    ]
  },
  "friday": {
    "start": "09:00",
    "end": "20:00",
    "breaks": [
      {
        "start": "12:00",
        "end": "12:30"
      },
      {
        "start": "13:30",
        "end": "14:30"
      }
    ]
  },
  "saturday": {
    "start": "09:00",
    "end": "17:00",
    "breaks": [
      {
        "start": "12:00",
        "end": "12:30"
      },
      {
        "start": "13:30",
        "end": "13:50"
      }
    ]
  },
  "sunday": null
}

目标数组结构 #

需要提取为如下结构的数组：

const ELEMENT_DATA: Breaks[] = [
  {day: 'Tuesday', start: '12:00', end: '12:30'},
  {day: 'Tuesday', start: '13:30', end: '13:50'},
  {day: 'Wednesday', start: '12:00', end: '12:30'},
  {day: 'Wednesday', start: '13:30', end: '13:50'},
  // ... 其余日期的休息时间
];

最优实现方案 #

// 定义目标数组的元素类型
interface Breaks {
  day: string;
  start: string;
  end: string;
}

const ELEMENT_DATA: Breaks[] = Object.entries(WORKING_PLAN_DATA).flatMap(([dayKey, dayData]) => {
  // 跳过无排班或无休息时间的日期
  if (!dayData?.breaks) {
    return [];
  }

  // 将星期字符串转为首字母大写格式（如"tuesday" → "Tuesday"）
  const formattedDay = dayKey.charAt(0).toUpperCase() + dayKey.slice(1);

  // 转换每段休息时间的结构，添加day属性
  return dayData.breaks.map(breakTime => ({
    day: formattedDay,
    start: breakTime.start!,
    end: breakTime.end!
  }));
});

代码逻辑解释 #

• Object.entries() 转换对象：将排班对象转换为[星期字符串, 排班数据]的数组，把对象的键值对转为可遍历的数组形式，方便逐个处理每个日期的信息。
• flatMap() 遍历并展平数组：
  同时完成遍历和数组展平的操作，避免先map再flat的冗余步骤。如果当前日期无排班（值为null）或无休息时间，返回空数组，不向结果中添加任何元素。
• 格式化星期字符串：通过字符串截取和大小写转换，将小写的星期名转为首字母大写的格式，匹配目标结构的要求。
• map() 转换休息时间结构：遍历当前日期的每一段休息时间，为每个休息时间对象添加day属性，最终返回符合Breaks接口的对象数组。这里的!非空断言是因为已经通过前置判断过滤了无休息时间的情况，确保start和end属性一定存在。

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