如何在 React JS 中组合具有相同日期的数组答案

【问题标题】：How to combine the arrays having same date in React JS如何在 React JS 中组合具有相同日期的数组
【发布时间】：2020-05-15 20:01:32
【问题描述】：

我有一个数组：

data = [ {date: 4/15/2020, 9:46:07 PM, value: "abc"},
         {date: 4/15/2020, 11:19:18 PM, value: "xyz"},
         {date: 4/16/2020, 1:25:13 PM, value: "def"},
         {date: 4/17/2020, 5:6:17 PM, value: "pqr"}
       ];

我必须比较日期对象并合并数组。

所以，预期的输出是这样的：

 data = [ {date: 4/15/2020, value: ["abc", "xyz"]},
         {date: 4/16/2020, value: ["def"]},
         {date: 4/17/2020, value: ["pqr"]}
       ];

我怎样才能做到这一点？

提前致谢！！

【问题讨论】：

日期值的类型是什么？
日期类型是一个对象。

标签： javascript reactjs redux frontend

【解决方案1】：

我的做法：

   data = [ {date: 4/15/2020, 9:46:07 PM, value: "abc"},
             {date: 4/15/2020, 11:19:18 PM, value: "xyz"},
             {date: 4/16/2020, 1:25:13 PM, value: "def"},
             {date: 4/17/2020, 5:6:17 PM, value: "pqr"}
           ];

    // Create a map for the dates
    let dataMap = {};
    data.forEach((el) => {
      let tempDate = getDateFormat(el.date);
      if (tempDate in dateMap) {
        dateMap[tempDate].value.push(el.value);
      } else {
        dateMap[tempDate] = {
          date: tempDate,
          value: [el.value],
        };
      }
    });
    data = [];

   // Fill the data
    Object.keys(dataMap).forEach((el) => data.push(dataMap[el]));

   // The format of date
    function getDateFormat(date) {
      return (
        date.getDate() + "/" + (date.getMonth() + 1) + "/" + date.getFullYear()
      );
    }

【讨论】：

【解决方案2】：

const res = []

for (let i = 0; i < data.length; i++) {
  if (res.every(r => r.date !== data[i].date)) {
    res.push(data[i])
  } else {
    const index = res.findIndex(r => r.date == data[i].date)
    res[index] = {...res[index], value: [res[index].value, data[i].value]}
  }
}

console.log(res)

只有在 data.value 中有一个值时才有效

【讨论】：

【解决方案3】：

使用reduce很方便

const data = [
  {date: "4/15/2020, 9:46:07 PM", value: "abc"},
  {date: "4/15/2020, 11:19:18 PM", value: "xyz"},
  {date: "4/16/2020, 1:25:13 PM", value: "def"},
  {date: "4/17/2020, 5:6:17 PM", value: "pqr"}
]

const newArray = data.reduce((acc, dt) => {
  const date = new Date(dt.date)
  const y = new Intl.DateTimeFormat('en', { year: 'numeric' }).format(date)
  const m = new Intl.DateTimeFormat('en', { month: 'numeric' }).format(date)
  const d = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(date)
  
  const formatedDate = `${m}/${d}/${y}`
 
  const dateAcc = acc[formatedDate]
  if (!dateAcc) {
  	acc[formatedDate] = {
      date: formatedDate,
      value: [dt.value]
    }
  } else {
    acc[formatedDate].value.push(dt.value)
  }
  return acc
}, {})

console.log(newArray)

【讨论】：