React中过滤JSON对象日期键并构建Canvas.js绘图数组的技术咨询

嘿，别慌，这俩操作其实用JS的原生方法就能很简洁地实现，我一步步给你拆解：

步骤1：过滤出仅包含日期的键值对 #

首先要把dataObject里非日期的字段（比如UID、Province_State这些）过滤掉。我们可以用正则表达式匹配MM/DD/YY格式的日期键，再结合Object.entries、filter和Object.fromEntries来处理：

// 提取纯日期键值对
const dateOnlyObject = Object.fromEntries(
  Object.entries(dataObject).filter(([key]) => {
    // 匹配 1/22/20 或 01/22/20 这类日期格式
    return /^\d{1,2}\/\d{1,2}\/\d{2}$/.test(key);
  })
);

步骤2：转换为Canvas.js需要的数组格式 #

接下来把上面的纯日期对象，转成[{x: Date, y: number}, ...]的格式。同样用Object.entries遍历，再通过map逐个转换：

const chartData = Object.entries(dateOnlyObject).map(([dateStr, value]) => {
  // 拆分日期字符串为月、日、年
  const [month, day, year] = dateStr.split('/').map(Number);
  // 注意：JS的Date对象月份是0-based（0=1月，11=12月），所以要减1
  // 两位年份转成四位，比如"20"对应2020
  return {
    x: new Date(2000 + year, month - 1, day),
    y: value
  };
});

在React组件中的完整优化实现 #

如果dataObject数据量较大，重复处理会影响性能，我们可以用useMemo缓存结果，只有当dataObject变化时才重新计算：

import { useMemo } from 'react';

function YourChartComponent({ dataObject }) {
  const chartData = useMemo(() => {
    // 先判断dataObject是否存在，避免报错
    if (!dataObject) return [];

    return Object.entries(dataObject)
      // 链式完成过滤+转换
      .filter(([key]) => /^\d{1,2}\/\d{1,2}\/\d{2}$/.test(key))
      .map(([dateStr, value]) => {
        const [month, day, year] = dateStr.split('/').map(Number);
        return {
          x: new Date(2000 + year, month - 1, day),
          y: value
        };
      });
  }, [dataObject]); // 依赖项：仅当dataObject变化时重新计算

  // 把chartData传给Canvas.js组件即可
  return (
    <div>
      {/* <CanvasJSChart options={{ data: [{ dataPoints: chartData }] }} /> */}
    </div>
  );
}

关键细节提醒 #

• 正则匹配：/^\d{1,2}\/\d{1,2}\/\d{2}$/确保只匹配完整的日期格式，避免误抓其他带数字的字段。
• 月份坑点：JS的Date月份从0开始，所以一定要把拆分得到的月份数字减1，否则1月会被识别成2月。
• 年份处理：如果以后日期格式变成四位年份（比如1/22/2020），把2000 + year改成直接用year即可。

内容的提问来源于stack exchange，提问作者zzzz