如何遍历日期数组匹配对象值，生成指定结构结果数组？

原始数据与需求 #

给定日期数组：

const accumulatedDates = ['2023-08-22', '2023-08-23', '2023-08-24']

以及日期对应数据的对象：

const orderDataByDate = {'2023-08-23': 1321, '2023-08-24': 2}

需要遍历accumulatedDates数组，生成结果数组：

• 若日期在orderDataByDate中有对应值，返回形如{'2023-08-23': 1321}的对象
• 若没有对应值，返回值为0的对象，比如{'2023-08-22': 0}

期望最终结果：

const results = [
  {'2023-08-22': 0},
  {'2023-08-23': 1321},
  {'2023-08-24': 2}
]

现有代码的问题 #

你尝试的代码：

const results = accumulatedDates.map(date =>
  Object.keys(orderDataByDate).filter(key =>
    key === date
      ? {
          date: orderDataByDate[key]
        }
      : {
          date: 0
        }
  )
)

实际返回了重复的键数组：

[
 ['2023-08-23', '2023-08-24'],
 ['2023-08-23', '2023-08-24'],
 ['2023-08-23', '2023-08-24']
]

出错的核心原因：

1. 用错了filter方法：filter的作用是筛选数组元素，只认回调返回的布尔值——你返回的对象在逻辑判断里是true，所以所有orderDataByDate的键都会被保留，导致每次map都返回完整的键数组。
2. 键名错误：你写的date是固定字符串键，而不是当前遍历的日期变量作为键，就算逻辑正确，生成的对象也会是{date: 0}这种不符合要求的结构。

正确解法 #

直接用map遍历数组，结合计算属性名动态生成对象键，同时判断日期是否存在：

基础写法 #

const results = accumulatedDates.map(date => {
  return {
    [date]: orderDataByDate[date] || 0
  };
});

简洁箭头函数写法 #

const results = accumulatedDates.map(date => ({ [date]: orderDataByDate[date] || 0 }));

处理值为0的边界情况 #

如果orderDataByDate中可能存在值为0的合法数据（比如某日期对应数据就是0），需要用hasOwnProperty判断，避免误把0当成不存在：

const results = accumulatedDates.map(date => ({
  [date]: orderDataByDate.hasOwnProperty(date) ? orderDataByDate[date] : 0
}));

验证结果 #

运行上述代码后，会得到完全符合预期的结果：

[
  {'2023-08-22': 0},
  {'2023-08-23': 1321},
  {'2023-08-24': 2}
]

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