如何将含双数组的JavaScript数据集转换为对象数组？

需求说明 #

需要把如下扁平化结构的数据集：

const dataSet = [
  {
    last_updated: 1662040601,
    x: [
      1660953600, 1661040000, 1661126400, 1661212800, 1661299200, 1661385600,
      1661472000, 1661558400, 1661644800, 1661731200, 1661817600, 1661904000,
    ],
    y: [
      0.07, 0.062, 0.06, 0.0725, 0.075, 0.089, 0.0799, 0.1167, 0.089, 0.08,
      0.077, 0.0639,
    ],
  },
];

转换为每个元素包含data和value的对象数组：

const array = [
  { data: 1660953600, value: 0.07 },
  { data: 1661040000, value: 0.062 },
  { data: 1661126400, value: 0.06 },
  { data: 1661212800, value: 0.0725 },
  // ... 剩余对应元素
];

尝试的代码及问题 #

尝试了以下代码，但未能得到预期结果：

const arri = dataSet.map((data) => ({
  data: data.x.map((data) => data),
  value: data.y,
}));

这段代码生成的是包含data数组和value数组的对象，而非每个元素对应一组键值对的目标数组。

解决方案 #

方法1：针对单元素dataSet的直接转换

如果确定dataSet中只有一个对象，直接遍历其x数组，利用索引匹配y数组对应位置的值：

const result = dataSet[0].x.map((xVal, index) => ({
  data: xVal,
  value: dataSet[0].y[index]
}));

方法2：处理多元素dataSet的合并转换

如果dataSet可能包含多个对象，需要将所有对象的x/y转换后合并成一个数组，可使用flatMap：

const result = dataSet.flatMap(item => 
  item.x.map((xVal, idx) => ({
    data: xVal,
    value: item.y[idx]
  }))
);

方法3：添加边界检查（兼容数组长度不一致场景）

若担心x和y数组长度不匹配，可添加判断逻辑，避免索引越界：

const targetData = dataSet[0];
const result = targetData.x.map((xVal, index) => ({
  data: xVal,
  value: index < targetData.y.length ? targetData.y[index] : null // 可替换为其他默认值
}));

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