判断数组中的值是在过去、现在还是将来。

Question

我有两个类似的数组：

 const exhibitiontypes = [
  {
   title: 'Past Exhibitions',
   type: 'past',
  },
  {
  title: 'Current Exhibitions',
  type: 'current',
  },
  {
  title: 'Upcoming Exhibitions',
  type: 'upcoming',
},
]

和

const exhibitions = [
  {
  name: 'Exhibition 1',
  startdate: new Date(2021, 08, 10),
  enddate: new (2021, 08, 15)
  },
  {
  name: 'Exhibition 2',
  startdate: new Date(2020, 08, 13),
  enddate: new Date(2020, 09, 25)
  },
  {
   name: 'Exhibition 3',
   startdate: new Date(),
   enddate: new Date(2021, 08, 5)
  }
 ]

在我的应用程序中，我通过展览类型映射并返回一个exhibitiontypepage，它将包含基于每个展览的开始和结束日期的过去、当前或即将到来的展览。

const exhibitiontypes.map(type=> {
    return  <Exhibitiontypepage exhibitions={?} type={type}/>
 })

如果展览是过去的、现在的还是未来的，我如何过滤展览的数组才能匹配？

Answer 1

在尝试呈现它们之前，您必须过滤exhibitions。您可以通过array.reduce使用还原器功能来实现这一点。

​

const exhibitions = [
  {
  name: 'Exhibition 1',
  startdate: new Date(2021, 08, 10),
  enddate: new Date(2021, 08, 15)
  },
  {
  name: 'Exhibition 2',
  startdate: new Date(2020, 08, 13),
  enddate: new Date(2020, 09, 25)
  },
  {
   name: 'Exhibition 3',
   startdate: new Date(),
   enddate: new Date(2021, 08, 5)
  }
]

const dateFilteredExhibitions = exhibitions.reduce((result, exb) => {
  const now = Date.now();
  if (now < +exb.startdate) {
    result.upcoming.push(exb);
  } else if (now > +exb.enddate) {
    result.past.push(exb)
  } else {
    result.current.push(exb)
  }
  return result;
}, {past: [], current: [], upcoming: []});

console.log(dateFilteredExhibitions);

​

你在哪里打这个电话给reduce取决于你自己。您可能会在从useEffect内部的API以及类似于setFilteredExhibitions(dateFilteredExhibitions)的API中获取原始数据之后才会这样做。

const [filteredExhibitions, setFilteredExhibitions] = React.useState({
  past: [],
  current: [],
  upcoming: []
})

如果它在本地系统上的静态数据，那么您可以在消费反应组件的作用域之外这样做，或者在一个单独的文件中导入它。

一旦您有了一个包含筛选对象的变量，那么呈现调用就可以通过属性名称访问它：

const exhibitiontypes.map(type=> {
    return  <Exhibitiontypepage exhibitions={filteredExhibitions[type.type]} type={type}/>
})

Answer 2

最简单的方法是与Date.now()进行比较，后者是以毫秒为单位的当前时间。将Date对象转换为毫秒的最简单方法是使用一元算子 (+)转换为Number。在此之后，它只是数字值的比较。

const now = Date.now();
exhibitions.map(entry => {
  if (+entry.enddate < now) {
    return exhibitiontypes[0];
  } else if (+entry.startdate <= now && +entry.enddate >= now) {
    return exhibitiontypes[1];
  } else {
    return exhibitiontypes[2];
  }
});

Answer 3

下面的答案显示了两个概念：

1. 缓存:这似乎是一个很好的机会，可以过滤数据一次一次，以后再也不会这样做了(除非您需要通过API调用)。这确保了一个新的数据结构exhibitionByType是预先填充过滤展览，并容易访问，随时您想要看到过滤的展览数据。这是，比每次单击消耗资源的按钮时的过滤效率要高得多。
2. 我添加了一些HTML，所以很明显，您将得到什么，以及如何在您的实现中使用它。玩得开心点！

​

const currentDate = new Date(),
      exhibitiontypes = [
        {
         title: 'Past Exhibitions',
         type: 'past',
        },
        {
          title: 'Current Exhibitions',
          type: 'current',
        },
        {
          title: 'Upcoming Exhibitions',
          type: 'upcoming',
        },
      ],
      exhibitions = [
        {
          name: 'Past exhibition',
          startdate: new Date(2000, 08, 10),
          enddate: new Date(2000, 08, 15)
        },
        {
            name: 'Present exhibition',
            startdate: new Date(2020, 08, 13),
            enddate: currentDate
        },
        {
           name: 'Upcoming exhibition',
           startdate: new Date(),
           enddate: new Date(2023, 08, 5)
        }
      ];

// This array will serve as a cache, filtered only once and used continuously throughout the app. Index 0, 1, and 2 will correspond to 'past', 'present' and 'future' respectively
let exhibitionByType = [],
    resultElem = document.getElementById('result');

// Adding an inner array to serve as the list of filtered exhibitions by type
exhibitiontypes.forEach(elem => {
  elem.exhibitionList = [];

  exhibitionByType.push(elem);
});

// Filtering each exhibition by type
exhibitions.forEach(elem => {
  // Present by default
  let index = 1;

  if (currentDate < elem.enddate) {
    // Past
    index = 0;
  } else if (currentDate > elem.enddate) {
    // Future
    index = 2;
  }

  exhibitionByType[index].exhibitionList.push(elem);
});

// Filtering via newly formed exhibitionByType
function getExhibitionListByType (type) {
  resultElem.innerHTML = JSON.stringify(exhibitionByType[type]);
};

<button onclick="getExhibitionListByType(0)">Past</button>
<button onclick="getExhibitionListByType(1)">Present</button>
<button onclick="getExhibitionListByType(2)">Future</button>

<div id="result"></div>

​