如何映射两个数组并输出数据以匹配参数

Question

我有以下两个数组：

const dates = [  "January 1st, 2022", "January 2nd, 2022", More dates...]
const events = [
{
  id: 1,
  date: "January 10th, 2022",
  title: "Have a meeting",
}
More events...
]

我想做的是通过日期数组进行映射，显示所有日期，并通过事件数组进行映射，并在 event.date 与日期中的相应日期匹配时显示 event.title数组.. 如何将事件数组映射到日期数组以及日期匹配时输出 event.title?

目前我有这个：

 {dates.map((date, i) => (
      <li
        key={i}
       >
        {date}
       //Here I would also like to display the {event.title} when the dates match.
      </li>
  ))}

Answer 1

如果所有日期都是字符串并且它们与 dates 数组中的字符串相匹配，那么您可以将事件构造为一个对象，其中键是日期。（这是假设没有重叠事件）。

这种方法的好处是你只有两个循环，这使得代码非常高效。

const structuredEvents = events.reduce((acc, cur => {
  acc[cur.date] = cur;
  return acc;
}, {});

在您的循环中 select 事件基于 date。

{dates.map((date, i) => {
  const event = structuredEvents[date];

  return (
    <li
      key={i}
    >
      {date}
      {event?.title}
    </li>
  );
})}

Answer 2

（带有可选链接运算符 (?.)）

{dates.map((date, i) => (
          <li
            key={i}
           >
    {events.find(e => e.date == date)?.title}
          </li>
      ))}

Answer 3

import logo from './logo.svg';
import './App.css';

const dates = [  "January 1st, 2022", "January 2nd, 2022", ]
const events = [
{
  id: 1,
  date: "January 1st, 2022",
  title: "Have a meeting",
},
{
  id: 1,
  date: "January 2nd, 2022",
  title: "second meeting",
},
{
  id: 1,
  date: "January 3rd, 2022",
  title: "Have a meeting",
}
]

function App() {
  return (
    <div className="App">
{dates.map((date, i) => (
      <li
        key={i}
       >
        {events.map((data,i)=> {
          console.log(data,date,"data...")
          return (
          <div>
            {data.date == date ? 
       <div>Here I would also like to display the {data.title} when the dates match.</div>
       :null}
          </div>
        )})}
      </li>
  ))}
    </div>
  );
}

export default App;

Answer 4

我只是在此处添加逻辑以根据我们在 dates 和 events 数组中所做的比较来获取仅包含标题的过滤数组。

const dates = ["January 1st, 2022", "January 2nd, 2022"];

const events = [{
  id: 1,
  date: "January 1st, 2022",
  title: "Have a meeting 1st January",
}, {
  id: 2,
  date: "January 10th, 2022",
  title: "Have a meeting 10th January",
}, {
  id: 2,
  date: "January 2nd, 2022",
  title: "Have a meeting 2nd January",
}];

const res = events.filter((obj) => dates.includes(obj.date)).map((obj) => `${obj.date} - ${obj.title}`);

console.log(res);

如何映射两个数组并输出数据以匹配参数

How to map two arrays and output data for matching parameters

javascript

arrays

ecmascript-6

reactjs