如何使用reduce获取每个日期的首个Forecast实例？

我来帮你搞定这个问题！你当前的代码用reduce结合Object.assign时，每次遇到相同date的元素都会直接覆盖掉之前存储的内容，所以最终得到的是每个日期的最后一条数据。要改成保留第一个实例，只需要在reduce的回调里加个判断：只有当当前日期还没在累加器（acc）里存在时，才把它加进去，已经存在的话就跳过不覆盖。

修改后的代码 #

const forecast = [ 
  {date: "2018-05-24", temp_min: 49.87, temp_max: 57.1}, 
  {date: "2018-05-24", temp_min: 49.08, temp_max: 53.9}, 
  {date: "2018-05-24", temp_min: 54.52, temp_max: 56.93}, 
  {date: "2018-05-24", temp_min: 61.8, temp_max: 61.8}, 
  {date: "2018-05-24", temp_min: 66.58, temp_max: 66.58}, 
  {date: "2018-05-25", temp_min: 68.64, temp_max: 68.64}, 
  {date: "2018-05-25", temp_min: 66.33, temp_max: 66.33}, 
  {date: "2018-05-25", temp_min: 62.41, temp_max: 62.41}, 
  {date: "2018-05-25", temp_min: 58.97, temp_max: 58.97}, 
  {date: "2018-05-25", temp_min: 55.15, temp_max: 55.15}, 
  {date: "2018-05-25", temp_min: 56.24, temp_max: 56.24}, 
  {date: "2018-05-25", temp_min: 59.29, temp_max: 59.29}, 
  {date: "2018-05-25", temp_min: 65.89, temp_max: 65.89}, 
  {date: "2018-05-26", temp_min: 67.96, temp_max: 67.96}, 
  {date: "2018-05-26", temp_min: 65.05, temp_max: 65.05}, 
  {date: "2018-05-26", temp_min: 59.42, temp_max: 59.42}, 
  {date: "2018-05-26", temp_min: 55.52, temp_max: 55.52}, 
  {date: "2018-05-26", temp_min: 52.17, temp_max: 52.17}, 
  {date: "2018-05-26", temp_min: 53.06, temp_max: 53.06}, 
  {date: "2018-05-26", temp_min: 58.72, temp_max: 58.72}, 
  {date: "2018-05-26", temp_min: 63.51, temp_max: 63.51} 
];

// 修改后的getForecastForDay，保留每个日期的第一个实例
const getForecastForDay = Object.values(forecast.reduce((acc, cur) => {
  // 只有当acc里还没有当前日期的条目时，才添加进去
  if (!acc[cur.date]) {
    acc[cur.date] = cur;
  }
  return acc;
}, {}));

const threeDayForecast = getForecastForDay.slice(0, 3);
console.log(threeDayForecast);

代码逻辑说明 #

1. 在reduce的回调函数中，先检查累加器acc是否已经包含当前元素的date作为键：
   • 如果没有，就把当前元素cur赋值给acc[cur.date]，这样第一个出现的日期条目就被存储下来了；
   • 如果已经存在，直接返回原acc，不做任何修改，避免覆盖之前的第一个条目。
2. 最后用Object.values()把累加器对象转换成数组，就得到了每个日期仅保留第一个实例的结果。

这样处理后，threeDayForecast里的每个日期条目都是原数组中该日期第一次出现的那条，也就解决了temp_min和temp_max相同的问题啦～

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