如何在JavaScript中遍历后端返回的对象数组？

针对你存储的events数组，以下是几种高效的遍历方式，适合处理100+条数据的场景，可根据图表需求选择：

1. forEach 直接遍历处理 #

适合无需返回新数组，仅需对每个元素执行操作的场景，比如统计分类、逐个添加图表数据点：

// 示例：统计不同日历分类的事件数量，用于生成饼图数据
const calendarCount = {};

events.forEach(event => {
  const category = event.extendedProps.calendar;
  // 累加分类计数
  calendarCount[category] = (calendarCount[category] || 0) + 1;
  
  // 也可直接在此处将单条数据传入图表
  // 比如：chart.addDataPoint({ date: event.start, category, title: event.title });
});

console.log(calendarCount);
// 输出：{ Personal: 1, ETC: 1, Holiday: 1 }

2. for...of 灵活遍历（支持中断） #

如果需要在满足特定条件时停止遍历（比如找到目标数据），for...of的中断能力能提升效率：

// 示例：遍历查找指定ID的事件，找到后立即停止
for (const event of events) {
  if (event.id === 2) {
    console.log('找到目标事件:', event.title);
    break; // 终止遍历，避免不必要的循环
  }
  
  // 常规处理：提取图表所需字段
  // const chartItem = {
  //   date: new Date(event.start),
  //   series: event.extendedProps.calendar,
  //   label: event.title
  // };
  // 推入图表数据池
}

3. map 转换数组结构 #

当需要将原数组直接转换为图表要求的结构化数据时，map会更简洁，比如生成折线图/柱状图的数据源：

// 示例：将原数组转换为图表标准数据格式
const chartDataset = events.map(event => ({
  x: new Date(event.start), // 横轴日期
  y: 1, // 纵轴值（可根据实际需求替换，比如事件时长）
  category: event.extendedProps.calendar,
  name: event.title
}));

// 后续可直接将chartDataset传入图表配置
// 例如 ECharts：
// const chartOption = {
//   xAxis: { type: 'time' },
//   series: [{ data: chartDataset, type: 'bar' }]
// };
// myChart.setOption(chartOption);

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