JavaScript中对象数组的合并与转换问题求助

原始数据 #

const planned = [
    {
        '2023-01-06': 46,
        '2023-01-04': 45,
        '2023-01-05': 43,
        '2023-01-07': 53
    }
]
const actual =[
    {
        "2023-01-07": 12,
        "2023-01-06": 16,
        "2023-01-04": 14,
        "2023-01-08": 10,
        "2023-01-05": 12,
        "2023-01-03": 10
    }
]

需求 #

将上述两个数组合并转换为每个元素包含date、actual、planned字段的对象数组，预期结果示例：

const transformed =  [{
    date:"2023-01-03",
    actual:10,
    planned:0,
  },{
    date:"2023-01-05",
    actual:12,
    planned:43,
  },{
    date:"2023-01-06",
    actual:16,
    planned:46,
  },
  // ... 其余日期项
]

尝试的错误代码 #

const transformed = planned.map((el)=>{
  let obj ={}
  actual.map((els)=>{
     if(el.key === els.key){
       obj["date"]=== el.key
       obj["actual"]=== el.keys
       obj["planned"]=== el.key
     }
  })
 return {...obj}
})

实现思路 #

1. 提取所有日期：收集planned和actual里的全部日期，确保不遗漏任何一方的日期数据
2. 构建统一结构：遍历所有日期，对每个日期分别从两个数据源取值，无对应值则设为0
3. 可选排序：按日期先后顺序整理结果，提升可读性
4. 内置方法运用：可以用reduce或map配合Object.keys完成数据整合

具体实现代码 #

方法一：分步清晰实现 #

// 取出数组中唯一的对象（原数组仅含一个元素）
const plannedData = planned[0] || {};
const actualData = actual[0] || {};

// 收集所有不重复的日期
const allDates = [...new Set([...Object.keys(plannedData), ...Object.keys(actualData)])];

// 转换为目标格式并按日期排序
const transformed = allDates.map(date => ({
  date,
  actual: actualData[date] || 0,
  planned: plannedData[date] || 0
})).sort((a, b) => new Date(a.date) - new Date(b.date));

console.log(transformed);

方法二：用reduce一步整合 #

const transformed = Object.entries({
  ...actual[0],
  ...planned[0]
}).reduce((acc, [date]) => {
  acc.push({
    date,
    actual: actual[0][date] || 0,
    planned: planned[0][date] || 0
  });
  return acc;
}, []).sort((a, b) => new Date(a.date) - new Date(b.date));

console.log(transformed);

错误代码问题说明 #

你的代码存在几个核心问题：

• map遍历的是数组元素（这里是单个对象），并非对象的键值对，所以el.key不存在，需用Object.keys(el)获取日期键
• 赋值误用了===（全等判断），而非=（赋值操作），导致对象属性无法正确设置
• 逻辑未处理仅存在于单个数据源的日期，会遗漏大量数据

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