JS过滤数组或长度未知的数组？答案

【问题标题】：JS filter array or arrays with unknown length?JS过滤数组或长度未知的数组？
【发布时间】：2021-02-20 08:21:48
【问题描述】：

我有一些数据正在尝试通过按日期过滤来转换，但是数据的长度可能会有所不同，例如这样；

longData = [
     // These objects could be unlimited but the name key will always be unique
    {name: Opt 1,
     Data:
         // The first value will always be a date string and the second is the amount, the length of this array is always unknown
         ['2021-01-02', 30],
         ['2021-01-03, 20],
         ['2021-02-05', 15]
     },
     {name: Opt 2,
     Data:
         ['2021-01-02', 30],
         ['2021-02-08, 20],
         ['2021-04-02, 15]
     },
     {name: Opt 3,
     Data:
         ['2021-03-02', 30],
         ['2021-03-04, 20]
     }

我想要做的基本上是创建一个形状与原始对象相同但仅包含我日期之间的数据的新对象。

即，如果我的开始日期为“2021-01-01”，结束日期为“2021-01-07”

我应该得到一个像下面这样的对象..

shortData = [
    {name: Opt 1,
     Data:
         ['2021-01-02', 30],
         ['2021-01-03, 20]
     },
     {name: Opt 2,
     Data:
         ['2021-01-02', 30]
     },
     {name: Opt 3,
     Data:
         []
     }

我试图按周分解，这些数字呈现在图表中，当处理大型数据集时，它可能会从本质上破坏图表，所以我试图按周对其进行分页。

任何关于如何完成它的想法都会很有帮助。

【问题讨论】：

标签： javascript apexcharts

【解决方案1】：

您可以创建一个函数filterByDate，它将您的开始日期和结束日期字符串转换为日期对象。然后，对于longData 中的每个对象，您可以将其map 转换为包含新Data 属性的转换对象，该属性是filtered 版本的Data 数组。

const longData = [{ name: "Opt 1", Data: [ ['2021-01-02', 30], ['2021-01-03', 20], ['2021-02-05', 15] ] }, { name: "Opt 2", Data: [ ['2021-01-02', 30], ['2021-02-0', 8, 20], ['2021-04-02', 15] ] }, { name: "Opt 3", Data: [ ['2021-03-02', 30], ['2021-03-04', 20] ] } ];

const isBetween = (dx, d1, d2) => d1 < dx && dx < d2;
const filterByDate = (data, start, end) => {
  const startDate = new Date(start);
  const endDate = new Date(end);
  return data.map(obj => ({...obj, Data: obj.Data.filter(
    ([date]) => isBetween(new Date(date), startDate, endDate)
  )}));
}

const res = filterByDate(longData, '2021-01-01', '2021-01-07');
console.log(res);

【讨论】：

【解决方案2】：

给定以下对象数组：

const data = [
  {
    name: "Opt 1",
    Data: [
      ["2021-01-02", 30],
      ["2021-01-03", 20],
      ["2021-02-05", 15],
    ],
  },
  {
    name: "Opt 2",
    Data: [
      ["2021-01-02", 30],
      ["2021-02-08", 20],
      ["2021-04-02", 15],
    ],
  },
  {
    name: "Opt 3",
    Data: [
      ["2021-03-02", 30],
      ["2021-03-04", 20],
    ],
  },
];

您只想返回相同的数组，以便它按给定日期（即"2021-01-02"）过滤Data 属性（这是一个未知长度的数组），我会使用Array.prototype.reduce、spread syntax , 和 Array.prototype.filter 创建新数据，但过滤 Data 属性使其与给定日期匹配（或者在您的情况下，属于开始和结束日期）：

let newData = data.reduce(
  (acc, curr) => [
    ...acc,
    { ...curr, Data: curr.Data.filter((d) => d[0] === "2021-01-02") },
  ],
  []
);

// [
//   { name: "Opt 1", Data: [["2021-01-02", 30]] },
//   { name: "Opt 2", Data: [["2021-01-02", 30]] },
//   { name: "Opt 3", Data: [] },
// ];

【讨论】：