如何在JavaScript/TypeScript中基于另一个数组创建动态数组？

我需要将原始数组转换为指定结构的数组：遍历原始数组中的DT日期，检查每个应用在这些日期是否有对应数据，有则填入对应SPEED值，无则填0。

我曾尝试用const pluck = (arr, key) => arr.map(i => i[key]);提取日期字段，再通过dates = [...new Set(dates)];去重后遍历，但未得到预期结果。

原始数组 #

const first_array = [
  {
    DT: "2022-01-01",
    APP: "Application 1",
    SPEED: 1547,
  },
  {
    DT: "2022-01-01",
    APP: "Application 2",
    SPEED: 685,
  },
  {
    DT: "2022-01-02",
    APP: "Application 1",
    SPEED: 500,
  },
  {
    DT: "2022-01-02",
    APP: "Application 2",
    SPEED: 300,
  },
  {
    DT: "2022-01-02",
    APP: "Application 3",
    SPEED: 600,
  },
  {
    DT: "2022-01-03",
    APP: "Application 1",
    SPEED: 1000,
  },
];

预期数组 #

const desire_array = [
  {
    Name: "Application1",
    Values: [1547, 500, 1000],
    ValuesWithDate: [{x: '2022-01-01', y: 1547}, {x: '2022-01-02', y: 500}, {x: '2022-01-03', y: 1000}],
  },
  {
    Name: "Application2",
    Values: [685, 300, 0],
    ValuesWithDate: [{x: '2022-01-01', y: 685}, {x: '2022-01-02', y: 300}, {x: '2022-01-03', y: 0}],
  },
  {
    Name: "Application3",
    Values: [0, 600, 0],
    ValuesWithDate: [{x: '2022-01-01', y: 0}, {x: '2022-01-02', y: 600}, {x: '2022-01-03', y: 0}],
  },
];

此转换是为了生成ApexCharts图表可用的series数据，真实数据为JSON格式。

解决方案代码 #

const first_array = [
  // 原始数据（同上）
];

// 提取并排序唯一日期，保证顺序与预期一致
const uniqueDates = [...new Set(first_array.map(item => item.DT))].sort();

// 提取所有唯一应用
const uniqueApps = [...new Set(first_array.map(item => item.APP))];

// 构建目标数组
const desire_array = uniqueApps.map(app => {
  // 筛选当前应用的所有数据
  const appRecords = first_array.filter(item => item.APP === app);
  // 建立日期到速度的映射，提升查找效率
  const speedMap = new Map(appRecords.map(record => [record.DT, record.SPEED]));

  // 生成Values数组：按日期顺序取速度，无数据则填0
  const Values = uniqueDates.map(date => speedMap.get(date) || 0);
  // 生成ValuesWithDate数组：按日期格式返回{x,y}对象
  const ValuesWithDate = uniqueDates.map(date => ({
    x: date,
    y: speedMap.get(date) || 0
  }));

  return {
    Name: app.replace(/\s/g, ''), // 移除应用名称中的空格，匹配预期格式
    Values,
    ValuesWithDate
  };
});

console.log(desire_array);

代码说明 #

1. 提取唯一日期并排序：确保日期顺序和预期一致，避免因原始数据顺序导致的结果错乱
2. 提取唯一应用：保证所有出现过的应用都能在结果数组中生成对应的条目
3. 建立速度映射表：用Map存储每个应用的日期-速度对应关系，比每次遍历查找更高效
4. 生成目标字段：遍历唯一日期，从映射表中取对应值，无数据则填0，同时生成两种格式的数值数组
5. 处理应用名称：移除名称中的空格，匹配预期的Application1格式

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