如何用JavaScript数组方法或Lodash简化数组对比合并？

我有两个数组：一个是包含近30天日期的初始数组，另一个是带计数值的日期数组。目前已经通过手动循环实现了两个数组的对比与合并，匹配日期显示对应计数，其余日期显示0，得到了预期结果。作为JavaScript新手，想了解是否可以用JavaScript原生数组方法或Lodash工具简化这段代码？

初始日期数组 #

[
  '2022-12-11', '2022-12-12', '2022-12-13',
  '2022-12-14', '2022-12-15', '2022-12-16',
  '2022-12-17', '2022-12-18', '2022-12-19',
  '2022-12-20', '2022-12-21', '2022-12-22',
  '2022-12-23', '2022-12-24', '2022-12-25',
  '2022-12-26', '2022-12-27', '2022-12-28',
  '2022-12-29', '2022-12-30', '2022-12-31',
  '2023-01-01', '2023-01-02', '2023-01-03',
  '2023-01-04', '2023-01-05', '2023-01-06',
  '2023-01-07', '2023-01-08', '2023-01-09',
  '2023-01-10', '2023-01-11'
]

带计数的日期数组 #

[ [ '2023-01-09', 1 ], [ '2023-01-10', 3 ] ]

当前手动实现代码 #

let testData = [];
let k = 0;
dayList.forEach(o => {
    let is_match = 0;
    let frags = [];
    submitted.forEach(i => {
        if(o == i[0]){
            is_match = 1;
            frags = i;
        }
    });

    testData[k] = [
        (is_match == 1) ? frags[0] : o,
        (is_match == 1) ? frags[1] : 0
    ];

    k++;
});

console.log(testData);

预期结果 #

[
  [ '2022-12-11', 0 ], [ '2022-12-12', 0 ],
  [ '2022-12-13', 0 ], [ '2022-12-14', 0 ],
  [ '2022-12-15', 0 ], [ '2022-12-16', 0 ],
  [ '2022-12-17', 0 ], [ '2022-12-18', 0 ],
  [ '2022-12-19', 0 ], [ '2022-12-20', 0 ],
  [ '2022-12-21', 0 ], [ '2022-12-22', 0 ],
  [ '2022-12-23', 0 ], [ '2022-12-24', 0 ],
  [ '2022-12-25', 0 ], [ '2022-12-26', 0 ],
  [ '2022-12-27', 0 ], [ '2022-12-28', 0 ],
  [ '2022-12-29', 0 ], [ '2022-12-30', 0 ],
  [ '2022-12-31', 0 ], [ '2023-01-01', 0 ],
  [ '2023-01-02', 0 ], [ '2023-01-03', 0 ],
  [ '2023-01-04', 0 ], [ '2023-01-05', 0 ],
  [ '2023-01-06', 0 ], [ '2023-01-07', 0 ],
  [ '2023-01-08', 0 ], [ '2023-01-09', 1 ],
  [ '2023-01-10', 3 ], [ '2023-01-11', 0 ]
]

原生JavaScript实现 #

核心思路是先把带计数的数组转成键值对对象，将日期匹配的时间复杂度从O(n)降到O(1)，再用map方法遍历初始日期数组生成结果：

// 将submitted数组转为日期->计数的映射对象
const countMap = Object.fromEntries(submitted);
// 遍历dayList，生成对应结果数组
const testData = dayList.map(date => [date, countMap[date] || 0]);

console.log(testData);

Object.fromEntries可以直接把二维键值对数组转成对象，比如示例中的submitted会被转为{'2023-01-09': 1, '2023-01-10': 3}。之后用map遍历每个日期，直接从对象中取对应计数，不存在则用0，代码简洁且效率更高。

Lodash实现 #

如果项目中已经引入Lodash，可以用以下两种方式简化：

方式一：转对象优化查找（推荐） #

// 用_.keyBy将submitted转为以日期为键的对象
const countMap = _.keyBy(submitted, item => item[0]);
// 遍历dayList生成结果，_.get安全获取嵌套属性
const testData = _.map(dayList, date => [date, _.get(countMap, `${date}.1`, 0)]);

console.log(testData);

方式二：直接查找（逻辑直观，小数据量适用） #

const testData = _.map(dayList, date => {
  const match = _.find(submitted, item => item[0] === date);
  return [date, match ? match[1] : 0];
});

console.log(testData);

_.keyBy和原生Object.fromEntries作用类似，_.get可以避免访问不存在的键时抛出错误。如果数据量不大，用_.find的逻辑更直观，但嵌套查找的效率不如转对象的方式。

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