【问题标题】:Fill Array of Objects with Dates Between 2 Dates用两个日期之间的日期填充对象数组
【发布时间】:2019-05-19 10:36:23
【问题描述】:

我有一个对象数组,例如:

const dates = [
  {date: "Jul 06 2018", count: 10},
  {date: "Jul 08 2018", count: 1},
  {date: "Jul 10 2018", count: 120},
];

我正在使用date-fnseachDayformat 函数来生成和“回填”给定数组的第一个和最后一个日期之间存在的所有日期。

eachDay(
  dates[0].date,
  dates.slice(-1)[0].date,
)
  .map(d => ({
    x: d.dateCollected,
    y: dates
      .filter(e => d.dateCollected === format(e, 'MMM DD YYYY')),
  }));

该代码返回所有日期,但我无法将原始数组中的 count 值放入“回填”数组中。

预期结果:

const result =  = [
  {x: "Jul 06 2018", y: 10},
  {x: "Jul 07 2018", y: 0},
  {x: "Jul 08 2018", y: 1},
  {x: "Jul 09 2018", y: 0},
  {x: "Jul 10 2018", y: 120},
];

【问题讨论】:

  • 为什么要在代码中定义 xy 属性,而预期结果不应该具有这些属性?想法是什么?
  • 已更新 - 我无意中从第一个对象复制/粘贴。预期结果将是 xy 键。

标签: javascript date-fns


【解决方案1】:

根据eachDay 的文档,该函数返回字符串值,而不是具有dateCollected 属性的对象。

你可以像这样产生想要的结果:

const {eachDay, format} = dateFns; // Just needed for this snippet to run

const dates = [
  {date: "Jul 06 2018", count: 10},
  {date: "Jul 08 2018", count: 1},
  {date: "Jul 10 2018", count: 120},
];

const result = eachDay(
  dates[0].date,
  dates.slice(-1)[0].date,
).map(x => format(x, "MMM DD YYYY"))
.map(x => ({ x, y: (dates.find(d => d.date === x) || { count: 0 }).count }));

console.log(result);
<script src="https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.js"></script>

【讨论】:

    【解决方案2】:

    您可以通过创建按日期查找计数来简化事情:

    const {eachDay, format} = dateFns;
    
    const dates = [
      {date: "Jul 06 2018", count: 10},
      {date: "Jul 08 2018", count: 1},
      {date: "Jul 10 2018", count: 120}
    ];
    
    const counts = dates.reduce((memo, {date, count}) => {
      memo[date] = count;
      return memo;
    }, {});
    
    const result = eachDay(
      dates[0].date,
      dates.slice(-1)[0].date
    )
      .map(d => {
        const x = format(d, "MMM DD YYYY");
        return {x, y: counts[x] || 0};
      })
    
    console.log(result);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.js"></script>

    【讨论】:

      猜你喜欢
      • 2019-07-20
      • 1970-01-01
      • 2014-11-04
      • 2018-10-12
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多